Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 40 von 45

Thema: Einbindung mobile_menu

  1. #1
    Contao-Fan Avatar von jscholtysik
    Registriert seit
    19.06.2009.
    Ort
    München
    Beiträge
    368

    Standard Einbindung mobile_menu

    Hi,


    ich bin anscheinend zu blöd, die Erweiterung mobile_menu von Kamil unter Contao 4.4 sauber einzubinden.

    Ich habe auf einer Schul-Website, die ich ehrenamtlich betreue, versucht, mobile_menu einzubinden, kämpfe aber schon mit der "Anleitung", die Kamil auf seiner Seite hat...
    Die Schul-Website hat ein horizontales Menü mit 2 Unterebenen, die per Hover ausfahren, und soll unterhalb von 960px dann mobile_menu inkl. Unterpunkte anzeigen. Die Seite ist leider noch nicht öffentlich zugänglich.

    Kann mir bitte jemand erklären, was die einzelnen Schritte sind, um diese Erweiterung unter Contao 4.4 sauber zum Laufen zu bekommen?

    Was mir auch nicht klar ist:

    - Brauche ich ein oder zwei Module?
    - Wie bekomme ich in die mobile Navigation die Unterpunkte rein?

    Ich würde dann nach erfolgreichem Einbau von mobile_menu auch eine Dokumentation dafür schreiben...

    Oder gibt es doch die Möglichkeit, dk_mmenu in einer aktuellen oder der letzten frei verfügbaren Version 1.5.1 in Contao 4.4 einzubauen, nachdem es ja bei dieser Erweiterung Lizenzprobleme mit einem aktuellen mmenu gibt?
    Wobei ich bei der Schulseite auch die aktuelle Version für Personal oder Non-Profit verwenden könnte, nur wie einbauen oder die bisherige Erweiterung aktualisieren? Viele Erweiterungen für mobile Navigationen laufen einfach nicht mehr unter Contao 4.4 (oder ich bin auch hier zu blöd, diese einzubinden)...

    Vielen Dank schon mal für Eure Hilfe!!
    Joachim
    *** Kein Backup, kein Mitleid ***

  2. #2
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.529
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo Joachim, da unterwegs erst mal nur kurz.

    Es reicht ein Modul.
    Im Feld Trigger kommt das rein, mit dem man das Menü aufrufst.
    Im zweiten Feld bindest du ein , was du möchtest.
    Ich erstelle mir dafür ein neues Navigationmodul, welches ich dann via Inserttag in das zweite Feld einbaue.
    Kann später auch noch Screenshots nachliefern.


    Gesendet von iPhone mit Tapatalk
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  3. #3
    Contao-Fan Avatar von jscholtysik
    Registriert seit
    19.06.2009.
    Ort
    München
    Beiträge
    368

    Standard

    Hi Thomas,


    das wäre super. Wir können auch mal telefonieren... ;-)

    Vielen Dank schon mal.
    Joachim
    *** Kein Backup, kein Mitleid ***

  4. #4
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.529
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo Joachim,

    installiert hast du mobile_menu erfolgreich?

    So wie im Anhang sieht mein Setup für das Modul aus.

    Ich habe ein weiteres Navigationsmodul erstellt, welches ich für die mobile Navigation verwende -> wird dann im Feld „Menu Inhalt” als Modul via Inserttag eingebunden. Somit kannst du dein mobiles Menü dort konfigurieren. Das Modul ”Mobiles Menü” ist quasi ein Platzhalter – für das Menü etc.
    Kamil hat auf seiner Website ja auch die Setupschritte drin; du kannst hier z.B. auch noch eine Suche einbauen oder SocialMedia-Icons mit Links und viel mehr.

    Man kann auch das bestehende Modul für die Navigation der Desktopansicht via Inserttag in das Modul „Mobiles Menü” einbauen; dann muss man aber das CSS wieder speziell ansteuern… Daher ein neues Modul und eine eigene CSS-ID dafür. Dann kannst du die mobile Navigation via CSS gestalten.

    Besser verständlich?
    Angehängte Grafiken Angehängte Grafiken
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  5. #5
    Alter Contao-Hase
    Registriert seit
    12.10.2010.
    Beiträge
    1.082

    Standard

    Ich würde dann nach erfolgreichem Einbau von mobile_menu auch eine Dokumentation dafür schreiben...
    Das würde mich auch interessieren. :-)

    Frage:
    Wenn ich mir den HTML-Code auf der mobile_menu-Seite anschaue, finde ich die Navigation 2 x eingebunden.
    Einmal im Wrapper unter Header > Bottom als <nav id="mainmenu" class="mod_navigation block">,
    und dann nochmal in einem DIV unterhalb des Wrappers. (siehe Bild).

    Unbenannt-1.jpg

    Lässt sich das Ganze auch mit nur einer Einbindung realisieren, bei der man mit Hilfe von BreakePoints Ansichten in SMALL (für kleine Bildschirme) und LARGE (für Desktop) erstellt?

  6. #6
    Contao-Fan Avatar von jscholtysik
    Registriert seit
    19.06.2009.
    Ort
    München
    Beiträge
    368

    Standard

    Danke für die Anregungen und Hilfestellungen. Ich habe es schließlich mit Bjarkes Unterstützung hinbekommen.

    Ich frage noch mal bei Bjarke nach, ob ich seine Anregungen mit meinen Änderungen für eine Doku nutzen kann und würde dann die Doku in diesen Beitrag schreiben oder als eigenständige Doku hier anhängen.

    Hier schon mal zwei Screenshots der beiden Navigationen:

    Horizontale Navigation mit drei Ebenen:

    schule1.jpg

    Mobile Navigation mit drei Ebenen:

    schule2.jpg

    Ist eigentlich ganz einfach, wenn man weiß, wie's geht...

    DANKE ALLEN!!
    Joachim
    *** Kein Backup, kein Mitleid ***

  7. #7
    Contao-Fan Avatar von jscholtysik
    Registriert seit
    19.06.2009.
    Ort
    München
    Beiträge
    368

    Standard

    So, ich habe mal eine kleine Dokumentation vorbereitet, wie man mobile_menu einbinden kann.

    Bei diesem Beispiel hatte ich folgende Voraussetzungen:
    - Standard-Menü ist ein horizontales Menü mit drei Ebenen
    - Das mobile Menü soll ebenfalls alle drei Ebenen anzeigen, wobei alle Menüpunkte auch auswählbar sind (Haupt- und Untermenü-Punkte)
    - Das horizontale Menü wird bei Unterschreitung von 991px Breite durch das mobile Menü ersetzt (Hamburger-Menü)


    1. Installation mobile_menu über den Contao Manager

    Bildschirmfoto 2017-09-29 um 17.33.16.png


    2. Anlage eines neuen Menü-Moduls mit meinen Werten und Einstellungen als Beispiel:

    Bildschirmfoto 2017-09-29 um 17.13.23.png

    - Titel und Typ:


    -- Modultyp: Mobile Menu

    -- Titel: z.B. Navigation - Main Mobile Menu


    - Modul-Konfiguration:

    - Trigger Inhalt: z.B.: <div id="mobile_trigger"><i class="fa fa-bars" aria-hidden="true"></i> Menü</div>


    - Menu Inhalt: Was soll im mobilen Menü erscheinen? Hier kannst Du unterschiedlichste Inhalte einbinden und dann anzeigen lassen, z.B.:

    {{insert_module::25}} --> Modul mit HTML Code für Menü Titelleiste, z.B. "Menü" + Kunden- oder Website-Name

    Bildschirmfoto 2017-09-29 um 17.15.21.png

    {{insert_module::21}} --> Navigation - Main Menu (bei mir eine Horizontale Navigation mit 3 Ebenen)

    {{insert_module::24}} --> Modul mit HTML Code für Menü Footer, z.B. Kundenadresse

    Bildschirmfoto 2017-09-29 um 17.17.43.png


    - Display-Settings / deutsch: Anzeige-Einstellungen:

    -- "Auf Smartphones anzeigen" und / oder "Auf Tablets anzeigen" auswählen

    -- Custom breakpoint (px) / deutsch: Individueller Breakpoint (px)
    Wenn Du einen individuellen Breakpoint setzen möchtest, überschreibt dieser Wert die Werte bei "Auf Smartphone anzeigen" und "Auf Tablet anzeigen"


    Bildschirmfoto 2017-09-29 um 17.14.21.png

    -- Make parent items work as toggler only / deutsch: Eltern-Menüpunkte nur als Toggler verwenden
    Aktivieren, wenn Menüpunkte mit Untermenüpunkten nur als Toggler für die Unterseiten-Anzeige dienen und nicht direkt auswählbar sein sollen

    -- Disable collabsible navigation / deutsch:Navigation standardmäßig ausklappen
    Soll die Navigation standardmäßig komplett über alle Ebenen ausgeklappt sein, muss hier der Haken gesetzt sein

    -- Close menu on link click / deutsch: Menü schließen, wenn Link angeklickt
    Schließen des mobilen Menüs, wenn ein Link angeklickt wird


    - Design-Settings / deutsch: Gestaltungs-Einstellungen:

    -- Position: Links, Rechts, Oben, Unten

    -- Custom menu size (%) / deutsch: Individuelle Menügröße (%)
    Hier kann man die individuelle Breite oder Höhe in Prozent angeben

    -- Enable the overlay / deutsch: Overlay aktivieren
    Mit dieser Einstellungen kann man ein Overlay über den Inhalt legen, sobald das Menü aktiv ist

    -- Off canvas effect / deutsch: Off Canvas Effekt
    Wenn aktiviert, schiebt der Off Canvas Effekt den Inhalt weg, ansonsten wird der Inhalt überlagert

    -- Disable menu shadow / deutsch: Menü-Schatten deaktivieren
    Deaktiviert den Standard-Menu-Schatten

    -- Animation speed (ms) / deutsch: Animationsgeschwindigkeit (ms)
    Hier kannst Du die Animationsgeschwindigkeit in ms setzen (1000ms = 1 Sekunde)


    3. Nun muss das Modul noch in das entsprechende Seitenlayout eingebunden werden. Ich habe das neue Modul direkt unter dem normalen Menü-Modul in die Kopfzeile eingebunden:

    Bildschirmfoto 2017-09-29 um 17.12.40.png


    4. CSS

    Ich habe (mit Hilfe von Bjarke Ammann) folgendes CSS verwendet und noch erweitert:

    Code:
    /*
     * ==============================================
     * Mobile Menu
     * ==============================================
     */
    
    @media only screen and (max-width: 991px){
        
        #header .mod_navigation
        {
            display: none;
        }
        
    #mobile_trigger {
      color: white;
      cursor: pointer;
      font-size: 1rem;
    }
    
    .mod_mobile_menu {
      background-color: #BE1E2D;
      margin-bottom: 15px;
      padding: 10px 15px;
      width: 100%;
      z-index: 100;
    }
    
    .mobile_menu .inner {
      background-color: #BE1E2D;
      color: #4c4d4b;
    }
    .mobile_menu .inner .ce_text {
      line-height: 1.5;
      padding: 10px 15px;
    }
    .mobile_menu .logo img {
      padding: 10px;
    }
    .mobile_menu .mod_navigation {
      clear: both;
      margin: 20px 0;
    }
    .mobile_menu .mod_navigation ul {
      margin: 0;
      padding: 0;
    }
    .mobile_menu .mod_navigation ul li {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    .mobile_menu .mod_navigation a,
    .mobile_menu .mod_navigation strong {
      border-bottom: 1px solid #B5A142;
      color: white;
      display: block;
      font-size: 16px;
      padding: 12px 15px;
      text-decoration: none;
    }
    .mobile_menu .mod_navigation a.first,
    .mobile_menu .mod_navigation strong.first {
      border-top: 1px solid #B5A142;
    }
    .mobile_menu .mod_navigation a:focus, .mobile_menu .mod_navigation a:hover {
      color: white;
      background: #B5A142;
    }
    .mobile_menu .mod_navigation a.trail:focus, .mobile_menu .mod_navigation a.trail:hover {
      color: #ffffff;
    }
    .mobile_menu .mod_navigation .active,
    .mobile_menu .mod_navigation .trail {
      background-color: #B5A142;
      color: #ffffff;
        font-weight: bold;
    }
    .mobile_menu .mod_navigation .level_2 a,
    .mobile_menu .mod_navigation .level_2 strong {
      background-color: #929497;
        padding-left: 45px;    
        text-decoration: none;    
        font-weight: normal;
    }
    .mobile_menu .mod_navigation .level_2 a.first,
    .mobile_menu .mod_navigation .level_2 strong.first {
      border-top: 0;
    }
        
    .mobile_menu .mod_navigation .level_2 a:focus, .mobile_menu .mod_navigation .level_2 a:hover {
      color: white;
      background: #B5A142;
    }
        
    .mobile_menu .mod_navigation .level_2 a.trail:focus, .mobile_menu .mod_navigation .level_2 a.trail:hover {
      color: #ffffff;
    }    
        
    .mobile_menu .mod_navigation .level_2 .active,
    .mobile_menu .mod_navigation .level_2 .trail {
        color: white;
        background: #B5A142;
        font-weight: bold;
    }
    
    .mobile_menu .mod_navigation .level_3 a,
    .mobile_menu .mod_navigation .level_3 strong {
      background-color: white;
        color: black;
        padding-left: 75px;
        text-decoration: none;
    }
    .mobile_menu .mod_navigation .level_3 a.first,
    .mobile_menu .mod_navigation .level_3 strong.first {
      border-top: 0;
    }
        
    .mobile_menu .mod_navigation .level_3 a:focus, .mobile_menu .mod_navigation .level_3 a:hover {
      color: white;
      background: #B5A142;
    }
        
    .mobile_menu .mod_navigation .level_3 a.trail:focus, .mobile_menu .mod_navigation .level_3 a.trail:hover {
      color: #ffffff;
    }
        
    .mobile_menu .mod_navigation .level_3 .active,
    .mobile_menu .mod_navigation .level_3 .trail {
        color: white;
        background: #B5A142;
        font-weight: bold;
    }
        
    .navi_title
        {
            color: white;
            text-align: center;
        }
        
    .navi_footer
        {
            color: white;
            text-align: center;
        }
    }

    Somit erhalte ich folgende Ausgabe:

    Mein ursprüngliches horizontales Menü:

    Bildschirmfoto 2017-09-29 um 17.58.59.png


    Mein mobiles Menü:

    Das Hamburger-Menü:

    Bildschirmfoto 2017-09-29 um 18.01.00.png

    Menü-Titel:

    Bildschirmfoto 2017-09-29 um 18.01.58.png

    Mobiles Menü:

    Bildschirmfoto 2017-09-29 um 18.02.49.png

    Menü-Footer:

    Bildschirmfoto 2017-09-29 um 18.04.01.png


    Ich hoffe, dass diese Anleitung verständlich rüberkommt und freue mich auf Eure Reaktionen...
    Geändert von jscholtysik (29.09.2017 um 18:18 Uhr)
    Joachim
    *** Kein Backup, kein Mitleid ***

  8. #8
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Da hast du dir jetzt sehr viel Mühe gegeben, aber das steht eigentlich alles schon im Manual der Erweiterung.

    Was nicht gut ist, dass du eigenes HTML schreibst. Ich beziehe mich hauptsächlich auf Modul ID 24 Menu Footer. Du solltest soweit es geht Inhaltselemente anlegen, welche du dann einbindest. Wenns geht immer Contao das HTML generieren lassen, nicht selber schreiben.

    ps Wenn man das gleiche Mobile Menu auch für die Desktop-Ansicht benutzen möchte, dann gibt es ein paar CSS-Eigenschaften, welche man resetten muss. Mal als Beispiel:
    PHP-Code:
    @media (min-width960px) {
      
    #wrapper {
        
    padding-top80px;
      }
      .
    mobile_menu {
        
    width100% !important;
        
    heightauto !important;
        
    transformnone !important;
        
    displayblock !important;
        
    /* position: relative; */
      
    }
      .
    mobile_menu .inner {
        
    heightauto;
        
    overflowvisible;
      }
      .
    mm-close {
        
    displaynone;
      }
      .
    subnav li {
        
    floatleft;
      }
      .
    subnav li.submenu_hide ul {
        
    displaynone;
      }
      .
    subnav ul ul {
        
    positionabsolute;
        
    left0;
      }

    Hauptsächlich sind die !important Angaben wichtig, weil man nur so das erzeugte Inline-Style überschreiben kann. In dem Beispiel nehme ich das Mobile-Menu und setze es fixed nach oben. Siehe auch hier https://github.com/codefog/contao-mobile_menu/issues/12
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  9. #9
    Contao-Fan Avatar von jscholtysik
    Registriert seit
    19.06.2009.
    Ort
    München
    Beiträge
    368

    Standard

    Hallo Andreas,


    danke für die Anregung mit den Inhaltselementen. Habe ich gerade mal ausprobiert, geht natürlich genauso:

    Bildschirmfoto 2017-10-02 um 12.03.18.png

    Aber Kamil schreibt ja selbst (kann man natürlich auch missverstehen, ob das nun Module oder CE sein sollen):

    Create then the necessary modules and write down their IDs - they are mandatory for the insert tag.

    Wäre die Anleitung auf Kamils Seite vollständig, hätte ich mir nicht die Mühe gemacht, noch einmal alles zu dokumentieren. Aber das ist sie leider nicht und deshalb habe ich mich bei der Einbindung schwer getan. Deswegen habe ich noch etwas detaillierter dokumentiert und auch mehr Screenshots hinterlegt.

    Da ich gerade dabei war, habe ich die deutsche Übersetzung auch gleich mal vervollständigt, die dann lt. Kamil auch in der Version 2.7.0 dabei sein wird...
    Angehängte Grafiken Angehängte Grafiken
    Joachim
    *** Kein Backup, kein Mitleid ***

  10. #10
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Er schreibt "the necessary modules". Und dies ist ja nicht "necessary".

    Es ist auch nicht genauso! Grundsätzlich sollte das eigentlich immer über insert_content oder insert_article vorgenommen werden. Das hat viele Vorteile und wenn ich als Entwickler in ein BE eingeladen werde, muss ich eigentlich als erstes immer die Fehler des eigenen HTML-Codes bereinigen. Die Vorteile, die mir spontan einfallen:
    • Keine HTML-Fehler
    • Pflege durch den Redakteur möglich
    • Profitieren von SEO optimized HTML
    • Profitieren von HTML-Verbesserungen bei Contao Updates
    • Profitieren von dem DBAFS
    • ...
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  11. #11
    Contao-Fan Avatar von Doro
    Registriert seit
    22.06.2009.
    Ort
    Ammersbek
    Beiträge
    359

    Standard

    Hallo Andreas, sehr toll, Dicken Dank fürs Teilen dieser der CSS-Eigentschaften um nun alle Navigationen mit dem mobile_menu abbilden zu können, das ist echt toll, da kommt Freude auf.

    Zitat Zitat von Andreas Beitrag anzeigen
    ps Wenn man das gleiche Mobile Menu auch für die Desktop-Ansicht benutzen möchte, dann gibt es ein paar CSS-Eigenschaften, welche man resetten muss. Mal als Beispiel:
    PHP-Code:
    @media (min-width960px) {
      
    #wrapper {
        
    padding-top80px;
      }
      .
    mobile_menu {
        
    width100% !important;
        
    heightauto !important;
        
    transformnone !important;
        
    displayblock !important;
        
    /* position: relative; */
      
    }
      .
    mobile_menu .inner {
        
    heightauto;
        
    overflowvisible;
      }
      .
    mm-close {
        
    displaynone;
      }
      .
    subnav li {
        
    floatleft;
      }
      .
    subnav li.submenu_hide ul {
        
    displaynone;
      }
      .
    subnav ul ul {
        
    positionabsolute;
        
    left0;
      }

    ich habe zum Testen mal deinen Ansatz so übernommen,
    nur ein Problem habe ich noch
    edit: URL entfernt
    es klappt nicht zu Shame on me
    in meinen Display-Settings ist Close menu on Click aktiv
    was habe ich wohl übersehen?
    Doro
    Angehängte Grafiken Angehängte Grafiken
    Geändert von Doro (02.12.2017 um 10:16 Uhr)

  12. #12
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    "Close menu on Click" benutze ich nie. Dann kann man im aufklappenden Menü nämlich keine Punkte mit Unterpunkten mehr aufklappen. Laut Hilfetext ist dies deshalb nur für Onepagenavigationen gedacht. Scheint so, als hättest du dies auch wieder deaktiviert, weil man im Auklappmenü bei dir einen Unterpunkt aufklappen kann.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  13. #13
    Contao-Fan Avatar von Doro
    Registriert seit
    22.06.2009.
    Ort
    Ammersbek
    Beiträge
    359

    Standard

    richtig!, "Close menu on Click" habe ich wieder rausgenommen und gestern noch Einiges probiert, was alles offensichtlich nichts mit meinem Problem zu tun hat.
    Das Problem ist auch nicht, ein "Aufklappen" der Unterpunkte sondern das Problem ist: Sie klappen nicht wieder zu,
    wenn man eine Seite ansteuert sind sie (das Submenu) immer noch offen

    ich habe u.a. schon darüber nachgedacht, ob es daran liegen kann, dass es Contao4 ist und ich aus dem <span> im menu ein <strong> machen musste?
    aber im JavaScript ist beides benannt: ("a, span, strong"), hmm keine Ahnung...
    ist aber auch nicht so ein Problem, wenn ich es nicht hinbekomme, werde ich wie bisher eben eine Desktopnavi einsetzen und eine gesonderte für mobil.
    Danke für Drüberschauen
    Doro

  14. #14
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.914
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Doro Beitrag anzeigen
    das Problem ist: Sie klappen nicht wieder zu
    ohne jetzt zu wissen, wie dein Letztstand ist ... aber der noch offenen Menüpunkt kommt aktuell nicht mehr aus dem mobile_menu heraus, oder? Scheint so, als hättest du pro Unterseite ein ce_text mit der jeweiligen Bezeichnung der Unterseite eingefügt.
    Ich kann nämlich das "Nicht Zuklappen" nicht nachstellen ... hatte ich aber gestern auch schon nicht nachstellen können » ggf. ein cache- oder Browser-Thema?
    Grüsse
    Bernhard


  15. #15
    Contao-Fan Avatar von Doro
    Registriert seit
    22.06.2009.
    Ort
    Ammersbek
    Beiträge
    359

    Standard

    doch es ist ja insgesamt, ausschliesslich das mobile_menu.
    und ja es gib eine .ce_text pro Seite als "content", um zu sehen wo ich bin.
    ich erwarte, dass nachdem ich auf einen Link im SubMenu geklickt habe und diese somit gewählte Seite dann angesteuert ist, dass das SubMenu dann wieder geschlossen ist,
    aber das ist es nicht, ich kann's mir nicht erklären.

  16. #16
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.914
    Contao-Projekt unterstützen

    Support Contao

    Standard

    mmmh - ok, ich verstehe es trotzdem nicht. Das Menü klappt doch zu.
    schau dir mal meinen screenshot an:
    mobile.jpg
    das dritte Bild rechts ist der Zustand, nachdem ich auf den Link 'Rundgang' aus dem zweiten Bild geklickt habe » geschlossen.
    Gleiches Verhalten wenn, ich auf einen der Untermenüpunkte von 'Unser Angebot' klicke

    Oder verstehe ich das Problem nicht?
    Grüsse
    Bernhard


  17. #17
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich weiß, was du meinst.

    Du musst erstens bedenken, dass dieses Menü (noch) nicht für beide Situationen gedacht ist, sondern nur für die Situation des kleinen Viewports, wo es so ein Aufklappmenü bietet, wie man es möchte und kennt.

    Jetzt musst du versuchen beide Situationen getrennt zu betrachten.

    Mobile: Hier ist alles super. Beim Aufklappen sieht man die obersten Level und Pfeile wenn Sublevel vorhanden sind. Ist man bereits auf einem Sublevel, dann ist dieses Level bereits aufgeklappt und der aktive Punkt hervorgehoben. Desweiteren kann man andere Level, welche Sublevel haben aufklappen um nachzusehen, welche Sublevel sich darin befinden. Es ist immer nur ein Punkt aufgeklappt, ein bereits offener Punkt klappt zu, wenn ein anderer aufgeklappt wird. Ist man auf einer Seite mit Subleveln,
    Code:
    Seite (active)
      Subseite_1 (auf)
      Subseite_2 (auf)
    Kontakt
      Impressum (zu)
      Anfahrt   (zu)
    dann sind die Sublevel bereits aufgeklappt, man kann sie auch nicht zuklappen. Klicke ich jetzt auf "Kontakt", dann klappen die Unterpunkte auf und die Unterpunkte von "Seite (active)" zu, aber man kann nicht alle zuklappen. Das ist eigentlich sehr praktisch so. Wenn Kontakt aufgeklappt ist, kommt man mit einem zweiten Klick auf Kontakt zur Kontaktseite. Hingegen ein Klick auf "Seite" läd nie die "Seite" neu, weil dies ja der SPAN ist. Er besitzt aber einen ClickEventListener, damit die Unterpunkte wieder aufklappen, nachdem man geguckt hat, was sich unter Kontakt für Seiten befinden.

    Desktop: Die Desktopvariante besitzt immer noch alle EventListener und somit JS-Funktionalitäten, wie auch im "Mobile"-Modus, weil wir den Zustand ja nur per CSS optisch verändert haben. Schau dir das Menü im Desktop-Modus in den Devtools mit dem Inspektor an, dann siehst du, wie die Listenpunkte, welche Sublevel enthalten, eine Klasse submenu_show|hide bekommen. Ich setze gerade eine Seite auf, wo ich dieses Menü so benutze. Ich finde es gut, dass ich bei dem aktiven Punkt direkt horizontal darunter die Sublevel sehen kann. Mit einem Klick auf einen anderen Punkt mit Subleveln werden mir diese angezeigt. Bei einem weitern Klick auf den Punkt der aktuellen Seite sehe ich wieder die Sublevel der Seite auf welcher ich gerade bin. Wenn dir dies so nicht gefällt, dann musst du noch ein wenig mit dem CSS herumspielen und evtl. noch einen ClickEventListener auf die SPANs aufsetzen, welcher dann die Klasse submenu_show|hide umschaltet.

    SPAN ist für 3.5 und STRONG für 4. Deshalb habe ich direkt beides ins CSS reingebracht. Kannst ja rausschmeißen, was du nicht benötigst. Wenn du noch ein wenig wartest, kann ich dir die Seite zeigen, die ich gerade mache. Dauert noch ein paar Tage.
    Geändert von Andreas (13.08.2018 um 13:51 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  18. #18
    Contao-Fan Avatar von Doro
    Registriert seit
    22.06.2009.
    Ort
    Ammersbek
    Beiträge
    359

    Standard

    Tausend Dank für Deine ausführliche Erläuterung Andreas,
    jetzt beginne ich zu verstehen. Da muss ich nochmal RICHTIG drüber nachdenken.

    und ja sehr gerne schauen ich mir deinen Aufbau in ein paar Tagen an, auf jeden Fall, immer toll ein Anschauungsbeispiel zu sehen, auch wenn ich mich selbst vielleicht doch erstmal für meine "herkömmliche Variante" mit 2 Menüs entscheide, weiss ich noch nicht.

    Danke jedenfalls
    auch an derRenner, Du hast mich allerdings missverstanden.
    Es ging um die Dropdownfunktionalität in der Desktopversion. Andreas hat das in seinem letzten Thread sehr schön beschrieben, was ich längst nicht so detailliert beschrieben hatte und Du mich daher missverstanden hast.

  19. #19
    Contao-Nutzer
    Registriert seit
    07.09.2013.
    Beiträge
    84

    Standard

    Vielen Dank für diese Anleitung.

    Mir hat das schon sehr weiter geholfen, aber....
    füge ich die ID für Main Navigation ein, bleibt immer noch alles schwarz in der MobileNavi. Auf einem 10er Tablet funktioniert es, aber dort nicht wichtig !

    Vielen Dank
    Gruß
    Chriss
    Geändert von chriss136 (11.08.2018 um 21:14 Uhr)

  20. #20
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Spezielle Fehlerbehandlung geht nur, wenn man einen Link zur Seite hat.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  21. #21
    Contao-Nutzer
    Registriert seit
    07.09.2013.
    Beiträge
    84

    Standard

    Oh Sorry ja, ich vergess das immer wieder, da ich mehrere Threads habe, wo der Link schonmal steht.

    www.belleza-jes.de

    ich vermute, dass das eine Auflösungs Problematik ist, da es auf einem Galaxy S6 Edge funktioniert. (Auch wenn sie nur so übernommen wird wie auf der Desktop Seite)

  22. #22
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Mit display:none wirst du die auch nicht sehen.
    HTML-Code:
    @media screen and (max-width: 599px) {
    	.main-navigation {
    		display: none;
    	}
    }
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  23. #23
    Contao-Nutzer
    Registriert seit
    07.09.2013.
    Beiträge
    84

    Standard

    Hi Andreas,

    danke für die schnelle Antwort. Das war es leider nicht.Hab es nun durch display:block ersetzt, auch dadurch ist es nicht zu sehen.
    Ob das noch irgendwo anders überschrieben wird ?

    EDIT: sieht nicht so aus
    Geändert von chriss136 (13.08.2018 um 15:15 Uhr)

  24. #24
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Dein display:block ist im FE noch nicht angekommen. Du musst das mit den DevTools des Browsers untersuchen, z.B. im Firefox mit F12.

    Tipp: Binde deine CSS-Dateien einzeln ein, wenn du Debuggst, oder siehst du sie einzeln, weil du eingeloggt bist? Ich sehe da nur eine einzige CSS-Datei, das macht die Analyse nicht einfacher . Man weiß nicht, wer das CSS reinbringt. mobile_menu bringt glaube ich eine Basis-CSS-Datei rein, welche man dann mit ner eigenen Datei überschreiben kann.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  25. #25
    Contao-Nutzer
    Registriert seit
    07.09.2013.
    Beiträge
    84

    Standard

    die Aktualisierungs Kiste wieder.
    Ich sehe die CSS einzeln. Meine mich aber erinnern zu können, das ich einen Haken gesetzt habe für zusammen fügen im Script.

    Auf dem Handy wirkt sich das dann im Chrome auch so aus, obwohl man öfter auf Aktualisieren geht ?

  26. #26
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das ist mir jetzt zu kompliziert, zu viel CSS im Spiel. Du solltest die Sache systematisch angehen, mach mal ne Testseite nur mit dem wesentlichen CSS. Sieht so als, als wäre dies ursprünglich OpenSauce gewesen. Evtl. ist da ein MobileMenu schon vorkonfiguriert. .mainnavigation wird von OpenSauce auch bereits formatiert.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  27. #27
    Contao-Nutzer
    Registriert seit
    07.09.2013.
    Beiträge
    84

    Standard

    jetzt ist genau das Passiert, was ich befürchtet habe. Ich habe das dk_mmenu deinstalliert über den pharManager, nun geht die ganze Seite nicht mehr, obwohl ich das Menü gar nicht benutze. Es sollte nur überflüssiges CSS verschwinden. :-(

  28. #28
    Contao-Nutzer
    Registriert seit
    07.09.2013.
    Beiträge
    84

    Standard

    nach einer Pausenzeit....

    ab einer gewissen Bildschirmpixelgrösse wird das Menü angezeigt. Ist es dann im allgemeinen zu groß ? Wie komme ich dadrauf ?

    Auf einem 7er und 10 Zoll Tablet kann man beide Menüs wählen, sollte hier durch das @media only screen and (max-width: 991px das nicht verhindert werden ?!
    Auf Hochauflösendem Handy geht diese Navi Horizontal gehalten, Senkrecht kommt nur ein schwarzer Bildschirm. Also, funktionieren tut es eigentlich,aber ist die Navi dann zu groß?

    zusätzliche Installation ist leider nicht möglich :-(

    Danke für Eure Mühen.

    LG
    Chriss
    Geändert von chriss136 (30.08.2018 um 18:23 Uhr)

  29. #29
    Contao-Nutzer
    Registriert seit
    26.08.2018.
    Beiträge
    110

    Standard

    Zitat Zitat von jscholtysik Beitrag anzeigen
    Deswegen habe ich noch etwas detaillierter dokumentiert und auch mehr Screenshots hinterlegt.
    Das hast du auch super gemacht (genauso super sind natürlich auch mal wieder die Hinweise von Andreas und planepix). Spannend wäre noch die Frage, an welcher Stelle man im css solche angle-down(s) (z.b. FontAwesome) für level 1 aus dem Beispiel-Screenshot wie integriert. Dafür bin ich dann auch zu doof..
    Hat jemand 'nen Tipp?

    Bildschirmfoto 2019-07-18 um 12.01.20.png
    Geändert von BubbleBass (18.07.2019 um 12:34 Uhr)
    Talentfrei aber hartnäckig

  30. #30
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Sowas wird mit CSS Pseudoelementen wie ::before und/oder ::after gemacht. Kannst du dir vielleicht hier abschauen https://kunsttour-neu-ulm.de/

    Mit den Devtools kannst du dir das CSS ansehen. Klappe die <a>s in der HTML-Ansicht auf und markiere das Pseudoelement ::after. Rechts siehst du dann das CSS usw....

    Die Originalseite von dem Screenshot ist übrigens hier https://www.didenta.de/de/. Aber da wurde einiges aufgemotzt am Menü. Wäre mir zu kompliziert mit dem extra <i> für den Pfeil. Ist nicht nötig.
    Geändert von Andreas (19.07.2019 um 01:03 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  31. #31
    Contao-Nutzer
    Registriert seit
    26.08.2018.
    Beiträge
    110

    Standard

    Super - vielen Dank!!

    Bezogen auf jscholtysiks Beispiel würde das dann ergeben:

    Code:
    .mod_navigation .submenu_show > a::after,
    .mod_navigation .submenu_show > strong::after {
        transform: rotate(90deg);
    }
    .mod_navigation .submenu > a::after,
    .mod_navigation .submenu > strong::after {
        right:1em;
        position:absolute;
        content: '>';
    }
    Es funktioniert soweit...das Problem ist nur, dass sich beim Scrollen die Pfeile mit verschieben (s. 2) :

    1.png
    2.png

    Was hab' ich da vergessen? Ich komm' nicht drauf...
    Geändert von BubbleBass (19.07.2019 um 16:19 Uhr)
    Talentfrei aber hartnäckig

  32. #32
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Sowas kann man nur direkt auf der Seite mit den Devtools untersuchen.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  33. #33
    Contao-Nutzer Avatar von sgei
    Registriert seit
    12.12.2011.
    Beiträge
    99

    Frage mobile_menu - Submenus mit Animation öffnen

    Hallo,

    ich habe in meinem aktuellen Projekt das mobile_menu eingebunden. Es funktioniert soweit auch alles super. Ich habe das Menu auch so gestyled, dass es in der Desktopansicht als "großes" horizontales DropDown geht.
    Was mir nicht gelingen will ist, dass die Listen ab level_2 animiert geöffnet werden. Also jetzt klicke ich auf einen Link in der ersten Ebene (level_1) und das Submenu (level_2) wird einfach eingeblendet. Ich möchte da gern eine Animation (Fade in). Ist das möglich?

    Hier ein animiertes GIF vom Projekt: 2019-11-13_14h28_43.gif

    Danke.

    Steffen

  34. #34
    Contao-Fan Avatar von fusch
    Registriert seit
    25.03.2012.
    Ort
    München
    Beiträge
    498
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo Steffen,

    schau mal hier, das hilft Dir dafür evtl. weiter:
    https://developer.mozilla.org/de/doc...ationen_nutzen

    Viele Grüße
    Hella
    Mitglied des Contao User Treffen München
    Aktuelle Termine erfährst Du immer unter www.contao-bayern.de
    Komm' doch mal vorbei!

  35. #35
    Contao-Nutzer
    Registriert seit
    13.03.2010.
    Beiträge
    227

    Standard

    Hallo zusammen,

    ich möchte den Thread nochmal aufgreifen. Ich versuche auch gerade, das mobile_menu für Desktop anzuwenden.

    Da ich das CSS meiner alten Hover-Navigation übernehmen wollte, habe ich zwei Module erstellt, #mobile (für mobil, funktioniert) und #mobile2 (für Desktop, funktioniert nicht). Ich habe dasselbe Problem wie Doro, das Untermenü schließt sich nicht nach Klick.

    Die Erklärungen von Andreas verstehe ich offenbar nicht richtig, denn ich dachte, nach einem Klick auf einen Menü-Link schließt sich das Menü wie bei der Mobil-Variante. Aber ich habe nach Klick immer
    HTML-Code:
    .mobile_menu li.submenu_show > ul {display: block;}
    auf dem nachfolgenden ul, sodass alle uls stehen bleiben. Gerade weil wir nur das CSS verändern, müssten sich die uls doch schließen...?

    Es kann sein, dass es (hoffentlich) einen Fehler in meinem CSS gibt, weil es schon ziemlich alt ist und ich es mal entrümpeln sollte.

    Hier ein Link zur Seite: Link gelöscht

    Ich würde mich freuen, wenn da jemand Licht hinein bringen könnte.

    Marion
    Geändert von thymian (10.11.2021 um 21:28 Uhr)

  36. #36
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ok, ich habe nochmal ein wenig ausprobiert. Also:
    Zitat Zitat von thymian Beitrag anzeigen
    ...das Untermenü schließt sich nicht nach Klick.
    ...ich dachte, nach einem Klick auf einen Menü-Link schließt sich das Menü wie bei der Mobil-Variante.,,,
    Meinst du mit 'schließt sich das Menü' wirklich das ganze Menü? Oder nur die Sublevel (Untermenü)? Wenn du willst, dass sich das ganze Menü schließt, dann benötigst du kein spezielles CSS für die Desktop Variante. Dann hast du ja einen Hamburger, mit dem du das Menü öffnest und wenn du auf die neue Seite kommst ist das Menü default ja geschlossen und nur der Hamburger zu sehen.

    Wenn du von den Subleveln sprichst, dann benötigst du noch eine kleine JS-Funktion. Diese Funktion muss beim Laden der Seite (und vorzugsweise auch dann, wenn man irgendwo auf die Seite klickt außer dem Menü) CSS-Klassen im 1. Level austauschen.
    PHP-Code:
    // JS
    handleSublevel = function() {
      $(
    '.mobile_menu .level_1 > li').removeClass('submenu_show').addClass('submenu_hide');

    Auch in der Mobile-Variante schließen sich die aktuellen (trail) Sublevel nicht. Das ist in kurz das, was ich oben erklärt habe. Die aktuellen Untermenüs in der normalen Mobile Navigation schließen sich nicht - es schließt sich das ganze Menü.

    Ich hatte den Punkt oben nicht ausgearbeitet, weil ich damals den aktuellen Trail sehen wollte. Ich hatte das mit CSS dann in einer Reihe darunter angeordnet, so wie eine zweite Subnavigation, welche die vorhandenen Seiten im aktuellen Baum sofort zeigt. Ich hatte dann später auch mal ein Projekt, wo der Kunde das erst nach Klick sehen wollte und hatte da dieses JavaScript zusätzlich aufgesetzt.

    ps In meinem Mobile Menu Modul hatte ich jetzt bei diesen Tests einzig und alleine die Checkbox Menü an der Position behalten aktiviert. Beim Individueller Breakpoint (px) kann man sowas wie 10000 eintragen. Übrigens haben die Optionen Auf Smartphones anzeigen und Auf Tablets anzeigen keine Funktion, wenn man einen Breakpoint einträgt. Smartphone und Tablet gleichzeitig zu aktivieren macht auch keinen Sinn. Dahinter stecken zwei vorgefertigte Breakpoints, ein kleinerer und ein etwas größerer.
    Geändert von Andreas (10.11.2021 um 18:38 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  37. #37
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von sgei Beitrag anzeigen
    ...Was mir nicht gelingen will ist, dass die Listen ab level_2 animiert geöffnet werden...
    Nur um das für alle festzuhalten und klarzustellen, die mitlesen. Der Punkt Animation aktivieren im Module bezieht sich nur auf das Hereinsliden der Navigation, nicht auf das Öffnen von Unterpunkten im Menü.

    Aufklappen der Unterpunkte zu animieren ist nicht so einfach, weil hier mit display:block|none gearbeitet wird. Das kann man nicht animieren. Da müsste man zuerst einmal das display:none von submenu_hide auf block stellen. Wenn man es auf none belässt, kann man auf dieses Element selbst ein Opacity nicht animieren, mal als Beispiel.

    Hier mal ein Ansatz, wie man etwas animieren könnte. Gibt aber sicherlich noch andere Tricks. Man könnte auch versuchen die slide() oder fade() Funktion von jQuery auf das Element anzuwenden, sobald sich das submenu öffnet.
    PHP-Code:
    // CSS

    /* all */
    .mobile_menu li.submenu_hide ul,
    .
    mobile_menu li.submenu_show ul {
        
    displayblock;
        
    transitionall .25s ease 0s;
    }
    .
    mobile_menu .submenu li {
        
    transitionall .25s ease 0s;
    }
    /* hide */
    .mobile_menu li.submenu_hide ul {
        
    opacity0;
        
    transformscaleY(0);
        
    height0;
    }
    .
    mobile_menu .submenu_hide ul li {
        
    opacity0;
        
    transformscaleY(0);
        
    height0;
    }
    /* show */
    .mobile_menu li.submenu_show ul {
        
    opacity1;
        
    transformscaleY(1);
    }
    .
    mobile_menu .submenu_show ul li {
        
    opacity1;
        
    transformscaleY(1);

    Ich weiß, das ich die Klassen oben zusammenfügen kann, ist Absicht. Einfacher beim Experimentieren mit unterschiedlichen Werten .
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  38. #38
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hier noch meine Standardeinträge für Trigger Inhalt und Menu Inhalt zum Abspeichern:
    PHP-Code:
    // Trigger:
    <div class="mobile_menu_button" title="{{ifnlng::de}}Open menu{{ifnlng}}{{iflng::de}}Menü öffnen{{iflng}}">
      {{
    ifnlng::de}}Menu{{ifnlng}}{{iflng::de}}Menü{{iflng}}
    </
    div>

    //Menu:
    <div data-mobile-menu="close" class="mm-close mobile_menu_button" title="{{ifnlng::de}}Close menu{{ifnlng}}{{iflng::de}}Menü schließen{{iflng}}">
      {{
    ifnlng::de}}Close menu{{ifnlng}}{{iflng::de}}Menü schließen{{iflng}}
    </
    div>

    <
    div class="mod_article block mm-top mm-article">
      {{
    insert_article::_mobile-menu-top}}
    </
    div>

    {{
    insert_module::1}} <!-- id of navigation module -->

    <
    div class="mod_article block mm-bottom mm-article">
    {{
    insert_article::_mobile-menu-bottom}}
    </
    div
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  39. #39
    Contao-Nutzer
    Registriert seit
    13.03.2010.
    Beiträge
    227

    Standard

    Vielen Dank für die nochmalige Erklärung, Andreas! Jetzt hat's endlich geschnackelt. Ja, das hatte ich auch registriert, dass der Hamburger weg ist und stattdessen die erste Menü-Ebene da steht, aber irgendwie habe ich den Bogen nicht gekriegt.

    Ist das sehr kompliziert, was da an JS für die zweite Variante noch geschrieben werden müsste? Wäre da auch ein kleiner Auftrag möglich? Ich denke gerade daran, dass man dann ein barrierearmes Menü ohne Hover hätte (habe dazu auch einen anderen älteren Thread wieder aufgegriffen, bin aber noch nicht weitergekommen).

    Manchmal ärgert es mich schon, dass ich damals meinen JS-Kurs nicht weiterverfolgt habe ;-).

    Edit: Hier der Link zum anderen Thread: https://community.contao.org/de/show...080#post551080, da hatte ich ein Script auf kulturbanause.de gefunden, was bei nur einem Sublevel gut funktioniert. Das wäre im Grunde auch eine Lösung, da ist dann halt das Untermenü der dritten Ebene mit ausgeklappt, aber die zweite und dritte Ebene verschwinden, wenn ins Menü geklickt wurde.
    Geändert von thymian (10.11.2021 um 21:48 Uhr)

  40. #40
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von thymian Beitrag anzeigen
    Ich denke gerade daran, dass man dann ein barrierearmes Menü ohne Hover hätte.
    Denke daran, dass dann jede Seite, welche Unterseiten hat, eine Weiterleitung auf die 1. Unterseite sein muss, also selbst keinen Inhalt hat, weil man diese Seite selbst dann nicht mehr aufrufen kann. (Näheres dazu gleich) Weiterleitungsziel braucht man dabei nicht einzustellen.

    Näheres: Bootstrap bietet nur noch Menüs an, wobei eine Seite mit Unterseiten selber keinen Inhalt mehr hat, also nur zum Öffnen des Untermenüs dient. mobile_menu arbeitet damit, dass der 1. Klick das Untermenü öffnet und der 2. Klick auf den selben Link dann die Seite aufruft. Das finde ich eigentlich nicht so optimal. dk_mmenu arbeitet mit zwei klicksensitiven Flächen pro Menüpunkt, eine öffnet das Untermenü, die andere ruft die Seite auf.

    Zitat Zitat von thymian Beitrag anzeigen
    Manchmal ärgert es mich schon, dass ich damals meinen JS-Kurs nicht weiterverfolgt habe ;-).
    Man kann darin besser werden, wenn man zwischendurch mal Spielereien direkt in der Konsole des Browsers macht (Firefox Taste F12). Z.B. das hier eingeben und auf Ausführen klicken. Kannst du direkt hier im Forum machen:
    PHP-Code:
    // JS jQuery

    // folgender Code benutzt jQuery, jQuery muss auf dieser Seite also bereits geladen sein
    console.clear();

    var 
    allHrefs = $('[href]');

    console.log(allHrefsallHrefs.length);

    allHrefs.each(function(abc) {
      
    //console.log(a, b, c); 
      
    = $(b);
      
    console.log(b.attr('href'));
    }) 
    Zitat Zitat von thymian Beitrag anzeigen
    da hatte ich ein Script auf kulturbanause.de gefunden, was bei nur einem Sublevel gut funktioniert. ... aber die zweite und dritte Ebene verschwinden, wenn ins Menü geklickt wurde.
    Die verschwinden nicht sondern die neue Seite wird geladen und der erste Zustand ist halt der, dass die Untermenüs versteckt sind.

    Das Script sieht gut aus. Eine Templateänderung brauchst du da nicht, musst nur die Selektoren im Script ändern. .menu-item-has-children ist bei Contao z.B. .submenu und $('.site-nav > ul > li > .sub-menu') wäre $('#myNav .submenu > ul')
    Geändert von Andreas (11.11.2021 um 13:12 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

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
  •