Artikel-Hilfsmenü
Samstag, 2. März 2019 – aktualisiert am Mittwoch, 11. Mai 2022
Webdesign · RWD · CSS · JavaScript
Ein animierter Hamburger-Button – ohne Grafiken
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Ohne den Hamburger-Button kommt heute keine Responsive Website mehr aus.
Nein, natürlich ist nicht das Junkfood-Dingens gemeint, sondern
… das Icon mit drei waagerechten, parallel zueinander platzierten Strichen. Es symbolisiert mit seiner Struktur eine Menüliste. Die Bezeichnung entstand, weil das Icon mit den drei Lagen eines Hamburgers assoziiert werden kann.
Zitat: "Hamburger-Menü-Icon". In: Wikipedia.
Im Folgenden zeige ich anhand von Codeschnipseln,
- wie man einen hübsch animierten Button ganz ohne Grafiken erzeugt, und
- wie man damit ein Navigationsmenü auf- und zuklappt.
Der animierte Button
Die folgenden HTML- und CSS-Snippets erzeugen den Hamburger-Button.
HTML
Dieses Codeschnipsel dorthin, wo der Hamburger-Button angezeigt werden soll:<div id="hamburger" >
<button class="c-hamburger c-hamburger--htx" aria-live="polite" >
<span id="buttonname" >Navigation zeigen</span>
</button>
<span id ="menutxt" aria-hidden="true">MENÜ</span>
</div>
CSS
Diese CSS-Anweisungen entweder innerhalb von <style> und </style> im head-Bereich der Datei, oder in eine externe CSS-Datei:/* Der Hamburger-Button: */
#hamburger{position:-webkit-sticky;position:sticky;top:0;z-index:5;left:calc(100% - 45px);width:30px;top:5px;-webkit-tap-highlight-color:transparent;}
#menutxt{font-family:Arial;font-size:10px;display:block;width:30px;text-align:center;margin-top:2px}
#buttonname{font-size:0}.c-hamburger{display:block;position:relative;overflow:hidden;margin:0;padding:0;width:30px;height:28px;border:none;cursor:pointer;transition:background .3s}
.c-hamburger:focus{outline:0}
.c-hamburger span{display:block;position:absolute;top:12px;left:0;right:0;height:6px;background:#555}
.c-hamburger span::after,.c-hamburger span::before{position:absolute;display:block;left:0;width:100%;height:6px;background-color:#555;content:""}
.c-hamburger--htx,.c-hamburger--htx.is-active{background-color:transparent}.c-hamburger span::before{top:-10px}
.c-hamburger span::after{bottom:-10px}.c-hamburger--htx span{transition:background 0s .3s}
.c-hamburger--htx span::after,.c-hamburger--htx span::before{transition-duration:.3s,.3s;transition-delay:.3s,0s}
.c-hamburger--htx span::before{transition-property:top,transform}
.c-hamburger--htx span::after{transition-property:bottom,transform}
.c-hamburger--htx.is-active span{background:0 0}
.c-hamburger--htx.is-active span::before{top:0;transform:rotate(45deg)}
.c-hamburger--htx.is-active span::after{bottom:0;transform:rotate(-45deg)}
.c-hamburger--htx.is-active span::after,.c-hamburger--htx.is-active span::before{transition-delay:0s,.3s}
@media screen and (min-width:550px) {
#navi {display:block}
#hamburger {display:none;}
}
Das Navigationsmenü auf- und zuklappen
Die folgenden HTML-, CSS- und JavaScript-Snippets erzeugen eine Dummy-Navigation, die vom Hamburger-Button geöffnet und geschlossen wird.
HTML
Dieses Codeschnipsel dorthin, wo die Navigation angezeigt werden soll:<div id="navi">
<h2>Navigation</h2>
<p>Hierher kommt das Navigationsmenü. Weil aber diese Demo nur die Funktion des Hamburger-Buttons zeigen soll, gibt es hier auch kein Navigationsmenü</p>
</div>
CSS
Diese CSS-Anweisungen entweder innerhalb von <style> und </style> im head-Bereich der Datei, oder in eine externe CSS-Datei:/* Das Menü */
#navi {
display:none;
background:#ddd;
position:-webkit-sticky;
position:sticky;
top:0;
padding:5px;
}
JavaScript
Dieses Script-Snippet entweder unmittelbar vor das schließenden body-Tag, oder in eine externe JavaScript-Datei:<script>
(function() {
var toggle = document.querySelector(".c-hamburger");
toggleHandler(toggle);
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
if ( this.classList.contains("is-active") === true ) {
$( "#navi" ).slideDown(function(){;
});
document.getElementById("buttonname").textContent="Navigation verbergen";
} else {
$( "#navi" ).slideUp(function(){;
});
document.getElementById("buttonname").textContent="Navigation zeigen";
}
});
}
})();
</script>
Hinweis: Das Script erfordert jQuery. Falls jQuery nicht ohnehin bereits läuft, den folgenden Code in den head-Bereich der Datei:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Das Ergebnis:
Alle obigen Codesnippets zusammengefasst in dieser Demo. Einfach die Demo-Seite abspeichern, oder den Quellcode kopieren. Have fun!
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
8 Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
Claudia Lüthi schrieb am Freitag, 14.06.19 14:21 Uhr:
Vielen Dank für die einfache aber effektive Anleitung, einzig beim Safari-Server funktioniert es nicht so richtig, hast du da auch schon diese Erfahrung gemacht.
Der Button wird nicht angezeigt, dafür Navigation anzeigen aber an der falschen Stelle und ich habe eine Desktop-Navigation, welche ich ab einer gewissen Grösse auf Display "none" gestellt habe und Safari ignoriert das.
Hast Du da ev. einen Tip?
Fritz schrieb am Freitag, 14.06.19 14:32 Uhr:
@Claudia Lüthi
Safari-Browser meinst du vermutlich?
Hier funktioniert die Technik auch mit dem Safari, sowohl auf dem Macbook als auch auf iPhone und iPad. (Jeweils aktuelle Versionen Betriebssystem und Browser)
Claudia Lüthi schrieb am Freitag, 14.06.19 14:38 Uhr:
Nochmals ich, habe nun mal die Einstellungen bei Safari geändert und den Cache gelöscht und jetzt ist gut, sorry für den Durcheinander, ist wirklich bis jetzt die beste und am einfachsten anwendbare hamburger Button Einrichtung;-)
Vielen Dank
Claudia
Benno Dittrich schrieb am Sonntag, 01.03.20 03:41 Uhr:
Endlich eine Beschreibung, mit der ich klarkam. Funktioniert wunderbar - auf dem Desktop ... leider nicht auf dem Android Smartphone (Huawei). Was hab ich falsch gemacht? Kann mir geholfen werden? Wär super!
Danke!
Benno
Michael schrieb am Donnerstag, 19.03.20 09:57 Uhr:
Hallo,
tausend Dank für diese super Erklärung! Ein Problem habe ich noch. Und zwar habe ich ein Logo, das unterhalb des Hamburgers angezeigt wird. Klickt man nun auf den Hamburger, wird das Menu eingeblendet, das Logo wird dementsprechend nach unten verrutscht. Das ist sehr ungünstig. Wie kann ich das Logo ganz ausblenden, wenn sich das Menü offnet, und wieder einblenden, wenn ich den Hamburger schließe?
Vielen Dank!
Michael
Fritz schrieb am Donnerstag, 19.03.20 11:05 Uhr:
@Michael,
das ist ganz einfach. Das JavaScript muss erweitert werden.
Wenn das Menü aufgeklappt ist, also:
if ( this.classList.contains("is-active") === true ) {
wird das Logo mit Javascript ausgeblendet. Also etwas wie
document.getElementById("logo").style.display="none";
Und wenn das Menü geschlossen wird, also innerhalb des
} else {
wird das Logo wieder eingeblendet mit:
document.getElementById("logo").style.display="block";
Michael schrieb am Freitag, 20.03.20 19:38 Uhr:
Ja Wahnsinn, Danke, Fritz!!! :-))))
Michael schrieb am Sonntag, 22.03.20 20:16 Uhr:
Fritz, ich brauche nochmals Deine Hilfe. Der Hamburger soll, wie auch das aufgeklappte Menü, nicht mitscrollen. Momentan geschieht dies ja durch die sticky-Anweisung. Schalte ich diese beim Hamburger aus, rutscht dieser nach links. Mit float:right rutscht er zwar wieder nach ganz rechts, verschiebt aber auch das bisher mittige, darunter stehende Logo etwas nach links. Ich verstehe dieses Verhalten nicht; aber wichtig wäre einfach: wie kann ich den Hamburger an Ort und Stelle, so, wie er mit sticky positioniert war, fixieren?
Danke und viele Grüße, Michael