• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Transitions einer Liste funktionieren nicht

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:
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
 
Werbung:
K.Beutler schrieb:
Hallo,

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
Zum Vergrößern anklicken....

Du kannst nicht von 0 zu auto animieren…
Für diesen Effekt gibt es ein Workaround mit max-height (0 -> 1000), führt allerdings nicht exakt zum selben Effekt, da das Timing/Easing auf die 1000 abgestimmt ist.
 
scbawik schrieb:
Du kannst nicht von 0 zu auto animieren…
Für diesen Effekt gibt es ein Workaround mit max-height (0 -> 1000), führt allerdings nicht exakt zum selben Effekt, da das Timing/Easing auf die 1000 abgestimmt ist.
Zum Vergrößern anklicken....
Ah, guter Einwand. In der Tat scheint es nur mit einer fest definierten Höhe zu funktionieren... Dann bleibt mir wohl nichts anderes übrig, als die einzelnen Listen-Elemente mit Height:0 --> Height:18px zu animieren...

Jetzt hätte ich da noch ne Frage:
Wenn ich nun meine Listen ausklappen lassen möchte (via Mausklick --> JavaScript --> Klassenmodifikation ("selected" wird der Listen-Klasse hinzugefügt) wie hier folgt:
Code: 
<ul>
   <li onClick="menu_handler(this, 'expand');"><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>

.CSS:
Code: 
ul li
  {
        cursor:pointer;
  }

ul li ul
  {
        visibility:hidden;
  }

ul li ul li
  {
        height:0;
        transition:height 0.4s ease;
  }


ul li ul.selected
  {
        visibility:visible;
        cursor:help;
  }

ul li ul.selected li
  {
        height:17px;
  }

... dann habe ich das Problem, dass das HOVER-Event der ausgeklappten Liste nicht mehr erkannt wird, da irgendwie das übergeordnete Listenelement darüberliegt (wenn ich auf den ausgeklappten Text klicke, wird auch das OnClick-Event des Listenelements ausgeführt und der Mauszeiger ändert sich auch nicht in den gewünschten Hilfe-Zeiger --> das sollte nicht so sein)...
Weiß jemand, wie ich das übergeordnete Listenelement ("Item 1") beim HOVERN über die Unterliste "entfokusiere"??

Liebe Grüße
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben