Ergebnis 1 bis 3 von 3

Thema: Hovermenü berechte automatische Maße falsch

  1. #1
    Contao-Nutzer
    Registriert seit
    27.01.2014.
    Beiträge
    39

    Standard Hovermenü berechte automatische Maße falsch

    Hallo Zusammen,

    ich arbeite aktuell an einer horizontalen Navigation mit Hover ab der zweiten Ebene. Die erste Ebene ist immer sichtbar, alle anderen Ebenen erscheinen per hover horizontal darunter.

    Demo -> http://jsfiddle.net/gd4y1ezr/20/

    Wenn alle height auf auto stehen wird die zweite Ebene in zwei Zeilen aufgeteilt und eine Scrollbar angezeigt. Ich habe bei
    Code:
    #header .mod_navigation li:hover .level_2
    die height fest auf 200px eingestellt und errstmal sieht alles gut aus. Jedoch nur solange die Linknamen in der dritten Ebene kurz genug sind. Wird der Text länger, reicht der Platz nicht und die Links stehen untereinander.

    Woran liegt das? Ich kann mir das nur so erklären das der Container für die zweite Ebende bei hover berechtnet und angezeigt wird und wenn dann der Container für Ebene Drei in Spiel kommt, Ebene zwei nicht neu berechnet wird und die Drei halt entweder in den vorhandenen Platz passt, oder gescrollt werden muss.
    Wenn das so ist, wie lässt sich das abstellen? Gibt es einen Weg die Container neu berechnen zu lassen? Oder muss ich andere Wege gehen? Das Design wird mir zum Gück nicht vorgegeben, ich kann also umschwenken. Nur drei Ebenen müssen mind. vorhanden sein.

    gruß
    Stefan

  2. #2
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.198
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich habe die height beim hover über level_1 (#header .mod_navigation li:hover .level_2) wieder auf auto gestellt und overflow auf visible statt auto. auto erzeugt hier bei unzureichendem Platz eine Scrollbar, visible lässt die Darstellung ausserhalb zu.
    http://jsfiddle.net/gd4y1ezr/21/

  3. #3
    Contao-Nutzer
    Registriert seit
    27.01.2014.
    Beiträge
    39

    Standard

    Ich muss mir echt mal die CSS Referenz unters Kopfkissen legen. Vielen Dank für den Hinweis. Hätte ich auch selber drauf kommen können...
    Das die dritte Ebene nicht links floatet, habe ich mit
    Code:
    /*Ebene bei mouseover anzeigen*/
    #header .mod_navigation .level_2 li:hover .level_3 {
      left: -1px;
    }
    erledigt. In wie weit das die beste Lösung ist weiß ich nicht, aber es funktioniert. Wenn dazu jmd. eine elegantere Lösung hat, immer her damit

    gruß
    Stefan aka Ich hasse CSS...

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •