Questo breve tutorial nasce più come un esercizio di CSS e di Html5 che una vera e propria utilità, ma non è mai detto cosa possa accadere nella vita di uno sviluppatore: le circostanze in cui si è costretti a lavorare sono molteplici, tendenti all’infinito. Ecco perché potrebbe tornare utile a qualcuno capire come costruire un menu mobile senza l’uso di JavaScript.
In giro per il web la maggior parte dei tutorial che riguardano questo argomento affrontano il problema tramite l’uso di un input di tipo checkbox e usando, quindi, il selettore :checked come trigger per far comparire o scomparire il menu. Questa è una buona soluzione, che funziona sia per dispositivi desktop sia per quelli mobile.
Io, però, ho voluto provare a trovare un’alternativa per non essere obbligato a usare un checkbox fuori da un form, che risulta una pratica leggermente macchinosa. Così, mi sono ricordato di un tag molto interessante nato con Html5: details.
Il tag details permette di mostrare e nascondere una porzione di sito (tramite il click su un tag summary). Il tutto funziona senza l’utilizzo di JavaScript, perché viene gestito direttamente da Html e quindi dal browser che lo interpreta. Per una lettura più approfondita di questo tag: https://www.w3schools.com/tags/tag_details.asp.
Nota bene: questa pratica non funziona (ovviamente) su Internet Explorer, il browser più odiato dagli sviluppatori.
Comunque, guardiamo subito come sviluppare un menu mobile con burger senza JavaScript.
<details id="mobile-menu"> <summary> <div id="burger"> <span></span> <span></span> <span></span> </div> </summary> <nav> <ul> <li> <a href="#">Prima Pagina</a> </li> <li> <a href="#">Seconda Pagina</a> </li> <li> <a href="#">Terza Pagina</a> </li> </ul> </nav> </details>
Il semplice Html presenta un nav e un summary all’interno di un tag details. Di default tutto ciò che non si trova dentro a summary non viene mostrato fino al click sul summary. All’interno di summary ho inserito un semplice burger costruito in Css.
nav {
width: 100%;
height: auto;
position: absolute;
top: 50px;
background-color: #ccc;
}
nav ul {
list-style: none;
}
#mobile-menu {
width: 100%;
height: 50px;
position: fixed;
top: 0;
left: 0;
background-color: #eee;
}
#mobile-menu summary {
list-style: none;
}
/* Per browser Chromium */
#mobile-menu summary::-webkit-details-marker {
display: none;
}
#burger {
position: absolute;
right: 10px;
top: 5px;
display: inline-block;
cursor: pointer;
}
/* Burger icon */
#burger span {
display: block;
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Qui sopra il Css del menu mobile. Unica questione da notare: il summary è da modificare con un list-style: none (con display: none sulla pseudo-classe ::-webkit-details-marker, per i browser Chromium-based), questo per evitare di vedere quella fastidiosa icona triangolare che segnala quando il details è aperto o chiuso.
Il nostro tutorial è già finito e qui potrete trovare una versione demo funzionante:
https://codepen.io/pietrantonio91/pen/qBaYPqR
P.S.: l’utilizzo del tag <details> può essere interessante anche per lo sviluppo di altri elementi che normalmente richiederebbero l’utilizzo di JavaScript. Per esempio: un accordion, un menu a tendina… Purtroppo l’utilizzo di questi tag nati con Html5 è poco diffuso, ma sono sicuro che potrebbero davvero aiutare gli sviluppatori, specialmente quando sono alle prime armi o quando non sono pratici dell’uso di JS.