Un menu duttile, con un po’ di javascript e css
Pubblicato da Davide, Aggiornato martedì 2 giugno 2009 4 Commenti »
Arrivano le feste e finalmente c’è tempo per dedicarsi a ciò che più piace. JQuery e un pizzico di CSS sono sufficienti per rendere accattivante un menù, creando tendine a cascata sul mouse-hover o affascinanti barre di navigazione, perfette per i menù in stile magazine. Tutta la faccenda è frutto di un comodo plugin di jquery: superfish.
Per vederlo subito all’opera basta dare un’occhiata agli esempi che ci sono sul sito ufficiale.
Questo plugin torna veramente utile se accoppiato ai classici menù per wordpress, dove tipicamente la sintassi html è la seguente:
<ul class="sf-menu">
<li class="page_item"><a href="#" title="Home">Home</a></li>
<li class="page_item page-item-1"><a href="#" title="About">About</a>
<ul>
<li class="page_item page-item-2"><a href="#" title="Sottopagina Uno">Sottopagina Uno</a></li>
<li class="page_item page-item-3"><a href="#" title="Sottopagina Due">Sottopagina Due</a></li>
</ul>
</li>
<li class="page_item page-item-4"><a href="#" title="Contatti">Contatti</a>
</ul>
Questa sintassi viene generata dalla funzione wp_list_pages(), indicando come argomento depth=2. E’ sufficiente assegnare la classe “sf-menu” alla lista (<ul>) che compone il menù e lo script farà il resto del lavoro, individuando le liste annidate e nascondendole. Quando l’utente passerà con il mouse sulla pagina padre, allora saranno mostrate a cascata le pagine figlie.
Ovviamente per far funzionare il tutto è necessario includere nella testata della pagina qualche riga di codice, per caricare jquery, il plugin e alcuni file css:
// link al file CSS
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
// link al javascript (hoverIntent è opzonale)
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="superfish.js"></script>
// inizializzazione di Superfish, sf-menu è la classe su cui sarà attivo l'effetto
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>
I temi rilasciati su eleganthemes fanno abbondantemente uso di questo plugin e gli effetti sono piuttosto gradevoli. Credo proprio che mi divertirò nei prossimi giorni.. Conoscete altri script altrettanto versatili e pronti all’uso?
Varie info
Articolo pubblicato martedì 2 giugno 2009 alle 23:43
Segnala questo articolo.. e sentiti utile!
4 Commenti »
Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.
Lascia il tuo commento
1
Valentino - Pubblicato il 03 06 2009 alle 13:30
..se poi ci associ il plugin hoverIntent è ancora più figo! ; )
2
Nino - Pubblicato il 08 06 2009 alle 16:13
Davvero molto interessante !
Prova a dare un’occhiata anche a questo: http://woork.blogspot.com
Ciao.
3
Davide - Pubblicato il 11 06 2009 alle 01:36
@Valentino: infatti superfish viene distribuito assieme all’hoverIntent ;)
@Nino: finezze varie con javascript/CSS ormai se ne vedono ovunque, è un bene che stiano sostituendo flash per questo lavoro..
4
Mamma Imperfetta - Pubblicato il 12 08 2009 alle 17:34
Come hai scoperto Eleganthemes? :D
Si, si…il codice è proprio poesia.