Een mobiele menubalk maken met HTML, CSS en JavaScript

U kunt ongetwijfeld een schakelbaar mobiel menu maken met behulp van CSS-frameworks zoals TailWind of Bootstrap.

Maar wat is het concept erachter? En hoe kun je er een helemaal opnieuw maken zonder afhankelijk te zijn van deze CSS-frameworks?

Als u het bovenstaande zelf doet, krijgt u volledige controle over de aanpassing. Dus, zonder verder oponthoud, hier is hoe u een schakelbaar mobiel menu kunt maken met behulp van uw favoriete programmeertaal.

Als u dit nog niet heeft gedaan, opent u uw projectmap en maakt u uw projectbestanden (HTML, CSS en JavaScript).

Hieronder ziet u voorbeelden van de code die u nodig heeft voor alle drie de typen. En als je dat nog niet hebt gedaan, overweeg dan om te downloaden deze apps om code te leren alvorens verder te lezen.

We beginnen met HTML:

  
  
  
 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 toevoegen:

kan deze computer Windows 10 draaien?

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');  
});

Zo ziet een werkende uitvoer eruit als u op de menubalk klikt:

Het menu kan worden omgeschakeld, dus nogmaals op de balk klikken - of ergens op de pagina - verbergt de navigatie.

Verwant: Stijl website-elementen met een CSS-achtergrondverloop

Uw browser ondersteunt mogelijk niet het verbergen van de inhoud wanneer u ergens op uw webpagina klikt. U kunt proberen dit te forceren door een gebeurtenisdoel en JavaScript-lus te gebruiken. U kunt dat doen door het volgende codeblok aan uw JavaScript toe te voegen:

  //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');  
 }  
 }  
 }  
}

Dus hier is een samenvatting van wat je zojuist hebt gedaan: Je hebt drie regels gemaakt met de div tag van HTML. Je hebt hun hoogte en breedte aangepast en in je DOM geplaatst. Vervolgens heb je deze een klikgebeurtenis gegeven met JavaScript.

Verwant: Een website maken: voor beginners

U stelt de eerste weergave van uw navigatie in op: geen om ze te verbergen wanneer de pagina wordt geladen. Dan de Klik gebeurtenis op de drie regels schakelt deze navigatie in op basis van een door JavaScript geïnstantieerde klasse ( weergegeven ). Ten slotte heb je deze nieuwe klasse gebruikt om de navigatie weer te geven met behulp van CSS en JavaScript's toggleInhoud methode.

Gerelateerd: Neumorphic Design Trends in HTML, CSS en JavaScript

De rest van de CSS hangt echter af van uw voorkeur. Maar degene in het CSS-voorbeeldfragment hier zou u een idee moeten geven van hoe u de uwe kunt stylen.

Word creatiever bij het bouwen van uw website

Het maken van een visueel aantrekkelijke website vereist enige creativiteit. En een gebruiksvriendelijke website zal uw publiek eerder converteren dan een saaie.

Hoewel we je hier hebben laten zien hoe je een aangepast navigatiemenu kunt maken, kun je nog steeds verder gaan en het aantrekkelijker maken. U kunt bijvoorbeeld de weergave van de navigatie animeren, ze een achtergrondkleur geven en meer. En wat u ook doet, zorg ervoor dat uw website de beste ontwerppraktijken en lay-outs gebruikt die gebruikers gemakkelijk kunnen gebruiken.

Deel Deel Tweeten E-mail 15 Windows Command Prompt (CMD)-opdrachten die u moet kennen

De opdrachtprompt is nog steeds een krachtige Windows-tool. Hier zijn de handigste CMD-opdrachten die elke Windows-gebruiker moet kennen.

Lees volgende Gerelateerde onderwerpen

Programmeren
HTML
CSS
JavaScript
Codeertips

Over de auteur Idisou Omisola(94 artikelen gepubliceerd)

Idowu is gepassioneerd door alles wat slimme technologie en productiviteit betreft. In zijn vrije tijd speelt hij met coderen en schakelt hij over naar het schaakbord als hij zich verveelt, maar hij vindt het ook heerlijk om af en toe uit de routine te stappen. Zijn passie om mensen de weg te wijzen in moderne technologie motiveert hem om meer te schrijven.

Meer van Idowu Omisola

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren

Hoe u uw schakelbare mobiele menu kunt maken

Word creatiever bij het bouwen van uw website

Abonneer op onze nieuwsbrief