In un mondo in cui il design responsive è fondamentale, avere un hamburger menu animato è uno dei modi migliori per migliorare l’esperienza utente su dispositivi mobili. Uno dei progetti più popolari e facili da utilizzare per implementare questi menu è quello sviluppato da Jon Suh, chiamato semplicemente “Hamburgers“. Si tratta di una collezione di hamburger menu animati e leggeri che sono facili da integrare nei tuoi progetti web. In questa guida esploreremo come utilizzare questa libreria per rendere il tuo sito più moderno e accattivante.
Cosa Sono gli “Hamburgers” di Jon Suh?
Gli Hamburgers di Jon Suh sono una collezione di bottoni per menu hamburger realizzati interamente in CSS. Ogni bottone è altamente personalizzabile, leggero e progettato per adattarsi perfettamente ai siti web moderni, specialmente in modalità responsive. Questi hamburger possono essere utilizzati per aprire e chiudere il menu di navigazione su dispositivi mobili, offrendo un tocco dinamico all’interfaccia utente.
Ecco alcune delle caratteristiche principali degli Hamburgers:
- Sono 100% CSS, il che significa che non ci sono dipendenze JavaScript complicate.
- Offrono 14 stili diversi, ognuno con animazioni eleganti.
- Sono leggeri e facili da integrare in qualsiasi progetto web.
- Possono essere facilmente personalizzati per adattarsi allo stile del tuo sito.
Come Aggiungere Hamburgers al Tuo Progetto
Puoi aggiungere Hamburgers di Jon Suh al tuo progetto in vari modi. Vediamo quelli principali.
1. Inclusione Tramite CDN
Il modo più semplice per iniziare è includere il CSS degli hamburgers direttamente nel tuo progetto tramite un CDN. Basta aggiungere il seguente link al tag <head> del tuo HTML:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hamburgers/dist/hamburgers.min.css">
Questo ti permetterà di utilizzare immediatamente gli stili CSS per i bottoni hamburger senza doverli scaricare manualmente.
2. Installazione Tramite NPM
Se stai utilizzando npm per la gestione dei pacchetti, puoi installare Hamburgers con il seguente comando:
npm install hamburgers
Dopo averlo installato, puoi importare il CSS nel tuo progetto:
@import '~hamburgers/dist/hamburgers.min.css';Utilizzo degli Hamburgers nel Codice HTML
Ora che hai incluso il CSS, vediamo come creare un hamburger menu animato nel tuo HTML.
Ecco un esempio di HTML di base per un hamburger:
<button class="hamburger hamburger--slider" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
- hamburger: Questa classe base è necessaria per qualsiasi bottone.
- hamburger–slider: Specifica uno degli stili di hamburger disponibili (in questo caso, lo stile “slider”). Puoi cambiare lo stile sostituendo con altri nomi come
hamburger--spring,hamburger--elastic, etc. - hamburger-box e hamburger-inner: Queste classi sono necessarie per la corretta visualizzazione e animazione del bottone.
Aggiungere Interattività con JavaScript
Mentre gli Hamburgers sono principalmente basati su CSS, è possibile aggiungere un po’ di interattività con JavaScript per aprire e chiudere il menu di navigazione.
Ecco un esempio di come fare ciò:
const hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("is-active");
// Qui puoi aggiungere il codice per aprire o chiudere il menu di navigazione
const navMenu = document.querySelector(".nav-menu");
navMenu.classList.toggle("menu-open");
});
- is-active: Questa classe viene aggiunta al bottone hamburger per far partire l’animazione di apertura o chiusura. Ogni stile di hamburger ha una sua specifica animazione che parte quando viene aggiunta questa classe.
- Nel codice sopra, il menu di navigazione viene aperto o chiuso ogni volta che l’utente clicca sull’hamburger.
Stili Disponibili
Gli Hamburgers di Jon Suh offrono diversi stili per soddisfare i gusti e le esigenze più variate. Ecco alcuni degli stili più popolari:
- Slider: Un’animazione semplice in cui le linee scorrono per formare una X.
- Spring: Le linee si animano con un effetto elastico, rendendo l’hamburger più giocoso.
- Elastic: Effetto simile a una molla che si comprime prima di trasformarsi nella X.
- Squeeze: Le linee si comprimono tra di loro per creare un’animazione elegante e compatta.
Puoi esplorare tutti i 14 stili disponibili direttamente sul sito ufficiale di Hamburgers di Jon Suh.
Personalizzazione degli Stili
Gli Hamburgers sono realizzati completamente in CSS, il che li rende molto facili da personalizzare. Puoi cambiare il colore, la dimensione e persino il comportamento delle animazioni.
Ecco un esempio di personalizzazione CSS per il colore e la dimensione del bottone hamburger:
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
background-color: #3498db; /* Cambia il colore dell'hamburger */
}
.hamburger {
width: 40px;
height: 40px;
}
- background-color: Cambia il colore delle linee dell’hamburger.
- width e height: Cambiano la dimensione del bottone, rendendolo più grande o più piccolo a seconda delle tue necessità.
Esempio Completo di Implementazione
Ecco un esempio completo di come utilizzare Hamburgers in un progetto web:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hamburgers/dist/hamburgers.min.css">
<link rel="stylesheet" href="styles.css">
<title>Hamburger Menu Animato</title>
<style>
.nav-menu {
display: none;
background: #333;
color: white;
padding: 20px;
}
.menu-open {
display: block;
}
</style>
</head>
<body>
<button class="hamburger hamburger--spring" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<nav class="nav-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Chi Siamo</a></li>
<li><a href="#">Servizi</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</nav>
<script>
const hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("is-active");
const navMenu = document.querySelector(".nav-menu");
navMenu.classList.toggle("menu-open");
});
</script>
</body>
</html>
Conclusione
Gli Hamburgers di Jon Suh sono una soluzione pratica, elegante e altamente personalizzabile per migliorare la navigazione nei tuoi progetti web. Grazie alla loro semplicità di integrazione e al design moderno, puoi facilmente aggiungere interattività al tuo sito, rendendolo più accattivante per gli utenti.
Non esitare a sperimentare con i vari stili e a personalizzarli per adattarli al meglio al tuo brand. Implementa oggi stesso un hamburger animato e migliora l’esperienza utente dei tuoi visitatori!
Hai trovato utile questa guida? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.
