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 Mobile-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, ziehen Sie in Betracht, es herunterzuladen diese Apps, um Code zu lernen bevor Sie weiterlesen.

Wir fangen an mit HTML-Code:

 Erstellen Sie drei Divs, um die dreizeilige Dropdown-Menüleiste darzustellen 








 Fügen Sie hier Ihre Navigationen hinzu 


Heim
Über
Kontakt

CSS:

/*Diese Abschnittsabgrenzung dient ausschließlich dem Zweck des Tutorials*/
Sektion{ 
Breite: 800px;
Höhe: 600px;
Rand oben: 50px;
Rand links: 250px;
Rand: einfarbig schwarz 1px;
Hintergrund: #e6e3dc;
}
/*positioniere den divs-Container in deinem DOM*/
#toggle-container{
Anzeige: Raster;
Breite: fit-Inhalt;
Rand links: 720px;
Rand oben: 10px;
}
/*Stapeln Sie die drei Divs übereinander. Legen Sie dann eine Höhe und Breite für sie fest.*/
#eins zwei drei{
Hintergrund: schwarz;
Breite: 30px;
Höhe: 3px;
Rand oben: 5px;
} 
.toggle-Inhalt{
Anzeige: keine;
Rand links: 700px;
Rand oben: 20px;
}
.toggle-content a{
Bildschirmsperre;
Textdekoration: keine;
Farbe: Schwarz;
Schriftgröße: 30px;
}
.toggle-content a: schweben{
Farbe blau;
}
/*Die von JavaScript erstellte Klasseninstanz im Block anzeigen*/
.angezeigt{
Bildschirmsperre;
}

JavaScript hinzufügen:

var toggler = document.getElementById("toggle-container");
var toggleContents = document.getElementById("toggle-content");
document.addEventListener("click", function(){
// Wenden Sie eine Klasseninstanz auf jede Navigation an und stellen Sie die Anzeige auf Umschalten ein:
toggleContents.classList.toggle("angezeigt");
});

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.

Verwandt: Website-Elemente mit einem CSS-Hintergrundverlauf gestalten

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:

//Ein Klickereignis zu Ihrer Webseite hinzufügen:
window.onclick = Funktion (Ereignis) {
//Target das Click-Ereignis in der Menüleiste, damit der Webseitentext es verfolgen kann:
if (!event.target.matches('#toggle-container')) {
var Dropdowns = document.getElementsByClassName("toggle-content");
// Verstecken Sie die Navigationen, indem Sie jede von ihnen durchlaufen:
für (vari = 0; i < Dropdowns.Länge; ich++) {
var fallengelassen = Dropdowns[i];
if (dropped.classList.contains('display')) {
Dropped.classList.remove('Anzeige');
}
}
}
}

Hier ist eine Zusammenfassung dessen, was Sie gerade getan haben: Sie haben drei Zeilen mit dem erstellt div HTML-Tag. Sie haben ihre Höhe und Breite angepasst und in Ihrem DOM positioniert. Dann haben Sie diesen mit JavaScript ein Klickereignis gegeben.

Verwandt: So erstellen Sie eine Website: Für Anfänger

Sie stellen die anfängliche Anzeige Ihrer Navigationen auf keiner um sie beim Laden der Seite auszublenden. Dann ist die klicken Ereignis in den drei Zeilen schaltet diese Navigationen basierend auf einer in JavaScript instanziierten Klasse (angezeigt). Schließlich haben Sie diese neue Klasse verwendet, um die Navigationen mit CSS und JavaScript anzuzeigen toggleInhalt Methode.

Verwandt: Neumorphe Designtrends in HTML, CSS und JavaScript

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.

So verwenden Sie Ihre alte Hardware wie ein Profi

Haben Sie eine Menge alter Technik in Ihrem Zuhause? Was genau damit zu tun ist, erfahren Sie in diesem Tech-Recycling-Leitfaden!

Weiter lesen

Über den Autor