Ergebnis 1 bis 13 von 13

Thema: Mit Hamburger-Menü die Navigation ein- und ausblenden

  1. #1
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    427

    Standard Mit Hamburger-Menü die Navigation ein- und ausblenden

    Hallo zusammen,

    ich habe ein Hamburger-Menü erstellt was soweit funktioniert, dass per Klick sich die 3 Balken in ein X verwandeln und auch zurück.
    Nur habe ich es bisher noch nicht geschafft wenn die 3 Balken sichbar sind die Navigation ausgeblendet ist und bei sichtbarem X die Navigation eingeblendet ist.
    Wenn ich hingegen 2 zusätzliche Div's einfüge und jedem ein eigenes Icon zuweise kann ich mit dem entsprechenden CSS die Navigation ein- und ausblenden duch die Aktivierung und Deaktivierung des jeweiligen Div's.
    Kann mir bitte jemand weiterhelfen, damit ich die Navigation mit dem Hamburger-Menü ein- und ausblenden kann? Oder gibt es vielleicht einer gute Anleitung in der dies erklärt wird.

    HTML-Code:
    <div class="main-menuicon">
        <input type="checkbox" id="hamburg">
        <label for="hamburg" class="hamburg">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </label>
    </div>
    
    <nav class="mod_navigation main-mobile block">
    Code:
    #header .main-menuicon {
        height:44px;
        width:81px;
    }
    
    .main-menuicon label.hamburg {
        display:block;
        width:81px;
        height:44px; 
        position:relative; 
        margin-left:auto; 
        margin-right:auto;
        cursor:pointer;
    }
    
    .main-menuicon input#hamburg {
        display:none;
    }
    
    .main-menuicon .line {
        position:absolute; 
        left:28px;
        height:4px;
        width:25px;
        background:#f1f1f1;
        border-radius:2px;
        display:block; 
        transition:0.5s; 
        transform-origin:center;
    }
    
    .main-menuicon .line:nth-child(1) {
        top:13px;
    }
    
    .main-menuicon .line:nth-child(2) {
        top:21px;
    }
    
    .main-menuicon .line:nth-child(3) {
        top:29px;
    }
    
    .main-menuicon #hamburg .main-mobile {
        max-height:0;
    }
    
    .main-menuicon #hamburg:checked + .hamburg .line:nth-child(1) {
        transform:translateY(8px) rotate(-45deg);
    }
    
    .main-menuicon #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity:0;
    }
    
    .main-menuicon #hamburg:checked + .hamburg .line:nth-child(3) {
        transform:translateY(-8px) rotate(45deg);
    }
    Danke!


    Gruß, Thomas

  2. #2
    Contao-Fan Avatar von stefan.sl
    Registriert seit
    19.06.2009.
    Ort
    Iserlohn
    Beiträge
    351
    Partner-ID
    1371

    Standard

    Warum nicht mit Javascript?
    HTML-Code:
    <script>
    (function () {
      "use strict";
    
      /* Mobile Nav */
      const body = document.body,
        hamburger = document.getElementById("hamburger"), // ID deines Hamburgers anpassen
        mainnavi = document.getElementById("mainnavi"); // ID deines Mainmenue
    
      /* Mobile trigger / Hamburger */
      const openMobileMenu = function (ev) {
        ev.preventDefault();
        this.classList.toggle("is-active");
        mainnavi.classList.toggle("is-active");
        body.classList.toggle("mobile-nav-open");
      };
    
      hamburger.addEventListener("click", openMobileMenu);
    })();
    </script>
    Der Rest ist CSS ...

  3. #3
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    427

    Standard

    Danke für das Script, aber leider funktioniert es bei mir nicht.
    Muss ich außer den beiden IDs noch was abändern damit es läuft?

    Gruß
    Thomas

  4. #4
    Contao-Nutzer Avatar von BennyBorn
    Registriert seit
    10.06.2011.
    Ort
    Edenkoben
    Beiträge
    67
    Partner-ID
    6916

    Standard

    Zitat Zitat von Thomasge Beitrag anzeigen
    Nur habe ich es bisher noch nicht geschafft wenn die 3 Balken sichbar sind die Navigation ausgeblendet ist und bei sichtbarem X die Navigation eingeblendet ist.
    Ganz einfacher Fehler. Deine Checkbox muss außerhalb liegen. Entweder auf der gleichen Ebene wie Deine Navigation oder aber höher. Auf gleicher Ebene kannst Du dann sowas machen wie:

    Code:
    input#hamburg:checked ~ nav {
        display: block;
    }
    Für eine Navi braucht es heutzutage eigentlich kein JavaScript mehr

  5. #5
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    427

    Standard

    Danke für die Info.
    Die Checkbox und die Navigation liegen doch auf gleicher Höhe in der Struktur, siehe meinen 1. Post.

    Ich hatte versucht es ohne JavaScript umzusetzen, aber nicht geschafft die Navigation beim Seitenaufruf einzuklappen. Erst wenn das Hamburger-Menü via Checkbox aktiviert wird soll die Navigation ausgeklappt sein. Ich habe dazu schon viele Recherchen angestellt, aber nichts gefunden was bisher funktioniert hat.
    Gibt es eine Seite wo man diese Informationen entnehmen könnte?

  6. #6
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    5.151
    Partner-ID
    7421

    Standard

    Ich hatte Dir genau zu diesem Thema schon mal in einem anderen Thread Material verlinkt. Ich hatte Dir auch aufgeschrieben, was die zielführenden Suchbegriffe bei Google sind. Mit den Suchbegriffen
    responsive Navigation Check-Box-Hack
    oder auch
    responsive Navigation checkbox
    gibt es unzählige gute deutsche und englische Treffer mit zum Teil sehr detaillierten Tutorials.
    Alternativ kann man fertige Erweiterungen für die mobile Navigation verwenden.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen



  7. #7
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    427

    Standard

    Richtig, das mit dem Checkbox-Hack habe ich auch anhand der Beispiele soweit hinbekommen. Nun hakt es aber am Hamburger-Menü wie man damit die parallel angeordnete Navigation ein- und ausblenden kann mittels "checked", denn mit z.B. "input#hamburg:checked ~ nav" klappt es nicht. Alle Div's usw. innerhalb einer Struktur bekomme ich aus- und geblendet, nicht aber in der parallelen Struktur.

    Code:
    <div class="hamburger">
    .
    .
    .
    </div>
    
    <nav class="mobile">
    .
    .
    .
    </nav>

  8. #8
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    5.151
    Partner-ID
    7421

    Standard

    Nun ja. Das ist ja nicht grundsätzlich etwas anderes. Es werden explizit auch Tutorials genau dafür angezeigt, wenn man sich die Mühe macht in Google die Suchergebnisse von oben genannter Suche mal durchzuschauen:
    https://www.on-design.de/tutor/html5...nue/index.html
    https://codepen.io/nayemkh/pen/JVNxxz
    https://www.mediaevent.de/tutorial/c...sive-menu.html bzw. vondort dan weiterverlinkt auf https://www.mediaevent.de/tutorial/css-transform.html
    ...
    Schlussendlich kann man auch von der im anderen Thread verlinkten Beispielseite abkupfern.

    Funktioniert bei mir nicht ist auch immer eine schlechte Aussage. Wenn man die Seite mit dem gesamten CSS und ggf. Javascript nicht sieht, kann man auch nicht beurteilen, wo ggf. der Fehler ist.

    Aber jetzt bitte nicht wieder die Seite mit https: hier verlinken, die eine Warnmeldung ausgibt.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen



  9. #9
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    427

    Standard

    Genau nach den beiden letzten beiden Links hatte ich das Hamburger-Menü zuerst aufgebaut. Es hat auch soweit funktioniert einschließlich dem Ausblenden der Navigation. Nur das Einblenden der Navigation hat dann nicht mehr geklappt.
    Wenn ich testweise bei "#hamburg:checked + .hamburg" einen Rahmen definiere dann wird er bei "checked" mit einem Klick auf das Icon auch eingeblendet und nach einem weiterem Klick wieder ausgeblendet.
    Wenn ich mit "#hamburg:checked + .hamburg + nav.main-mobile" die Navigation wieder einblenden möchte dann passiert nichts, lediglich der zuvor definierte Rahmen wird eingeblendet. Laut der Anleitung sollte ein einfaches "max-heigh" zum Einblenden der Navigation ausreichen, was es aber nicht tut.

    Code:
    (Navigation wird ausgeblendet)
    nav.main-mobile {
    height: auto
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s;
    }
    
    (Rahmen wird bei Klick eingeblendet)
    #hamburg:checked + .hamburg {
    border:1px solid red;
    }
    
    (Navigation wird nicht eingeblendet)
    #hamburg:checked + .hamburg + nav.main-mobile {
    max-height:300px;
    }
    An was könnte es jetzt liegen warum die Navigation nicht eingeblendet wird? Meine Recherchen dazu haben bislang nichts ergeben um dem Problem entgegenzuwirken können. Welche Maßnahme muss durchgeführt werden, damit die Navigation eingeblendet wird?


    Gruß
    Thomas

  10. #10
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    427

    Standard

    Ich habe nun noch etliche weitere Versuche durchgeführt, aber kein einiger führte zum gewünschten Erfolg damit die Navigation eingeblendet wird.
    Folgende Klassen und ID's sind von mir vergeben worden: Hamburger-Menü (class="main-menuicon"), Input (type="checkbox" id="hamburg"), Label (class="hamburg") und die Navigation mit (class="main-mobile").
    Mit dem CSS Selektor (nav.main-mobile) kann ich die Navigation ansprechen und stylen in diesem Fall verstecken.
    Mit dem CSS Selektor (#hamburg:checked + .hamburg) kann ich das Hamburger-Menü nach einem Klick ansprechen und stylen.
    Mit dem CSS Selektor (#hamburg:checked + .hamburg + nav.main-mobile) kann ich die Navigation nicht ansprechen und somit auch nicht sichtbar machen.
    Was könnte hier mein Fehler sein, weil ich mit dem genannten Selektor die Navigation nicht per CSS erreiche.

    Kann mir bitte jemand einen Tipp geben warum mein CSS-Code nicht auf die Navigation greift? Muss ich dazu noch etwas zusätzlich tun damit die Navigation über diesen CSS-Selektor erreicht wird. Auf verschieden anderen Webseiten wird der Selektor genau so verwendet damit die Navigation eingeblendet wird. Gibt es dafür vielleicht einen Grund für dieses Verhalten und wie könnte ich es beheben.


    Gruß
    Thomas
    Geändert von Thomasge (06.06.2021 um 15:22 Uhr)

  11. #11
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    5.151
    Partner-ID
    7421

    Standard

    Zitat Zitat von Thomasge Beitrag anzeigen
    Kann mir bitte jemand einen Tipp geben warum mein CSS-Code nicht auf die Navigation greift?
    Wie bitte soll Dir dazu jemand einen Tip geben?
    Wir kennen das dazugehörige HTML nicht. Wir kennen nicht das gesamte CSS (Stichwort: Spezifität). Wir wissen nicht ob Du derzeit noch js im Einsatz hast oder nicht.

    Ich würde das dann schon eingebaut in Deiner Seite sehen wollen um ggf. einen Fehler analysieren zu können.

    Ganz grundsätzlich: Wenn ich Probleme dieser Art habe, versuche ich mir ein vereinfachtes Testcase (ohne Contao) aufzusetzen. Funktioniert dort alles wie erwartet, gibt es Wechselwirkungen/Fehler irgendwelcher Art die ich mir gern auch selbst durch fehlerhafte Templateanpassungen, falsches HTML (falsche Reihenfolge, falsche Hierrarchieebene ...), Schreibfehler im CSS oder falsche Spezifität ... eingehandelt habe.
    Geändert von mlweb (06.06.2021 um 16:02 Uhr)
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen



  12. #12
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    427

    Standard

    Ich habe jetzt erstmals die Navigation soweit fertiggestellt, aber mein bisheriges Problem ist geblieben. Mit dem Hamburger-Menü kann ich die Navigation nicht einblenden, irgendwo muss da der Wurm bei mir drin sein.
    Nachfolgend mein HTML- und CSS-Code dafür.

    HTML-Code:
    <div class="main-menuicon">
        <input type="checkbox" id="hamburg">
        <label for="hamburg" class="hamburg">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </label>
    </div>
    Code:
    #header .main-menuicon {
        height:44px;
        width:81px;	
    }
     
    .main-menuicon label.hamburg {
        display:block;
        width:81px;
        height:44px; 
        position:relative; 
        margin-left:auto; 
        margin-right:auto;
        cursor:pointer;
    }
    
    .main-menuicon .line {
        position:absolute; 
        left:28px;
        height:3px;
        width:25px;
        background:#f1f1f1;
        border-radius:2px;
        display:block; 
        transition:0.5s; 
        transform-origin:center;
    }
    
    .main-menuicon .line:nth-child(1) {
        top:14px;
    }
    
    .main-menuicon .line:nth-child(2) {
        top:21px;
    }
    
    .main-menuicon .line:nth-child(3) {
        top:28px;
    }
    
    .main-menuicon #hamburg:checked + .hamburg .line:nth-child(1) {
        transform:translateY(7px) rotate(-45deg);
        height:4px;
    }
    
    .main-menuicon #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity:0;
    }
    
    .main-menuicon #hamburg:checked + .hamburg .line:nth-child(3) {
        transform:translateY(-7px) rotate(45deg);
        height:4px;
    }
    
    .main-menuicon input#hamburg {
        display:none;
    }
    
    #header nav.main-mobile {
        display:none;
    }
    
    .main-menuicon #hamburg:checked + #header nav.main-mobile {
        display:block;
    }
    Nachdem das Einblenden der Navigation über das Hamburger-Menü nicht funktioniert hat, habe ich noch nachfolgende Versuche durchgeführt.

    Code:
    (Border wird angezeigt)
    .main-menuicon #hamburg:checked + label.hamburg {
        border:1p solid red;
    }
    
    (Border wird nicht angezeigt)
    .main-menuicon #hamburg:checked + #header nav.main-mobile {
        border:1p solid red;
    }
    Auch mit "max-height:0;" und "max-height:auto;" und weitere Angaben hatte ich durchgeführt, die alle nicht zum gewünschten Erfolg führten. Wenn ich richtig liege bedeutet das, dass die Navigation nicht über die Checkbox angesprochen werden kann.
    Hat jemand eine Idee woran es liegen könnte, damit die Navigation über das Hamburger-Menü eingeblendet wird?

    Die Webseite ist unter https://sub.musikverein-hirschzell.de/ zu finden. Bei einer Seitenbreite von 767px und weniger wird das Hamurger-Menü angezeigt.
    Danke!


    Gruß
    Thomas
    Geändert von Thomasge (13.06.2021 um 18:10 Uhr)

  13. #13
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.255
    Partner-ID
    6122

    Standard

    Ich verstehe nicht warum es über ein checkbox dargestellt werden muß.
    Ein einfaches Hamburger Symbol mit Animation (hover) könnte so aussehen:

    HTML-Code:
    <style>
    .symbol {
      margin: 1em;
      width: 40px;
    }
    .symbol::before, .symbol::after, .symbol div {
      background-color: #000;
      border-radius: 3px;
      content: '';
      display: block;
      height: 5px;
      margin: 7px 0;	
      transition: all .2s ease-in-out;	
    }
    .symbol:hover::before { transform: translateY(12px) rotate(135deg); }
    .symbol:hover::after  { transform: translateY(-12px) rotate(-135deg); }
    .symbol:hover div     { transform: scale(0); }
    </style>
    
    <div class="symbol"><div></div></div>
    Beispiele zum Ein/Ausblenden wurden hier ja bereits erwähnt
    Carpe diem ...

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
  •