Transition im Dropdownmenü

Hi,

ich habe mal eine Frage hinsichtlich der Transition im Dropdownmenü. Habe folgenden Code definiert:

Code:

---

#header .inside .mod_navigation li:hover ul.level_2 {
    width:auto;
    height:10em;
    min-width:15em;
    left:auto;
    top:auto;
    display:block;
    z-index: 1000;
    transition: height 0.5s ease-out 0s;

---

Aber irgendwie scheint dies nicht zu funktionieren. Kann vielleicht jemand kurz drüber schauen, woran das liegen könnte?
Finde den Fehler nicht. Liegt es vielleicht an der Höhe (10em)? Diese wird nicht angenommen.

Die Transition sollte eigentlich zum Hauptelement und nicht zum Hover.

Zitat:

---

Die Transition sollte eigentlich zum Hauptelement und nicht zum Hover.

---

Welches Hauptelement meinst du genau?

Er meint, du solltest nicht

PHP-Code:

---

#header .inside .mod_navigation li:hover ul.level_2 {
    transition: height 0.5s ease-out 0s;
} 


---

definieren, sondern bspw.

PHP-Code:

---

#header .inside .mod_navigation ul.level_2 {
    transition: height 0.5s ease-out 0s;
} 


---

Darüberhinaus hast du uns den nicht :hover Teil verschwiegen. Besser wäre es generell, du postest einen Link.

Außerdem hat das alles nichts mit Contao zu tun (weil du ja explizit die Contao Version angegeben hast).

Zitat:

---

Außerdem hat das alles nichts mit Contao zu tun (weil du ja explizit die Contao Version angegeben hast).

---

[/QUOTE]
Das stimmt. Da muss ich dir recht geben.

Aber diese Möglichkeit habe ich schon probiert.

Code:

---

#header .inside .mod_navigation ul.level_2 {
    transition: height 0.5s ease-out 0s;
}

---

Leider funktioniert das dies nicht. Das Submenü erscheint einfach beim hovern.

Ja, aber wie gesagt, es fehlt noch dein restliches CSS oder besser ein Link zur Seite.

mmmmh - den link zu schicken ist mir peinlich

Zitat:

---

Zitat von monaco

mmmmh - den link zu schicken ist mir peinlich

---

Hi,

ich denke in einem Forum, in welchem Fragen zu Entwicklung besprochen werden, muss keinem ein Beispiel peinlich sein.
Auch gerade weil das Thema Webentwicklung sehr komplex ist und die Weiterentwicklung rasend schnell voran geht.

Über Design und Geschmack kann man sicher unterschiedlicher Meinung sein.

Aber auch die Profis hier im Forum sind sicher immer froh, (neue) Ansätze zu sehen und nehmen bestimmt auch gerne das Ein- oder Andere mit.

Schön und gut für die Community ist es doch zu sehen, es gibt einen Ansatz und der funktioniert, ist praktikabel und für einen selbst umsetzbar oder aber es funktioniert so nicht, also versuche ich was anderes und beiße mir gar nicht erst die Zähne daran aus.

Ich glaube also fest, dass Dir ein Link nicht peinlich sein muss, auch unter dem Aspekt, dass diese Community hier in diesem Forum sehr freundlich und anständig Kommuniziert und sehr hilfsbereit ist.

Gruß
tschero

vielen lieben Dank tschero für die aufmunternden Worte.

Wie bereits schon genannt, funktioniert die transition-Funktion nicht.

Vielleicht liegt es auch daran, das ich das submenu ausblende:

Code:

---

#header .inside .mod_navigation ul.level_2 {
    display: block;
    left: -9999em;
    position: absolute;
    top: -9999em;
    width: 15em;

---

Also derzeit ist es so:

1. Du legst zwar height:0; für das Submenü fest, aber ohne overflow:hidden;, somit ist es mehr oder weniger irrelevant.
2. Im aktuellen CSS fehlt die von dir im ersten Post erwähnte Angabe für height im hover state:
   PHP-Code:

   ---

   #header .inside .mod_navigation li:hover ul.level_2 {
    height:10em;
} 


   ---

Wenn du also

PHP-Code:

---

#header .inside .mod_navigation .submenu ul {
    overflow:hidden;
}

#header .inside .mod_navigation li:hover ul.level_2 {
    height:10em;
} 


---

hinzufügst, funktioniert es. Und das:

PHP-Code:

---

#header .inside .mod_navigation ul.level_2 {
    left: -9999em;
    top: -9999em;
}

#header .inside .mod_navigation li:hover ul.level_2 {
    left:auto;
    top:auto;
} 


---

könntest du dann auch entfernen.

Vielen lieben Dank Spooky. Super NETT!
Hab's jetzt folgendermaßen definiert:

PHP-Code:

---

#header .inside .mod_navigation ul.level_2 {
    width:15em;
    height:0em;
    position:absolute;
    overflow:hidden;
    display:block;
    transition: height 0.5s ease-out 0s;
} 


---

PHP-Code:

---

#header .inside .mod_navigation li:hover ul.level_2 {
    width:auto;
    height:10em;
    min-width:15em;
    z-index: 1000;
} 


---

Was mir aufgefallen ist, dass wenn man die Höhe sehr hoch definiert, dass dann auch der transition effekt verschwindet.

Zitat:

---

Zitat von monaco

Was mir aufgefallen ist, dass wenn man die Höhe sehr hoch definiert, dass dann auch der transition effekt verschwindet.

---

Ja, das ist logisch, weil wenn du zB eine transition von 0 auf sagen wir mal 10000 in nur 500ms sekunden machst, dann müssen ja eben 10000 pixel in nur einer halben Sekunden zurückgelegt werden. Das ist so schnell, dass es eigentlich gar nicht mehr dargestellt werden kann ;). Darüberhinaus hast du auch noch ein ease-out drin, wodurch es am Anfang noch schneller ist.