Installation: MegaMenu wird scheinbar ohne CSS dargestellt

Peter Reitmaier's Avatar

Peter Reitmaier

15 Aug, 2021 10:07 AM

Produkt: Mega Menu Contao
Contao-Version: 4.9.14
Browser und Browserversionen: Version 1.28.105 Chromium: 92.0.4515.131

Hallo,
ich habe das MegaMenu genau nach Anleitung eingerichtet. Trotzdem wird es nicht richtig dargestellt bzw. nur der reine Text der einzelnen Punkte. Scheinbar ohne CSS. Im neu erstellten Modul für die Seitenlayouts (Kopfzeile) ist aber als Navigations-Template: nav_rsmm und als Mega Menu Template: rsmm_default eingestellt. Unter Layout/RockSolid Mega Menu wurden zwei Seiten/Bereiche eingerichtet und diese Hauptpunkte zum Test in der Seitenstruktur eingestellt. MegaMenu ist scheinbar überhaupt nicht vorhanden bis eben auf den reinen Text der Haupt- und Unterseiten.

Vielen Dank im Voraus.

  1. Support Staff 1 Posted by RockSolid Theme... on 16 Aug, 2021 08:39 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Im Vision-Theme sind keine CSS-Styles für das Mega-Menu enthalten. Der CSS-Code zum ein- und ausblenden des Dropdowns könnte z. B. folgendermaßen aussehen:

    #nav-main > ul > li > .mega-dropdown {
        position: absolute;
        top: 46px;
        left: 0;
        display: none;
        z-index: 1;
        min-width: 120%;
        margin: 0;
        padding: 0 0 0 0;
        border: 1px solid #cecece;
        text-align: left;
        white-space: nowrap;
        background: #ffffff;
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    }
    #nav-main > ul > li:hover > .mega-dropdown {
        display: block;
    }
    
  2. 2 Posted by Peter Reitmaier on 16 Aug, 2021 08:35 PM

    Peter Reitmaier's Avatar

    Hallo,

    vielen Dank für Ihre schnelle Antwort.

    Laut Ihrer Anleitung ist das Mega Menu für den Einsatz mit einem
    passenden Theme gedacht, gehört Vision hier nicht dazu? Das war mir vor
    dem Kauf nicht ersichtlich. "Nur falls die Erweiterung ohne Theme
    installiert werden soll, muss der CSS-Code selbst erstellt werden..."

    Das Menü aus Luxe wäre im Nachhinein perfekt für mich, Desktop-Version
    langt aus und die Subs vom Mobile sind klappbar.

    Wie bekomme ich das hin?

    Vielen Dank im Voraus.

    Mit freundlichen Grüßen
    Peter Reitmaier

  3. Support Staff 3 Posted by RockSolid Theme... on 17 Aug, 2021 09:20 AM

    RockSolid Themes's Avatar

    Laut Ihrer Anleitung ist das Mega Menu für den Einsatz mit einem passenden Theme gedacht, gehört Vision hier nicht dazu?

    Nein, das Mega Menu ist derzeit nur in den Themes Oneo und Tao integriert.

    Das Menü aus Luxe wäre im Nachhinein perfekt für mich, Desktop-Version langt aus und die Subs vom Mobile sind klappbar. Wie bekomme ich das hin?

    Wenn Sie möchten, können wir Ihre Theme-Lizenz gegen ein Luxe-Theme tauschen. Die Anpassungen die Sie bereits durchgeführt haben müssten Sie dabei jedoch erneut umsetzen.

  4. 4 Posted by Peter Reitmaier on 18 Aug, 2021 08:56 PM

    Peter Reitmaier's Avatar

    Hallo,

    ein Wechsel des Theme ist aktuell nicht interessant.

    Noch eine Frage zum Mobil Menü von Vision: Ich habe bereits versucht im Standard Mobil nur die Hauptpunkte anzeigen zu lassen und ein weiteres Mobil Menü eingefügt, das nur die jeweiligen Subs des aktuellen Hauptpunktes darstellt. Allerdings ist dann, das zweite Menü nicht fähig die Subs auch zu öffnen, es passiert nichts. Gibt es hierfür eine Lösung?

    Freundliche Grüße
    Peter Reitmaier

  5. Support Staff 5 Posted by RockSolid Theme... on 19 Aug, 2021 08:37 AM

    RockSolid Themes's Avatar

    Erstellen Sie dafür bitte ein Duplikat der Datei templates/vision/nav_mobile.html5 mit dem Namen nav_mobile_level2.html5 und ersetzen darin id="nav-main-mobile" mit id="nav-main-mobile-level2"

    Danach fügen Sie bitte folgendes Skript am Ende der Datei files/vision/js/script.js vor der Zeile })(); ein:

    if(document.getElementById('nav-main-mobile-level2')){
        addEvent(document.getElementById('nav-main-mobile-level2'), 'change', function(){
            document.location.href = document.getElementById('nav-main-mobile-level2').value;
        });
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac