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.

Hoe u uw schakelbare mobiele menu kunt maken

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:

 Maak drie divs om de vervolgkeuzemenubalk met drie regels weer te geven 








 Voeg hier uw navigatie toe 


Thuis
Over
Contact

CSS:

/*Deze sectieafbakening is uitsluitend bedoeld voor de tutorial*/





instagram viewer


sectie{ 
breedte: 800px;
hoogte: 600px;
marge-top: 50px;
marge-links: 250px;
rand: effen zwart 1px;
achtergrond: #e6e3dc;
}
/*plaats de divs-container in uw DOM*/
#toggle-container{
weergave: raster;
breedte: pasvorm-inhoud;
marge-links: 720px;
marge-top: 10px;
}
/* Stapel de drie divs boven elkaar. Stel er vervolgens een hoogte en breedte voor in.*/
#een twee drie{
achtergrond: zwart;
breedte: 30px;
hoogte: 3px;
marge-top: 5px;
} 
.toggle-inhoud{
Geen weergeven;
marge-links: 700px;
marge-top: 20px;
}
.toggle-content a{
weergave: blok;
tekstdecoratie: geen;
de kleur zwart;
lettergrootte: 30px;
}
.toggle-content a: hover{
kleur blauw;
}
/*Geef de klasse-instantie weer die is gemaakt door JavaScript in blok*/
.weergegeven{
weergave: blok;
}

JavaScript toevoegen:

var toggler = document.getElementById("toggle-container");
var toggleContents = document.getElementById("toggle-content");
document.addEventListener("klik", function(){
// Pas een klasse-instantie toe op elke navigatie en stel de weergave in om te wisselen:
toggleContents.classList.toggle("weergegeven");
});

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:

//Voeg een klikgebeurtenis toe aan uw webpagina:
window.onclick = functie (gebeurtenis) {
// Target de klikgebeurtenis in de menubalk zodat de webpagina deze kan volgen:
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName("toggle-content");
// Verberg de navigatie door ze allemaal te doorlopen:
voor (var i = 0; i < vervolgkeuzelijsten.lengte; ik++) {
var gedaald = vervolgkeuzelijsten [i];
if (dropped.classList.contains('display')) {
gedaald.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.

Verwant: Neumorfe ontwerptrends 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.

Hoe u uw oude hardware opnieuw kunt gebruiken als een professional

Heb je veel oude technologie in je huis? Ontdek wat u er precies mee kunt doen in deze technische recyclinggids!

Lees volgende

Over de auteur