Logo Hpv 4 Learning
Academy
Web Agency
javascript

Come creare un menù a tendina in Javascript

By Hpv4Learning 1 min05/03/2022
"In questo progetto realizzeremo una navbar per navigare diverse sezioni del nostro sito"
Navbar Js

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");
});

Prossimo Progetto

Come creare una Sidebar in Javascript

Come creare una Sidebar in Javascript

Crea una navigazione laterale che appare e scompare al click

javascript

Informazioni aggiuntive

Livello: Principiante

239 lezioni

25 ore di videocorso

11 Progetti pratici

558 studenti iscritti

Voto Medio:

4.5

Prezzo originale: 29.90€

Supporto Premium

text

Scopri il corso completo

Corso di Javascript e Typescript...


558

4.5

Copertina
Corso di Javascript e Types...