Utan tvekan kan du skapa en växlingsbar mobilmeny med CSS-ramverk som TailWind eller BootStrap.
Men vad är konceptet bakom? Och hur kan du göra en från grunden utan att vara beroende av dessa CSS-ramverk?
Att göra ovanstående själv ger dig full anpassningskontroll. Så, utan vidare, så här skapar du en växlingsbar mobilmeny med ditt föredragna programmeringsspråk.
Om du inte redan har gjort det, öppna din projektmapp och skapa dina projektfiler (HTML, CSS och JavaScript).
Nedan ser du exempel på koden du behöver för alla tre typerna. Och om du inte redan har gjort det, överväg att ladda ner dessa appar för att lära dig kod innan du läser vidare.
Vi börjar med 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;
}
Lägg till JavaScript:
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");
});
Så här ser en fungerande utdata ut när du klickar på menyraden:
Menyn är växlingsbar, så att klicka på fältet igen – eller var som helst på sidan – döljer navigeringen.
Din webbläsare kanske inte stöder att dölja innehållet när du klickar någonstans på din webbsida. Du kan försöka tvinga fram detta genom att använda ett händelsemål och JavaScript-loop. Du kan göra det genom att lägga till följande kodblock i ditt JavaScript:
//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');
}
}
}
}
Så här är en sammanfattning av vad du just gjorde: Du skapade tre rader med hjälp av div HTML-tagg. Du justerade deras höjd och bredd och placerade dem i din DOM. Sedan gav du dessa en klickhändelse med hjälp av JavaScript.
Du ställer in den initiala visningen av dina navigationer till ingen för att dölja dem när sidan laddas. Sedan klick händelse på de tre raderna växlar dessa navigering baserat på en JavaScript-instansierad klass (visas). Slutligen använde du den här nya klassen för att visa navigeringarna med CSS och JavaScript toggleContent metod.
Resten av CSS beror dock på dina önskemål. Men den i exemplet på CSS-kodavsnittet här borde ge dig en uppfattning om hur du stylar din.
Bli mer kreativ när du bygger din webbplats
Att göra en visuellt tilltalande webbplats kräver lite kreativitet. Och en användarvänlig webbplats är mer sannolikt att konvertera din publik än en intetsägande.
Även om vi har visat dig hur du skapar en anpassad navigeringsmeny här, kan du fortfarande gå längre än detta och göra det mer övertygande. Du kan till exempel animera visningen av navigeringarna, ge dem en bakgrundsfärg och mer. Och vad du än gör, se till att din webbplats använder bästa designpraxis och layouter som är lätta för användarna att använda.
Om författaren
Idowu Omisola (124 artiklar publicerade)
Idowu brinner för allt smart teknik och produktivitet. I hans free tid, han leker med kodning och byter till schackbrädet när han har tråkigt, men han älskar också att bryta sig loss från rutinen då och då. Hans passion för att visa människor vägen runt modern teknik motiverar honom att skriva mer.
Mer från Idowu Omisola
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
