Hur man skapar en mobil menyrad med HTML, CSS och JavaScript

Utan tvekan kan du skapa en växlingsbar mobilmeny med hjälp av CSS -ramverk som TailWind eller BootStrap.

Men vad är konceptet bakom det? Och hur kan du göra en från grunden utan att vara beroende av dessa CSS -ramar?

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.

Så här skapar du din Togglable -mobilmeny

Om du inte redan har gjort det öppnar du projektmappen och skapar 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 sig kod innan du läser vidare.

Vi börjar med HTML:

 Skapa tre divs för att representera menyraden med tre rader 








 Lägg till dina navigationer här 


Hem
Handla om
Kontakt

CSS:

/*Denna sektionsavgränsning är endast avsedd för handledningen*/
sektion{ 
bredd: 800px;
höjd: 600px;
marginal-topp: 50px;
marginal-vänster: 250px;





instagram viewer


kant: solid svart 1px;
bakgrund: #e6e3dc;
}
/*placera divs -behållaren i din DOM*/
#toggle-container {
display: grid;
bredd: passformsinnehåll;
marginal-vänster: 720px;
marginal-topp: 10px;
}
/*Stack de tre divs ovanför varandra. Ställ sedan in en höjd och bredd för dem.*/
#ett två tre{
bakgrund: svart;
bredd: 30px;
höjd: 3px;
marginal-topp: 5px;
} 
.toggle-content {
display: ingen;
marginal-vänster: 700px;
marginal-topp: 20px;
}
.toggle-content a {
display: block;
text-dekoration: ingen;
svart färg;
typsnitt: 30px;
}
.toggle-content a: sväva {
färgen blå;
}
/*Visa klassinstansen som skapats av JavaScript i block*/
.visas {
display: block;
}

Lägg till JavaScript:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener ("klick", funktion () {
// Applicera en klassintans på varje navigering och ställ in displayen för att växla:
toggleContents.classList.toggle ("visas");
});

Så här ser en arbetsutgång ut när du klickar på menyraden:

Menyn går att växla, så att klicka på fältet igen - eller var som helst på sidan - döljer navigeringen.

Relaterad: Stil webbplatselement med en CSS -bakgrundsgradient

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 med hjälp av ett händelsemål och JavaScript -loop. Du kan göra det genom att lägga till följande kodblock i ditt JavaScript:

// Lägg till en klickhändelse på din webbsida:
window.onclick = funktion (händelse) {
// Rikta in klickhändelsen i menyraden så att webbsidans kropp kan spåra den:
if (! event.target.matches ('#toggle-container')) {
var dropdowns = document.getElementsByClassName ("toggle-content");
// Dölj navigeringarna genom att gå igenom var och en av dem:
för (var i = 0; i var droppade = dropdowns [i];
if (drops.classList.contains ('display')) {
drops.classList.remove ('display');
}
}
}
}

Så här är en sammanfattning av vad du just gjorde: Du skapade tre rader med div tagg med HTML. Du justerade deras höjd och bredd och placerade dem i din DOM. Sedan gav du dessa en klickhändelse med JavaScript.

Relaterad: Hur man skapar en webbplats: för nybörjare

Du ställer in den första 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 navigeringar baserat på en JavaScript -instanserad klass (visas). Slutligen använde du denna nya klass för att visa navigeringarna med hjälp av CSS och JavaScript toggleInnehåll metod.

Relaterad: Neumorf designstrender inom HTML, CSS och JavaScript

Resten av CSS beror dock på dina preferenser. Men den i exemplet CSS -kodavsnittet här borde ge dig en uppfattning om hur du formar din.

Bli mer kreativ när du bygger din webbplats

Att skapa en visuellt tilltalande webbplats kräver viss kreativitet. Och en användarvänlig webbplats är mer benägna 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å utöver detta och göra det mer övertygande. Till exempel kan du animera visningen av navigeringarna, ge dem en bakgrundsfärg och mer. Och vad du än gör, se till att din webbplats använder de bästa designmetoderna och layouterna som är enkla att använda.

Hur du återanvänder din gamla hårdvara som ett proffs

Har du en massa gammal teknik rörigt i ditt hem? Ta reda på exakt vad du ska göra med det i den här tekniska återvinningsguiden!

Läs Nästa

Om författaren