Come creare un menù a tendina in Javascript
Troverai nel progetto
Che cosa realizzeremo in questo progetto ?
In questo progetto andremo a realizzare una navbar che da mobile presenta un menù a tendina. Per realizzarla, andremo ad occuparci del cambio (toggle) della classe su alcuni elementi.
Selezioniamo i nodi dal DOM
Per prima cosa andremo a selezionare dal DOM i nodi che ci interessano. In questo caso selezioneremo il bottone che una volta premuto mostrerà il menù a tendina, ed il div che contiene il menù con i vari link.
const navToggle = document.querySelector(".nav-toggle"); const navLinks = document.querySelector(".nav-links");
Come effettuare un cambio di classe per avere un cambio di stile
Il nostro obiettivo è quello di, dopo aver premuto sul bottone, modificare l'aspetto di un div, il quale parte come invisibile all'utente, modificando la classe assegnatagli.
Per farlo utiliziamo la proprità classList sul nodo navLinks (che rappresenta il div). Così facendo accediamo a tutte le classi che sono assegate a questo elemento. Successivamente utiliziamo il metodo .contains() che controllare che il div in questione contenga o meno la classe che vogliamo aggiungere.
Aggiungiamo un addEventListener al bottone, e al "click" andiamo ad invocare una callback all'interno della quale ad effettuare il controllo sulla classe per capire se aggiungere o rimuovere la classe al menù.
navToggle.addEventListener("click", () => { if (navLinks.classList.contains("show-links")) { navLinks.classList.remove("show-links"); } else { navLinks.classList.add("show-links"); } });
Metodo furbo
Tutto il controllo che abbiamo appena scritto è facilmente sostituibile tramite il metodo .toggle(), che permette di fare la medesima operazione.
In questo modo:
navToggle.addEventListener("click", () => { navLinks.classList.toggle("show-links"); });