So erstellen Sie eine mobile Menüleiste mit HTML, CSS und JavaScript
Zweifellos können Sie mit CSS-Frameworks wie TailWind oder BootStrap ein umschaltbares mobiles Menü erstellen.
Aber welches Konzept steckt dahinter? Und wie können Sie eines von Grund auf neu erstellen, ohne auf diese CSS-Frameworks angewiesen zu sein?
Wenn Sie die oben genannten Schritte selbst ausführen, haben Sie die volle Kontrolle über die Anpassung. So erstellen Sie ohne weiteres ein umschaltbares mobiles Menü mit Ihrer bevorzugten Programmiersprache.
So erstellen Sie Ihr umschaltbares mobiles Menü
Falls noch nicht geschehen, öffnen Sie Ihren Projektordner und erstellen Sie Ihre Projektdateien (HTML, CSS und JavaScript).
Unten sehen Sie Beispiele für den Code, den Sie für alle drei Typen benötigen. Und wenn Sie es noch nicht getan haben, sollten Sie diese Apps herunterladen , um Code zu lernen, bevor Sie weiterlesen.
Wir beginnen mit HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mobile Navigation Menu</title>
</head>
<body>
<section>
<!-- Create three divs to represent the three-line dropdown menu bar -->
<div id="toggle-container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<!-- Add your navigations here -->
<div id="toggle-content" class="toggle-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</section>
</body>
CSS:
/*This section demarcation is solely for the purpose of the tutorial*/
section{
width: 800px;
height: 600px;
margin-top: 50px;
margin-left: 250px;
border: solid black 1px;
background: #e6e3dc;
}
/*position the divs container in your DOM*/
#toggle-container{
display: grid;
width: fit-content;
margin-left: 720px;
margin-top: 10px;
}
/*Stack the three divs above each other. Then set a height and width for them.*/
#one, #two, #three{
background: black;
width: 30px;
height: 3px;
margin-top: 5px;
}
.toggle-content{
display: none;
margin-left: 700px;
margin-top: 20px;
}
.toggle-content a{
display: block;
text-decoration: none;
color: black;
font-size: 30px;
}
.toggle-content a:hover{
color: blue;
}
/*Display the class instance created by JavaScript in block*/
.displayed{
display: block;
}
JavaScript hinzufügen:
var toggler = document.getElementById("toggle-container");
var toggleContents = document.getElementById("toggle-content");
document.addEventListener("click", function(){
//Apply a class intance to each navigation and set display to toggle:
toggleContents.classList.toggle("displayed");
});
So sieht eine funktionierende Ausgabe aus, wenn Sie auf die Menüleiste klicken:
Das Menü ist umschaltbar, so dass durch erneutes Klicken auf die Leiste – oder irgendwo auf der Seite – die Navigationen ausgeblendet werden.
Ihr Browser unterstützt möglicherweise nicht das Ausblenden des Inhalts, wenn Sie auf eine beliebige Stelle Ihrer Webseite klicken. Sie können versuchen, dies zu erzwingen, indem Sie ein Ereignisziel und eine JavaScript-Schleife verwenden. Sie können dies tun, indem Sie Ihrem JavaScript den folgenden Codeblock hinzufügen:
//Add a click event to your webpage:
window.onclick = function(event) {
//Target the click event on the menu bar to allow the webpage body to track it:
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName("toggle-content");
//Hide the navigations by looping through each of them:
for (var i = 0; i < dropdowns.length; i++) {
var dropped = dropdowns[i];
if (dropped.classList.contains('display')) {
dropped.classList.remove('display');
}
}
}
}
Hier ist eine Zusammenfassung dessen, was Sie gerade getan haben: Sie haben drei Zeilen mit dem div- Tag von HTML erstellt. Sie haben ihre Höhe und Breite angepasst und in Ihrem DOM positioniert. Dann haben Sie diesen mit JavaScript ein Klickereignis gegeben.
Sie legen die anfängliche Anzeige Ihrer Navigationen auf Keine fest , um sie beim Laden der Seite auszublenden. Dann schaltet das Click- Ereignis in den drei Zeilen diese Navigationen basierend auf einer in JavaScript instanziierten Klasse ( angezeigt ) um. Schließlich haben Sie diese neue Klasse verwendet, um die Navigationen mit CSS und der toggleContents- Methode von JavaScript anzuzeigen .
Der Rest des CSS hängt jedoch von Ihren Vorlieben ab. Aber der hier im Beispiel-CSS-Schnipsel sollte Ihnen eine Vorstellung davon geben, wie Sie Ihren gestalten können.
Werden Sie kreativer, wenn Sie Ihre Website erstellen
Die Erstellung einer optisch ansprechenden Website erfordert etwas Kreativität. Und eine benutzerfreundliche Website wird Ihr Publikum eher konvertieren als eine langweilige.
Obwohl wir Ihnen hier gezeigt haben, wie Sie ein benutzerdefiniertes Navigationsmenü erstellen, können Sie darüber hinausgehen und es ansprechender gestalten. Sie können beispielsweise die Anzeige der Navigationen animieren, ihnen eine Hintergrundfarbe geben und vieles mehr. Und was immer Sie tun, stellen Sie sicher, dass Ihre Website die besten Designpraktiken und Layouts verwendet, die für die Benutzer einfach zu verwenden sind.