In questo tutorial impareremo come creare un menù di navigazione overlay full screen. Questa modalità è molto utile quando si vuole far visualizzare il menù di un sito web su dispositivi mobile. Ovviamente facciamo riferimento a siti web responsive ma può essere utilizzato anche per molti altri scopi.
Nel corso del tutorial analizzeremo, attraverso un piccolo esempio, la porzione di codice HTML, la porzione di codice CSS e la parte Javascript. Naturalmente è possibile utilizzare anche il codice JQuery per otterere il medesimo risultato.
STEP 1 - HMTL
Di seguito è presente una semplice lista di valori (può rappresentare un menù di un sito web) racchiusa in un tag esterno con id 'menu'. Per aprire e chiudere il nostro menù utilizzeremo rispettivamente 'click' e 'close'. Le funzioni di apertura e chiusura sono implementate nel codice Javascript che vedremo in seguito.
<div id="click" onclick="openMenu()">Apri il menù</div>
<div id="menu">
<div id="close" onclick="closeMenu()"></div>
<ul>
<li>Home</li>
<li>Pagina 1</li>
<li>Pagina 2</li>
<li>Pagina 3</li>
</ul>
</div>STEP 2 - CSS
Il nostro menù necessita di una formattazione in modo da poter visualizzare il risultato in maniera corretta. Di seguito ho provato a darne una utilizzando gli id del codice Html visto precedentemente. A seconda delle nostre esigenze possiamo modificare il codice Css ed ottenere un'altro tipo di visualizzazione.
Possiamo notare come la larghezza del menù sia pari a 0 (width:0). Questo vuol dire che nella prima visualizzazione il menù sarà chiuso.
#click{padding:10px; background:#6b93ae; color:#ffffff; cursor:pointer; text-transform:uppercase; text-align:center}
#close{width:100%; height:64px; background: url('close.png') no-repeat top right; cursor:pointer}
#menu {z-index:1; height:100%; width:0; position:fixed; z-index:1; top:0; left:0; background-color:rgb(0,0,0); background-color:rgba(0,0,0, 0.9); overflow-x:hidden; transition: 0.5s}
#menu ul { position:relative; list-style:none; padding:0 }
#menu li { width:100%; padding:0; color:#fff; border-bottom:1px solid #cccccc; font-size:50px; padding:20px}STEP 3 - JAVASCRIPT
Di seguito sono illustrate le chiamate di apertura e chiusura del menù in modalità overlay full screen. Le funzioni, come detto precedentemente, sono legate agli id 'click' e 'close'.
Nella prima funzione la larghezza del menù aumenterà fino al 100% dello schermo, mentre nella seconda funzione la larghezza diminuirà fino a scomparire.
function openMenu() { document.getElementById("menu").style.width = "100%"; }
function closeMenu() { document.getElementById("menu").style.width = "0%"; }
