K
K.Beutler
Guest
Hallo,
ich versuche mich gerade an ein paar schönen Effekten für meine Navigation, leider scheitere ich immer wieder am "transition"-Befehl:
Hier die .CSS:
Beim Hover-Event wird das Untermenü ausgeklappt durch das Vergeben einer sichtbaren Höhe für die Listenelemente der Unterliste.
Diese Veränderung sollte doch durch den transition:height Befehl einen animierten Effekt bekommen... tut es aber nicht.
Warum?
Über einen Wink wäre ich sehr dankbar :)
Liebe Grüße
ich versuche mich gerade an ein paar schönen Effekten für meine Navigation, leider scheitere ich immer wieder am "transition"-Befehl:
Code:
<ul>
<li><span class="headline">Item 1</span>
<ul class="expandable">
<li class="indented_1"><span>Sub-Item 1</span></li>
<li class="indented_1"><span>Sub-Item 2</span></li>
<li class="indented_1"><span>Sub-Item 3</span></li>
<li class="indented_1"><span>Sub-Item 4</span></li>
<li class="indented_1"><span>Sub-Item 5</span></li>
</ul>
</li>
<li class="headline"><span class="headline">Item 2</span></li>
<li class="headline"><span class="headline">Item 3</span></li>
<li class="headline"><span class="headline">Item 4</span></li>
<li class="headline"><span class="headline">Item 5</span></li>
</ul>
Hier die .CSS:
Code:
span
{
color:#666666;
}
span.headline
{
font-size:1em;
font-weight:bold;
color:#2f4f4f;
}
ul li.headline
{
margin-top:10px;
}
ul li.indented_1
{
margin-left:10px;
}
ul li ul.expandable li
{
height:0;
transition:height .2s ease;
}
ul li:hover ul.expandable li
{
height:auto;
}
Beim Hover-Event wird das Untermenü ausgeklappt durch das Vergeben einer sichtbaren Höhe für die Listenelemente der Unterliste.
Diese Veränderung sollte doch durch den transition:height Befehl einen animierten Effekt bekommen... tut es aber nicht.
Warum?
Über einen Wink wäre ich sehr dankbar :)
Liebe Grüße