Mit Hamburger-Menü die Navigation ein- und ausblenden

[Thomasge]

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.

<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">

#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

[stefan.sl]

Warum nicht mit Javascript?

<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 ...

[Thomasge]

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

[BennyBorn]

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:

input#hamburg:checked ~ nav {
    display: block;
}

Für eine Navi braucht es heutzutage eigentlich kein JavaScript mehr

[Thomasge]

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?

[mlweb]

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.

[Thomasge]

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.

<div class="hamburger">
.
.
.
</div>

<nav class="mobile">
.
.
.
</nav>

[mlweb]

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.

[Thomasge]

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.

(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

[Thomasge]

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

[mlweb]

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.

[Thomasge]

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.

<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>

#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.

(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

[Franko]

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

<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