Ai lettori più esperti del mondo del web sarà capitato di vedere in molti siti, più o meno famosi, dei menù che nascondono altri link. Tra questi anche lo stesso Skimbu ne nasconde uno, che vi si rivelerà non appena passerete col mouse sulla pagina dei progetti.

Oggi vi spiegherò come creare un menù come questo, che, una volta cliccato il pulsante, mostrerà altri menù nascosti. Utilizzeremo jQuery, spiegato in breve nel mio articolo precedente.

Per prima cosa inseriamo nell’head alcuni semplici comandi per caricare il nostro foglio di stile e jQuery che troverete in allegato nel file al termine della pagina.

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>

Per prima cosa ci occuperemo del body, aprite quindi il vostro foglio di stile (nel nostro caso style.css) e scrivete questi semplici comandi:

body {
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 background-color: #FFF;
}

Per continuare creiamo un div che sarà il nostro vero e proprio pulsante, che noi chimeremo pulsante, nel quale inseriamo una semplice immagine precedentemente disegnata (trovate il .psd nel file in fondo all’articolo). Ecco il codce:

<div id="pulsante">
<img src="images/button.png" width="516" height="43" class="pulsante_sliding" />
</div>

Ed ecco lo stile da applicare:

#pulsante {
 height: 43px;
 width: 516px;
 margin: auto;
}

A questo punto dovremmo aver un risultato simile a quello sotto, in base alle immagini che utilizzerete, che però non ha alcun azione/effetto. E’ molto importante applicare la classe pulsante_sliding alla nostra immagine perchè il nostro menù risulti funzionante.

Occupiamoci adesso del menù vero e proprio. Inserite questo codice prima della chiusura del div dove avete messo l’immagine.

<ul>
<li><a href="#">Skimbu</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">By</a></li>
<li><a href="#">Kikkozzo</a></li>
</ul>

Ecco lo stile che ho deciso di applicare:

ul, li {
 margin:0;
 padding:0;
 list-style:none;
}

.menu {
 display:none;
 margin: auto;
 width:500px;
 border: 1px solid  #CCC;
 border-top: none;
}

.menu li {
 background-color: #FFF;
}

.menu li:hover {
 background-color: #D7D7D7;
}

.menu li a {
 color:#000;
 text-decoration:none;
 padding:10px;
 display:block;
}

.menu li a:hover {
 font-weight:bold;
 color: #0075e1;
}

Se volete che il menù sia nascosto prima che clicchiate sul pulsante è molto importante che non eliminiate dallo stile la riga

display: none;

Se invece desiderate avere una preview di quello che state programmando, eliminatela pure, ma ricordatevi di rimetterla! Anche il comando list-style: none; è fondamentale. Cancellandolo otterette infatti un “classico” menù a pallini.

Per ultimo, arriviamo finalmente al codice che ci permette di creare il menu. Ovviamente è scritto in jQuery, motivo per cui in precedenza lo abbiamo caricato.

<script type="text/javascript">
$(document).ready(function () {
 $('img.pulsante_sliding').click(function () {
 $('ul.menu').slideToggle('medium');
 });
});
</script>

Come potete vedere vengono richiamate le classi pulsante_sliding e menu, quindi, qualora decideste di chiamarle in un altro modo, ricordatevi di cambiare il nome che è riportato in questo script.
Per spiegarvi brevemente questo codice, il comando $(‘img.pulsante_sliding’).click(function () { richiama la nostra immagine con classe pulsante_sliding e gli assegna una funzione al “click” del mouse, che è proprio quella di richiamare l’”ul” con classe menu.

Il risultato finale dovrebbe essere, una volta premuto il pulsante, quello in apertura. L’esempio utilizzato per il tutorial è davvero semplice, ma con questa tecnica possiamo ottenere risultati davvero strabilianti. Ecco il file per ogni dubbio:

N.B.: come ci suggerisce il nosro utente WebDesigner92, è possibile anche creare lo stesso effetto, ma che avviene quando si passa sopra il pulsante, non quando invece lo clickiamo. Per farlo è sufficiente campiare .click(function in .hover(function