Ich zeige hier Anhand eines Beispiels wie man mit JavaScript eine responsive Topnavigation erstellen kann.
Ich werde den CSS-Code möglichst einfach halten und werde den Code nicht alzu ausführlich erklären (ist selbsterklärend), zusätzlich zeige ich eine einfache Möglichkeit wie man das Hamburger-Icon als Symbol für die Topnavigation auf kleinen Bildschirmen verwendet.
Für das Hamburger-Icon verwende ich https://fontawesome.com/. Ich habe schon im Jahre 2015 einen Beitrag zu Font Awesome geschrieben (die Links sind nicht mehr aktuell): https://javigonzalez.ch/blog/linktipp-web-symbole-auf-einer-webseite-verwenden
Ich füge folgende Codezeile in den <head> Bereich der Webseite ein um Font Awesome in die eigene Webseite einzufügen:
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
Danach kann ich das Hamburger-Icon mit folgender Codezeile <i class="fa fa-bars"></i> an gewünschter Stelle im HTML-Code einfügen.
In meinen Beispiel füge ich das Hamburger-Icon mit folgender Codezeile in die HTML-Datei ein:
<button id="icon"><i class="fa fa-bars"></i></button>
Um das Hamburger-Icon nur auf kleinen Bildschirmen anzuzeigen verwende ich Media Queries im CSS-Code.
Hier eine Erklärung zu Media Queries: https://wiki.selfhtml.org/wiki/CSS/Media_Queries
Zuerst vergebe ich den HTML-Element button id="icon" für alle Bildschirme die Eigenschaft display: none; im CSS-Code so wird der Hamburger-Icon nicht angezeigt.
CSS-Code:
#icon {
display: none;
}
Danach bestimme ich mittels Media Queries eine maximale Bildschirmbreite (kleiner als 640px) in der das Hamburger-Icon angezeigt wird.
CSS-Code:
@media screen and (max-width: 640px)
#icon {
display: block;
}
Um die Navigation mit einen Klick auf den Hamburger-Icon anzuzeigen und wieder zu entfernen verwende ich JavaScript classList. Mit JavaScript classList kann man einen HTML-Element eine CSS-Klasse hinzufügen oder entfernen.
Quellen für den JavaScript Code:
In meinen Beispiel schalte ich für die Navigation die Klasse .responsive mit einen Klick auf den Hamburger-Icon an bzw. ab.
CSS-Code:
@media screen and (max-width: 640px) {
.topnav {
display: none;
}
.responsive {
display: block;
width: 100%;
}
Inspiration für diesen Beitrag: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
Kommentar eingeben