Come creare una barra dei menu mobile con HTML, CSS e JavaScript

Indubbiamente, puoi creare un menu mobile attivabile utilizzando framework CSS come TailWind o BootStrap.

Ma qual è il concetto alla base? E come puoi crearne uno da zero senza dipendere da questi framework CSS?

Fare quanto sopra ti dà il pieno controllo della personalizzazione. Quindi, senza ulteriori indugi, ecco come creare un menu mobile attivabile utilizzando il linguaggio di programmazione preferito.

Come creare il tuo menu mobile attivabile

Se non lo hai già fatto, apri la cartella del tuo progetto e crea i tuoi file di progetto (HTML, CSS e JavaScript).

Di seguito, vedrai esempi del codice necessario per tutti e tre i tipi. E se non l'hai già fatto, considera il download queste app per imparare il codice prima di continuare a leggere.

Inizieremo con HTML:

 Crea tre div per rappresentare la barra dei menu a discesa a tre righe 








 Aggiungi qui le tue navigazioni 


Casa
Di
Contatto

CSS:

/*La demarcazione di questa sezione è esclusivamente ai fini del tutorial*/





instagram viewer


sezione{ 
larghezza: 800 px;
altezza: 600px;
margine superiore: 50 px;
margine sinistro: 250 px;
bordo: nero solido 1px;
sfondo: #e6e3dc;
}
/*posiziona il contenitore divs nel tuo DOM*/
#toggle-contenitore{
visualizzazione: griglia;
larghezza: fit-content;
margine sinistro: 720px;
margine superiore: 10 px;
}
/*Impila i tre div uno sopra l'altro. Quindi imposta un'altezza e una larghezza per loro.*/
#uno due tre{
fondo: nero;
larghezza: 30px;
altezza: 3px;
margine superiore: 5px;
} 
.toggle-content{
display: nessuno;
margine sinistro: 700 px;
margine superiore: 20 px;
}
.toggle-content a{
blocco di visualizzazione;
decorazione del testo: nessuna;
colore nero;
dimensione del carattere: 30px;
}
.toggle-content a: hover{
colore blu;
}
/*Visualizza l'istanza della classe creata da JavaScript nel blocco*/
.visualizzato{
blocco di visualizzazione;
}

Aggiungi JavaScript:

var toggler = document.getElementById("toggle-contenitore");
var toggleContents = document.getElementById("toggle-content");
document.addEventListener("click", function(){
//Applica un'istanza di classe a ogni navigazione e imposta display su toggle:
toggleContents.classList.toggle("visualizzato");
});

Ecco come appare un output funzionante quando fai clic sulla barra dei menu:

Il menu è attivabile, quindi facendo nuovamente clic sulla barra, o in qualsiasi punto della pagina, si nascondono le navigazioni.

Relazionato: Stile elementi del sito Web con un gradiente di sfondo CSS

Il tuo browser potrebbe non supportare il nascondere il contenuto quando fai clic in un punto qualsiasi della tua pagina web. Puoi provare a forzarlo utilizzando un target dell'evento e un ciclo JavaScript. Puoi farlo aggiungendo il seguente blocco di codice al tuo JavaScript:

//Aggiungi un evento click alla tua pagina web:
window.onclick = funzione (evento) {
//Indirizza l'evento click sulla barra dei menu per consentire al corpo della pagina web di seguirlo:
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName("toggle-content");
//Nascondi le navigazioni scorrendo ognuna di esse:
per (var i = 0; i < dropdowns.length; io++) {
var dropdown = dropdown[i];
if (dropped.classList.contains('display')) {
droppato.classList.remove('display');
}
}
}
}

Quindi, ecco un riassunto di quello che hai appena fatto: hai creato tre linee usando il divi tag HTML. Hai regolato la loro altezza e larghezza e li hai posizionati nel tuo DOM. Quindi hai dato a questi un evento clic utilizzando JavaScript.

Relazionato: Come creare un sito Web: per principianti

Hai impostato la visualizzazione iniziale delle tue navigazioni su nessuno per nasconderli quando la pagina viene caricata. Poi il clic evento sulle tre righe alterna queste navigazioni in base a una classe istanziata JavaScript (visualizzato). Infine, hai utilizzato questa nuova classe per visualizzare le navigazioni utilizzando CSS e JavaScript toggleContenuti metodo.

Relazionato: Tendenze del design neumorfico in HTML, CSS e JavaScript

Il resto del CSS, tuttavia, dipende dalle tue preferenze. Ma quello nello snippet CSS di esempio qui dovrebbe darti un'idea di come modellare il tuo.

Diventa più creativo quando crei il tuo sito web

Realizzare un sito Web visivamente accattivante richiede un po' di creatività. E un sito web user-friendly ha maggiori probabilità di convertire il tuo pubblico rispetto a uno blando.

Sebbene ti abbiamo mostrato come creare un menu di navigazione personalizzato qui, puoi comunque andare oltre e renderlo più avvincente. Ad esempio, puoi animare la visualizzazione delle navigazioni, dare loro un colore di sfondo e altro ancora. E qualunque cosa tu faccia, assicurati che il tuo sito web utilizzi le migliori pratiche di progettazione e layout facili da usare per gli utenti.

Come riutilizzare il tuo vecchio hardware come un professionista

Hai un sacco di vecchia tecnologia che ingombra la tua casa? Scopri esattamente cosa farne in questa guida al riciclaggio tecnologico!

Leggi Avanti

Circa l'autore