Hvordan lage en mobil menylinje med HTML, CSS og JavaScript

Utvilsomt kan du lage en mobilmeny som kan skiftes ved hjelp av CSS -rammer som TailWind eller BootStrap.

Men hva er konseptet bak det? Og hvordan kan du lage en fra bunnen av uten å være avhengig av disse CSS -rammene?

Gjør du ovenstående selv, får du full tilpasningskontroll. Så uten videre, her er hvordan du oppretter en byttbar mobilmeny ved hjelp av ditt foretrukne programmeringsspråk.

Hvordan lage din Togglable mobilmeny

Hvis du ikke allerede har gjort det, åpner du prosjektmappen og oppretter prosjektfilene dine (HTML, CSS og JavaScript).

Nedenfor ser du eksempler på koden du trenger for alle tre typene. Og hvis du ikke allerede har gjort det, kan du vurdere å laste ned disse appene for å lære kode før du leser videre.

Vi starter med HTML:

 Lag tre divs for å representere menylinjen med tre linjer 








 Legg til navigasjonene dine her 


Hjem
Om
Ta kontakt med

CSS:

/*Denne delavgrensningen er utelukkende for formålet med opplæringen*/
seksjon{ 
bredde: 800px;
høyde: 600px;

instagram viewer


margin-top: 50px;
margin-venstre: 250px;
kant: solid svart 1px;
bakgrunn: #e6e3dc;
}
/*plasser divs -beholderen i DOM*/
#toggle-container {
display: grid;
bredde: passform-innhold;
margin-venstre: 720px;
margin-top: 10px;
}
/*Stakk de tre divene over hverandre. Sett deretter en høyde og bredde for dem.*/
#en to tre{
bakgrunn: svart;
bredde: 30px;
høyde: 3px;
margin-top: 5px;
} 
.toggle-content {
display: ingen;
margin-venstre: 700px;
margin-top: 20px;
}
.toggle-content a {
display: blokk;
tekst-dekorasjon: ingen;
farge svart;
skriftstørrelse: 30px;
}
.toggle-content a: sveiv {
farge: blå;
}
/*Vis klasseforekomsten opprettet av JavaScript i blokk*/
.viste {
display: blokk;
}

Legg til JavaScript:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("veksleinnhold");
document.addEventListener ("klikk", funksjon () {
// Bruk en klasseintensitet på hver navigasjon og sett skjermen til å veksle:
toggleContents.classList.toggle ("vist");
});

Slik ser en arbeidsutgang ut når du klikker på menylinjen:

Menyen kan veksles, så klikk på linjen igjen - eller hvor som helst på siden - skjuler navigasjonene.

I slekt: Style nettstedselementer med en CSS -bakgrunnsgradient

Det kan hende nettleseren din ikke støtter å skjule innholdet når du klikker hvor som helst på nettsiden din. Du kan prøve å tvinge dette ved å bruke et hendelsesmål og JavaScript -loop. Du kan gjøre det ved å legge til følgende kodeblokk i JavaScript:

// Legg til en klikkhendelse på nettsiden din:
window.onclick = funksjon (hendelse) {
// Mål på klikkhendelsen på menylinjen for å la hjemmesidekroppen spore den:
if (! event.target.matches ('#toggle-container')) {
var dropdowns = document.getElementsByClassName ("toggle-content");
// Skjul navigasjonene ved å gå gjennom hver av dem:
for (var i = 0; i var droppet = dropdowns [i];
if (drops.classList.contains ('display')) {
drops.classList.remove ('display');
}
}
}
}

Så her er en oppsummering av hva du nettopp gjorde: Du opprettet tre linjer ved hjelp av div tag med HTML. Du justerte høyden og bredden og plasserte dem i DOM. Deretter ga du disse en klikkhendelse ved hjelp av JavaScript.

I slekt: Hvordan lage et nettsted: For nybegynnere

Du angir den første visningen av navigasjonene til ingen for å skjule dem når siden lastes inn. Og så klikk hendelse på de tre linjene bytter disse navigasjonene basert på en JavaScript -instansert klasse (vises). Til slutt brukte du denne nye klassen til å vise navigasjonene ved hjelp av CSS og JavaScript toggleContents metode.

I slekt: Neumorfe designtrender innen HTML, CSS og JavaScript

Resten av CSS avhenger imidlertid av dine preferanser. Men den i eksempelet CSS -kodebiten her bør gi deg en ide om hvordan du skal style din.

Bli mer kreativ når du bygger nettstedet ditt

Å lage et visuelt tiltalende nettsted krever litt kreativitet. Og det er mer sannsynlig at et brukervennlig nettsted konverterer publikummet enn et intetsigende.

Selv om vi har vist deg hvordan du lager en tilpasset navigasjonsmeny her, kan du fortsatt gå utover dette og gjøre det mer overbevisende. For eksempel kan du animere visningen av navigasjonene, gi dem en bakgrunnsfarge og mer. Og uansett hva du gjør, sørg for at nettstedet ditt bruker de beste designpraksis og oppsett som er enkle for brukerne.

Hvordan bruke din gamle maskinvare på nytt som en proff

Har du mye gammel teknologi i huset ditt? Finn ut nøyaktig hva du skal gjøre med det i denne tekniske resirkuleringsguiden!

Les neste

Om forfatteren