Home → Contao →

Fehler: Fehler im Mega-Menü bei Umbruch der Hauptnavigation

• Edit

Gerhard Hoffmann

07 Jan, 2017 08:33 PM

Produkt: Oneo Contao
Contao-Version: 3.5.21
Browser und Browserversionen: Chrome

Sehr geehrte Damen und Herren,

wird das Browser-Fenster zugezogen, dann springt das Hauptmenü irgendwann auf zwei- oder gar dreizeilig um. Die sich nun öffnenden Untermenüs aus der ersten Zeile arbeiten nicht mehr einwandfrei.
Dies ist auch in Ihrer Demo-Version nachvollziehbar. Man kann die Untermenüeinträge nicht mehr ohne Probleme anklicken.
Anbei zwei Screenshots, auf denen das Problem deutlich wird.
Das Megamenü kann man nur erreichen, wenn man die Maus sehr schnell bewegt, bei langsamer Bewegung erlischt das Menü.
Und das Menü unter Home ist gar nicht anklickbar.
Besser wäre es, wenn bei zwei- oder mehrzeiliger Hauptmenü-Darstellung das Mega-Menü direkt an unter dem Hauptmenüpunkt positioniert wäre, und nicht an der Brotkrummennavigation.

Hoffe, Sie finden den Fehler.

Mit freundlichen Grüßen,

Gerhard Hoffmann

• Bildschirmfoto_2017-01-07_um_20.33.56.png 188 KB
• Bildschirmfoto_2017-01-07_um_21.25.54.png 153 KB

1. Support Staff 1 Posted by RockSolid Theme... on 09 Jan, 2017 08:54 AM

   

   Vielen Dank für Ihre Frage.

   Der Fehler mit dem Dropdown unter „Home“ ist in der neuesten Theme-Version bereits behoben.

   Die Darstellung des Mega-Dropdowns sollte sich korrigieren lassen indem Sie folgenden CSS-Code in die Datei files/oneo/css/custom.css einfügen:

   @media screen and (max-width: 900px) {
       li:not(:last-of-type) > .mega-dropdown {
           top: 3.875em;
       }
   }
   

   • Edit

2. 2 Posted by Gerhard Hoffman... on 09 Jan, 2017 10:55 AM

   

   Sehr geehrte Damen und Herren,

   vielen Dank für den Tipp - sieht schon besser aus, aber nun kommt ein anderer Fehler ans Licht.
   Siehe Screenshot.
   Das MegaMenü blendet die darunter liegende Menüzeile nicht aus, so dass beim Überfahren des Megamenüs die sich darunter liegenden Menüs aktivieren, somit ist das Anklicken der Sprungmarken im Megamenü nicht möglich.

   Das Problem tritt auch bei größeren Bildschirmbreiten auf, sobald das Hauptmenü in zwei oder mehr Zeilen umgebrochen wird, reagiert die Maus auf die Hauptmenüzeile und nicht auf das Megamenü-Einträge - daher ist ein Anklicken der Links im Megamenü nicht möglich.
   In Ihrer Demo ist das Problem kaum sichtbar, aber auch vorhanden. Da die Demo-Menüzeile sehr kurz gewählt ist und daher der Umbruch von Portfolio nicht unterhalb des Megamenüs erscheint. Bei einem so kurzem Hauptmenü kann man die Maus noch halbwegs bequem ins Megamenü bewegen.

   Bitte um Ihre Hilfe.

   Mit freundlichen Grüßen,

   Gerhard Hoffmann

   • Bildschirmfoto_2017-01-09_um_11.32.09.png 147 KB
   • Edit

3. Support Staff 3 Posted by RockSolid Theme... on 09 Jan, 2017 01:06 PM

   

   Die Navigation des Oneo-Themes ist nicht darauf ausgerichtet zweizeilig verwendet zu werden, da aus Usability-Sicht eine mehrzeilige Navigation nicht optimal erfasst bzw. bedient werden kann.

   Versuchen Sie es bitte mit folgendem CSS-Code:

   @media screen and (max-width: 900px) {
       li:not(:last-of-type) > .mega-dropdown {
           top: 3.875em;
       }
       li:hover > .mega-dropdown {
           z-index: 2;
       }
       .main-navigation > ul > li.-mega:hover > a,
       .main-navigation > ul > li.-mega:hover > span {
           z-index: 3;
       }
   }
   

   • Edit

4. 4 Posted by Gerhard Hoffman... on 09 Jan, 2017 02:11 PM

   

   Sehr geehrte Damen und Herren,

   vielen Dank für die Lösung. Es geht doch - auch wenn das Menü so lang ist, dass es umgebrochen wird.
   Problem behoben.

   Nochmals Dank und schöne Grüße aus Solingen an das Rocksolid-Team,

   Gerhard Hoffmann

   • Edit

5. 5 Posted by Katharina on 13 Jan, 2023 09:44 AM

   

   This comment was split into a new discussion: Mega Menü, Flying Menü

   -

   • Edit