Sådan laver du en mobil menulinje med HTML, CSS og JavaScript

Uden tvivl kan du oprette en mobilmenu, der kan skiftes, ved hjælp af CSS -rammer som TailWind eller BootStrap.

Men hvad er konceptet bag? Og hvordan kan du lave en fra bunden uden at afhænge af disse CSS -rammer?

Hvis du gør ovenstående selv, får du fuld tilpasningskontrol. Så uden videre, her er hvordan du opretter en skiftbar mobilmenu ved hjælp af dit foretrukne programmeringssprog.

Sådan opretter du din Togglable Mobile Menu

Hvis du ikke allerede har gjort det, skal du åbne din projektmappe og oprette dine projektfiler (HTML, CSS og JavaScript).

Nedenfor ser du eksempler på den kode, du har brug for for alle tre typer. Og hvis du ikke allerede har gjort det, kan du overveje at downloade disse apps for at lære kode inden du læser videre.

Vi starter med HTML:

 Opret tre divs for at repræsentere menulinjen med tre linjer 








 Tilføj dine navigationer her 


Hjem
Om
Kontakt

CSS:

/*Denne sektionsafgrænsning er udelukkende med henblik på selvstudiet*/
afsnit{ 
bredde: 800px;
højde: 600px;





instagram viewer


margin-top: 50px;
margin-venstre: 250px;
kant: ensfarvet sort 1px;
baggrund: #e6e3dc;
}
/*placer divs -beholderen i din DOM*/
#toggle-container {
display: gitter;
bredde: fit-content;
margin-venstre: 720px;
margin-top: 10px;
}
/*Stak de tre divs over hinanden. Indstil derefter en højde og bredde for dem.*/
#et to tre{
baggrund: sort;
bredde: 30px;
højde: 3px;
margin-top: 5px;
} 
.toggle-indhold {
display: ingen;
margin-venstre: 700px;
margin-top: 20px;
}
.toggle-indhold a {
display: blok;
tekst-dekoration: ingen;
farve: sort;
skrifttype: 30px;
}
.toggle-indhold a: svæver {
farve: blå;
}
/*Vis klasseforekomsten oprettet af JavaScript i blok*/
.vises{
display: blok;
}

Tilføj JavaScript:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("skifteindhold");
document.addEventListener ("klik", funktion () {
// Anvend en klasseintensitet for hver navigation, og indstil displayet til at skifte:
toggleContents.classList.toggle ("vist");
});

Sådan ser et fungerende output ud, når du klikker på menulinjen:

Menuen kan skiftes, så ved at klikke på linjen igen - eller hvor som helst på siden - skjules navigationerne.

Relaterede: Style webstedselementer med en CSS -baggrundsforløb

Din browser understøtter muligvis ikke at skjule indholdet, når du klikker et vilkårligt sted på din webside. Du kan prøve at tvinge dette ved at bruge et hændelsesmål og JavaScript -loop. Du kan gøre det ved at tilføje følgende kodeblok til dit JavaScript:

// Føj en klikbegivenhed til din webside:
window.onclick = funktion (hændelse) {
// Mål på klikhændelsen på menulinjen for at give webstedets brødtekst mulighed for at spore den:
if (! event.target.matches ('#toggle-container')) {
var dropdowns = document.getElementsByClassName ("toggle-content");
// Skjul navigationerne ved at gå gennem hver af dem:
for (var i = 0; i var droppet = dropdowns [i];
if (drops.classList.contains ('display')) {
drops.classList.remove ('display');
}
}
}
}

Så her er en oversigt over, hvad du lige har gjort: Du oprettede tre linjer ved hjælp af div tag med HTML. Du justerede deres højde og bredde og placerede dem i din DOM. Derefter gav du disse en klikbegivenhed ved hjælp af JavaScript.

Relaterede: Sådan laver du et websted: For begyndere

Du indstiller den indledende visning af dine navigationer til ingen for at skjule dem, når siden indlæses. Derefter klik hændelse på de tre linjer skifter disse navigationer baseret på en JavaScript -instantieret klasse (vises). Endelig brugte du denne nye klasse til at vise navigationerne ved hjælp af CSS og JavaScript toggleContents metode.

Relaterede: Neumorfe designtrends inden for HTML, CSS og JavaScript

Resten af ​​CSS afhænger dog af dine præferencer. Men den i eksemplet CSS -uddrag her skal give dig en idé om, hvordan du styler din.

Bliv mere kreativ, når du bygger dit websted

At lave et visuelt tiltalende websted kræver noget kreativitet. Og et brugervenligt websted er mere tilbøjeligt til at konvertere dit publikum end et intetsigende.

Selvom vi har vist dig, hvordan du opretter en brugerdefineret navigationsmenu her, kan du stadig gå ud over dette og gøre det mere overbevisende. For eksempel kan du animere visningen af ​​navigationerne, give dem en baggrundsfarve og mere. Og uanset hvad du gør, skal du sikre dig, at dit websted bruger de bedste designpraksis og layout, der er let for brugerne.

Sådan genbruger du din gamle hardware som en professionel

Har en masse gammel teknologi rodet dit hjem op? Find ud af, hvad du skal gøre med det i denne tekniske genbrugsguide!

Læs Næste

Om forfatteren