Come realizzare un menu a comparsa laterale con un clic

Chi l’ha detto che il menu deve essere sempre realizzato e sviluppato nel classico modo con le classiche voci disposte in orizzontale? Sì, è vero, il menu di navigazione è uno di quegli elementi fondamentali e importanti per poter navigare sul sito web, ma ci sono una serie di showcase che dimostrano come il menu di navigazione possa apparire solo dopo aver cliccato su una semplice icona costruita ad hoc.

Questo tipo di menu di solito viene implementato nel responsive web design per siti web di risoluzioni più piccole visualizzabili su dispositivi mobili o tablet. Ma ci sono molti esempi in cui viene sviluppato anche nelle versioni desktop quando, per esempio, si vuole dare importanza alle immagini di sfondo o per dare l’impressione di un layout semplice, lineare e pulito.

Ecco alcuni showcase interessanti:

LOBSTER

1

Il menu è di tipo slide a comparsa laterale come il nostro esempio. Menu molto semplice realizzato con poche righe di jQuery.

STUDENT DEV QUEST

2

Il menu off-canvas in questo esempio è sempre a comparsa laterale, ma nella parte destra del sito web. In più, sono inserite delle animazioni accattivanti sulle voci visibili nel momento in cui clicchiamo sull’iconcina del menu a comparsa.

APP AGENCY LONDON

4

Questo menu è molto più complicato dei precedenti perché, cliccando sull’iconcina, appaiono dei box con immagini al posto delle voci dalle quali poi si può accedere ad altre pagine interne. Personalmente apprezzo di più il primo caso, quindi ora ti mostrerò come realizzarlo con un piccolo tutorial.

TUTORIAL

La tecnica per realizzare il nostro esempio è molto semplice e basilare. È sufficiente un po’ di HTML, un po’ di stile ai nostri pulsanti e un piccolo script che permette alla nostra icona di fare apparire il menu quando la clicchiamo e di farlo scomparire nel momento in cui selezioniamo la X presente.

HTML

<div class="menu">
            <div class="closeButton"><a class="icon-close"></a></div>
                <ul>
                
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Running</a></li>
                    <li><a href="#">Percorsi</a></li>
                    <li><a href="#">Allenamenti</a></li>
                    <li><a href="#">Alimentazione</a></li>
                    <li><a href="#">Contattaci</a></li>
                
                </ul>
        </div>
        <div id="menuButton"><a class="icon-menu"></a></div>

Cosa ha di particolare il nostro codice HTML? Niente, nota soltanto l’inserimento di due contenitori con i due pulsanti fondamentali per il nostro menu: l’icona menu e l’icona X. Il primo ci servirà per far apparire le nostre voci, il secondo per chiudere il menu.

STILE

Per quanto riguarda lo stile, è importante che il nostro menu sia posizionato in modo assoluto sul nostro layout e in una posizione nascosta per poi attivarlo al clic. Il menu, inoltre, è alto il 100% del nostro contenitore.

.menu{
width:200px;
height:100%;
position:absolute;
left:-200px;
background:rgba(0,0,0,0.8);    
}

Per quanto riguarda invece lo stile dei pulsanti, potete sbizzarrirvi come volete per rendere accattivante la nostra pagina. Io ho usato le icon font di IcoMoon per realizzare i due pulsanti e poi ho applicato un po’ di stile.

UN PO’ DI JQUERY

Dopo aver inserito la libreria jQuery nell’head della nostra pagina HTML, dobbiamo aggiungere questo semplice script che ci permette di far apparire e far scomparire il nostro menu al clic dei due pulsanti e lo posizioniamo prima del tag di chiusura del body. Utilizziamo la funzione animate di jQuery per fissare la proprietà del tag left a 0 nel momento in cui clicchiamo sull’icona del menu per la durata di 1 secondo, dal momento che di default è a -200px.

$('#menuButton').click(function()
{
        $('.menu').
animate({"left":"0px"}, 1000);
       });

Dopo di che impostiamo il codice per chiudere il menu nel momento in cui clicchiamo sull’icona X come prima, ma nella direzione opposta cioè a -200px.

$('.closeButton').click(function()
{
        $('.menu').animate({"left":"-200px"}, 1000);
});

Il tutto lo racchiudiamo nel tag script prima della chiusura del tag body.

Molto semplice vero? Questo è il codice per poter realizzare un semplice menu a comparsa o come si dice in inglese off-canvas. Se vuoi realizzare qualcosa di più complicato, ti consiglio di leggere questo tutorial di Cordrops che sfrutta le animazioni CSS3 di bounce.js, una libreria jQuery che vi permette realizzare un menu ancora più accattivante grazie alle animazioni CSS3. Nel mentre, puoi scaricare il codice completo dell’esercitazione da qui! A presto!

Tag: , , , , , ,

L'autore

Web designer e front-end developer freelance a partire dal 2013 con l'obiettivo di crescere professionalmente e di affrontare nuove ed entusiasmati sfide. Ho studiato graphic design allo IED di Milano ma mi occupo in particolare di disegnare e sviluppare siti web in Html5 + Css3 e jquery, siti web responsive e con effetto parallasse. Amo anche scrivere e per questo ho anche un mio blog personale che trovate sul mio sito-web.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

13 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo