03586 – 3684921
support@seo-lausitz.de
Das Smartphone hat den Desktop-PC schon längst abgelöst. Keine Webseite mit einem aktuellen und responsiven Webdesign kommt ohne mobiles Menü zurecht. In der folgenden Anleitung zeige ich Ihnen, wie man ein solches Menü erstellen kann.
Klar, wenn man sich keinen großen Aufwand machen möchte, kann man ein mobiles Menü auch mit CSS-Frameworks wie TailWind oder Bootstrap erstellen. Aber welches Konzept steckt dahinter? Und wie kann man ein eigenes Menü erzeugen ohne auf ein großes Framework angewiesen zu sein?
Wenn Sie diese Anleitung befolgen, können Sie ein eigenes mobiles Menü erzeugen und dieses natürlich komplett Ihren Bedürfnissen nach anpassen.
Falls noch nicht geschehen, öffnen Sie Ihren Projektordner und erstellen Sie Ihre Projektdateien (HTML, CSS und JavaScript).
Im Folgen zeige ich Ihnen den Code für alle drei angewendeten Programmiersprachen.
Als erstes erzeugen wir das HTML-Grundgerüst, welches dann später um das CSS und das Javascript erweitert wird
<!DOCTYPE html>
<html>
<head>
<title>Mobiles Navigations Menü</title>
</head>
<body>
<section>
<!-- Wir erstellen 3 DIVs um das Dropdown zu zeigen-->
<div id="toggle-container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<!-- Hier kommt die eigentliche Navigation hin -->
<div id="toggle-content" class="toggle-content">
<a href="#start">Start</a>
<a href="#ueber-uns">Über uns</a>
<a href="#kontakt">Kontakt</a>
</div>
</section>
</body>
Mit CSS geben wir unserem Menü das entsprechende Aussehen. Natürlich muss diese Passage dann später noch erweitert werden, um dem umschaltbarem Menü ein ansprechendes Aussehen zu geben.
/*Dieser Abschnitt dient der Anleitung zur Erzeugung des mobilen Menüs*/
section{
width: 800px;
height: 600px;
margin-top: 50px;
margin-left: 250px;
border: solid black 1px;
background: #e6e3dc;
}
/*Posititionierung der DIV-Container im DOM */
#toggle-container{
display: grid;
width: fit-content;
margin-left: 720px;
margin-top: 10px;
}
/* Wir stapeln die DIVs übereinander und geben Ihnen eine feste Höhe und Breite*/
#one, #two, #three{
background: black;
width: 30px;
height: 3px;
margin-top: 5px;
}
.toggle-content{
display: none;
margin-right: 10px;
margin-top: 20px;
text-align: right;
}
.toggle-content a{
display: block;
text-decoration: none;
color: black;
font-size: 30px;
}
.toggle-content a:hover{
color: blue;
}
/* Zeige die von JavaScript erstellt Klasseninstanz im Block an*/
.displayed{
display: block;
}
Mit Javascript wird unserem mobilen Menü das Leben eingehaucht. Mit dem folgenden Code erzeugen wir die entsprechenden Aktionen.
var toggler = document.getElementById("toggle-container");
var toggleContents = document.getElementById("toggle-content");
toggler.addEventListener("click", function(){
//Hinzufügen der CSS-Klasse beim Click auf den Button:
toggleContents.classList.toggle("displayed");
});
Wenn alles korrekt umgesetzt wurde, sollte beim Aufruf der HTML-Datei im Browser ungefähr folgendes Bild erscheinen:
Das Menü ist umschaltbar, so dass durch erneutes Klicken auf die Leiste – oder irgendwo anders auf der Seite – die Navigation ausgeblenden wird.
Hinweis: Es gibt Browser, welche den Inhalt nicht ausblenden, wenn auf eine beliebige Stelle im Browser geklickt wird. Um dies abzufangen, sollte man den Javascript-Bereich noch um die folgende Passage erweitern:
//Hinzufügen eines Click-Events:
window.onclick = function(event) {
//Click-Event wird dem Menü zugeordnet:
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName("toggle-content");
//Navigationselemente nacheinander ausblenden:
for (var i = 0; i < dropdowns.length; i++) {
var dropped = dropdowns[i];
if (dropped.classList.contains('display')) {
dropped.classList.remove('display');
}
}
}
}
Wir haben mit dem obenstehenden Code ein eigenes umschaltbares Menü erzeugt. Die Schritte können so zusammengefasst werden:
Das Grundgerüst für ein umschaltbares Mobiles Menü haben wir geschaffen. Nun ist Ihre Kreativität gefragt. Durch CSS muss dieses nun noch Ihrem Wunschdesign angepasst werden.
Die vollständige Projekt-Datei können Sie hier herunterladen