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