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.

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

Wir fangen an mit HTML-Code:

  
  
  
 Mobile Navigation Menu  
  
  
  
     
  
  
  
  
  
     
  
  Home   
  About   
  Contact

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:

Wie bekomme ich Windows 10 auf ein Flash-Laufwerk?

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.

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:

  //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  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 erstellt div HTML-Tag. Sie haben deren 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.

Verwandte: 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.

Teilen Teilen Tweet Email 15 Windows-Eingabeaufforderungsbefehle (CMD), die Sie kennen müssen

Die Eingabeaufforderung ist immer noch ein leistungsstarkes Windows-Tool. Hier sind die nützlichsten CMD-Befehle, die jeder Windows-Benutzer kennen muss.

Weiter lesen Verwandte Themen

Programmierung
HTML
CSS
JavaScript
Codierungstipps

Über den Autor Idisou Omisola(94 veröffentlichte Artikel)

Idowu hat eine Leidenschaft für alles, was smarte Technologien und Produktivität ist. In seiner Freizeit spielt er mit Programmieren und wechselt bei Langeweile aufs Schachbrett, aber er liebt es auch, ab und zu aus der Routine auszubrechen. Seine Leidenschaft, Menschen den Weg in die moderne Technologie zu weisen, motiviert ihn, mehr zu schreiben.

Mehr von Idowu Omisola

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um sich zu abonnieren

So erstellen Sie Ihr umschaltbares mobiles Menü

Werden Sie kreativer, wenn Sie Ihre Website erstellen

Abonniere unseren Newsletter