Oggi voglio parlarvi non come potete pensare di come ordinare un menù a base di hamburger da Burger King, ma dell’hamburger button e dell’ hamburger menù, un modo di raggruppare un menù di un sito web sulla versione mobile nel modo meno invasivo possibile.
Che cos’è l’hamburger button?
L’hamburger button è un’icona grafica rappresentata da tre linee orizzontali una sotto all’altra comunemente utilizzata nelle interfacce utente dei siti web e delle applicazioni mobili per indicare un menù di navigazione nascosto o meglio raggruppato.
Questo tipo di menù è particolarmente utile per risparmiare spazio su dispositivi con schermi più piccoli, come smartphone e tablet, permettendo agli utenti di accedere a opzioni di navigazione aggiuntive senza occupare troppo spazio visibile.
Perché viene chiamato così?
L’hamburger button di un sito web viene chiamato così perché i tre trattini uno sopra l’altro ricordano le due fette di pane di un hamburger con il pezzo di carne all’interno che rappresenta la linea centrale.
Come si presenta graficamente un Hamburger Menu
Design e Aspetto Grafico
L’icona dell’hamburger button è composta da tre linee orizzontali parallele e di uguale lunghezza. Queste linee sono spesso di colore scuro su uno sfondo chiaro, o viceversa, per garantire una buona visibilità e contrasto. L’icona deve essere facilmente riconoscibile e accessibile, spesso posizionata nell’angolo superiore sinistro o destro dell’interfaccia utente.
Come funziona
Quando un utente clicca o tocca l’icona dell’hamburger button, solitamente si apre un pannello laterale (side menu) o un menù a discesa (drop-down menu) che contiene i link di navigazione del sito o dell’applicazione. Questo pannello può scorrere in modo fluido da un lato dello schermo, sovrapponendosi al contenuto esistente, o può espandersi e contrarsi in modo dinamico.
Come si inserisce un hamburger menù su un sito
Se state implementando il vostro sito internet con qualsiasi tema WordPress non dovete fare assolutamente nulla in quanto è lo stesso CMS che vi genera in automatico l’hamburger menù.
Quello che potete fare è decidere quando deve essere mostrato ossia al di sotto di quale risoluzione deve comparire al posto del classico menù di un sito web desktop.
Di solito, l’hamburger menù viene visualizzato su dispositivi con schermi di dimensioni ridotte, come smartphone e tablet. La risoluzione esatta può variare da tema a tema, ma una pratica comune è quella di attivare l’hamburger menù a una larghezza di schermo inferiore a 768px o 1024px.
Come si implementa l’hamburger menù in HTML
Se stiamo creando il nostro sito internet manualmente in html per mostrare l’hamburger menù dobbiamo lavorare un pò di CSS. Per prima cosa scriviamo il codice CSS che metteremo nella header:
.hamburger-menu {
width: 30px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.hamburger-menu .line {
width: 100%;
height: 4px;
background-color: #333;
}
Nel punto in cui vogliamo rappresentare il menù dobbiamo scrivere questo codice
<div class="hamburger-menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
Per gestire invece l’apertura e la chiusura del menù dobbiamo scrivere un pò di codice in javascript
document.querySelector('.hamburger-menu').addEventListener('click', function() {
const menu = document.querySelector('.menu');
menu.classList.toggle('open');
});
Ecco invece il CSS per il pannello del menù:
.menu {
display: none;
position: absolute;
top: 0;
right: 0;
width: 250px;
height: 100%;
background-color: #fff;
box-shadow: -2px 0 5px rgba(0,0,0,0.5);
transition: transform 0.3s ease;
transform: translateX(100%);
}
.menu.open {
display: block;
transform: translateX(0);
}Quali sono i vantaggi di usare un hamburger menù?
Come menu siti web è quindi un elemento quasi sempre presente sulle versioni mobili.
Usare un hamburger menù presenta i seguenti vantaggi per lo sviluppatore:
Risparmio di Spazio: Permette di mantenere l’interfaccia pulita e ordinata, specialmente su dispositivi mobili.
Accessibilità: Facilita l’accesso a più opzioni di navigazione senza sovraccaricare visivamente l’utente.
Consistenza: Fornisce un’esperienza di navigazione coerente tra diverse piattaforme
Nonostante i vantaggi, l’hamburger menù ha ricevuto alcune critiche, soprattutto in termini di scoperta e UX. Alcuni studi hanno dimostrato che le opzioni di navigazione nascoste possono essere meno visibili agli utenti, portando a una minore interazione con le stesse. Per mitigare questo, alcune interfacce combinano l’uso dell’hamburger menù con altre forme di navigazione visibile.
Ad esempio sul mio portale Napoli misteriosa ho usato come hamburger menù una fetta di pizza.
Che cos’è il Kebab menù?
L’hamburger button a volte viene utilizzato anche con tre pallini verticali specialmente quando si tratta di menù contestuali in questo caso prende il nome di kebab menù
