Contao-Camp 2024
Ergebnis 1 bis 5 von 5

Thema: mod_navigation vs. mmenue

  1. #1
    Contao-Nutzer Avatar von Jorge-C
    Registriert seit
    06.06.2012.
    Ort
    Berlin
    Beiträge
    58

    Standard mod_navigation vs. mmenue

    Hi Leute...
    Mein Problem: Habe zum ersten mal eine horizontale Navi im Kopfbereich und gleichzeitig aber auch eine mobile Navi vom mmenu
    Das Problem stellt sich beim ausblenden bei den breakpoints da beide die gleichen #container li ul klassen verwende.
    In meinen Vorgänger-Templates hatte ich die Navi immer links und konnte den Container ausblenden.
    Nun da steh ich jetzt mit zwei Navis...


    Für eine Anregung wie das Problem zu lösen sei...wäre ich schon mal dankbar!!!


    HTML-Code:
    /* hier die mobile Navigation*/
    
    <nav class="mod_mmenu offcanvas" id="offcanvas" itemscope itemtype="http://schema.org/SiteNavigationElement">
    <ul class="level_1">
    <li class="active first"><span class="active first" itemprop="name">Home</span></li>
     <li class="sibling"><a href="seite-1.html" title="Seite1" class="sibling" itemprop="url"><span itemprop="name">Seite 1</span></a></li>
    <li class="submenu sibling"><a href="seite-2.html" title="Seite 2" class="submenu sibling" aria-haspopup="true" itemprop="url"><span itemprop="name">Seite 2</span></a>
    <ul class="level_2">
    <li class="first"><a href="seite-2/seite-2-1.html" title="Seite 2-1" class="first" itemprop="url"><span itemprop="name">Seite 2-1</span></a></li>
    <li class="last"><a href="seite-2/seite-2-2.html" title="Seite 2-2" class="last" itemprop="url"><span itemprop="name">Seite 2-2</span></a></li>
    </ul>
    </li>
     <li class="sibling last"><a href="seite-3.html" title="Seite 3" class="sibling last" itemprop="url"><span itemprop="name">Seite 3</span></a></li>
    </ul>
    </nav>
    <!-- indexer::continue -->
    
    <div id="navigation"><div style="padding:5px;margin-top:5px;"><a href="#offcanvas">Menu</a></div></div>            </div>
     </header>
                  
     <div id="container">
    <main id="main">
     <div class="inside">
                    
    <!-- hier die Hauptnavigation -->
    <nav class="mod_navigation block" itemscope itemtype="http://schema.org/SiteNavigationElement">
    <a href="home.html#skipNavigation3" class="invisible">Navigation überspringen</a>
    <ul class="level_1">
    Geändert von Jorge-C (11.07.2020 um 07:44 Uhr)

  2. #2
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.704
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich verstehe glaube ich das Problem nicht.
    Du kannst doch die beiden Menüs vollkommen unabhängig über ihre Klassen (mod_mmenu und mod_navigation) ansprechen und je nach Viewportgröße entweder die eine oder die andere ausblenden.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  3. #3
    Contao-Nutzer Avatar von Jorge-C
    Registriert seit
    06.06.2012.
    Ort
    Berlin
    Beiträge
    58

    Standard breakpoints

    Zitat Zitat von mlweb Beitrag anzeigen
    Ich verstehe glaube ich das Problem nicht.
    Du kannst doch die beiden Menüs vollkommen unabhängig über ihre Klassen (mod_mmenu und mod_navigation) ansprechen und je nach Viewportgröße entweder die eine oder die andere ausblenden.
    meine mediaqueries
    HTML-Code:
    /* mobil ausblenden*/
    @media(min-width:990px) and (max-width:6000px){
    #navigation, .mod_mmenu.offcanvas{
    display:none;
    }
    }
    
    /* mobil einblenden*/
    @media(min-width:320px) and (max-width:980px){
    #navigation, .mod_mmenu.offcanvas, .level_1{
    display:block;
    }
    }
    
    
    /* hauptnavi ausblenden*/
    @media(max-width:979px){
    .mod_navigation.block .level_1{
    display:none !important;
    }
    }
    
    /* hauptnavi einblenden*/
    @media(min-width:980px) and (max-width:3000px){
    .mod_navigation.block .level_1{
    display:block !important;
    }
    }
    Geändert von Jorge-C (11.07.2020 um 17:50 Uhr)

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

    Support Contao

    Standard

    Hallo,

    Tipp meinerseits ... schau dich mal im Netz um und eruiere verwendete Bildschirmgrössen und die in diversen Frameworks verwendeten breakpoints in media queries.
    min und max dann in deinem CSS entsprechend verwenden.

    Was passiert in deinem CSS zwischen 981px und 999px? Oder bei genau 1000px?
    Grüsse
    Bernhard


  5. #5
    Contao-Nutzer Avatar von Jorge-C
    Registriert seit
    06.06.2012.
    Ort
    Berlin
    Beiträge
    58

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    Hallo,

    Tipp meinerseits ... schau dich mal im Netz um und eruiere verwendete Bildschirmgrössen und die in diversen Frameworks verwendeten breakpoints in media queries.
    min und max dann in deinem CSS entsprechend verwenden.

    Was passiert in deinem CSS zwischen 981px und 999px? Oder bei genau 1000px?
    Danke für den Tip, habs nochmal angepasst. Bei 1000px war nichts zu sehen.

Aktive Benutzer

Aktive Benutzer

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

Lesezeichen

Lesezeichen

Berechtigungen

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