Show language names on hover

This commit is contained in:
str4d
2015-01-11 08:42:17 +00:00
parent a8776d7453
commit 2cdc0df711
2 changed files with 15 additions and 1 deletions

View File

@ -1,4 +1,4 @@
<ul class="languages"> <ul class="languages">
{% for lang in supported_langs -%} {% for lang in supported_langs -%}
<li><a href="{{ change_lang(lang) }}" rel="alternate" hreflang="{{ lang }}" title="{{ lang_names[lang] }}"><div class="menuitem"><img src="{{ get_flag(lang) }}" alt="{{ lang_names[lang] }}" /></div></a></li> <li><a href="{{ change_lang(lang) }}" rel="alternate" hreflang="{{ lang }}"><div class="menuitem"><img src="{{ get_flag(lang) }}" /><div class="langname">{{ lang_names[lang] }}</div></div></a></li>
{% endfor %}</ul> {% endfor %}</ul>

View File

@ -30,6 +30,17 @@ div.navigation {position:relative;}
ul.languages {margin: 0 2px !important;} ul.languages {margin: 0 2px !important;}
ul.languages li {display:inline-block; *display:inline; *zoom:1; margin: 0 -2px !important;} ul.languages li {display:inline-block; *display:inline; *zoom:1; margin: 0 -2px !important;}
.langname {
background: green;
display: none;
padding: 0.5em;
position: absolute;
right: 0;
text-align: center;
top: 4em;
z-index: 1;
}
/* Dropdown menu CSS */ /* Dropdown menu CSS */
menu ul, menu ul,
@ -136,6 +147,9 @@ menu ul,
padding: 10px; padding: 10px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
} }
#cssmenu .has-sub ul li div.menuitem:hover .langname {
display: block;
}
#cssmenu .has-sub ul li:hover > div.menuitem, #cssmenu .has-sub ul li:hover > div.menuitem,
#cssmenu .has-sub ul li:hover > a > div.menuitem { #cssmenu .has-sub ul li:hover > a > div.menuitem {
background: #8bbc51; background: #8bbc51;