lavalamp-menu-wordpress

Stanco del solito menu di navigazione statico? Oggi vedremo come integrare un simpatico menu di navigazione con effetto Lavalamp su WordPress usando un plugin per jQuery molto leggero e versatile.

Lavalamp semplice ed efficace

Le splendide librerie jQuery ci vengono incontro ancora una volta con un plugin leggero e facile da integrare che darà al tuo menu di navigazione un simpatico effetto di movimento senza per forza usare animazioni Flash difficili da implementare specialmente in ambito di creazione automatica e gestione dei menu. Un esempio concreto di quello che andremo a creare lo puoi trovare direttamente nel sito dell’autore di questo plugin Lavalamp for jQuery lovers!

Integrazione effetto Lavalamp

Il menu si integra in modo totale con la nuova funzione di Menu Personalizzati introdotta dalla versione 3.0 di WordPress quindi una volta implementato il codice che ti illustrerò tra poco potrai gestire le varie voci di navigazione direttamente dalla tab in amministrazione Aspetto > Menu. Gli ingredienti necessari per la creazione e preparazione del nostro menu di navigazione sono:

  • le librerie jQuery che puoi trovare su jQuery.com
  • il pacchetto che puoi trovare nella sezione Download di questo sito e che contiene oltre al plugin Lavalamp anche le librerie jQuery Easing integrate nello script e necessarie al suo funzionamento.

Non ti resta che aprire il file header.php ed inserire il richiamo allo script tra i tag <head></head> (sempre prima di <?php wp_head(); ?>) in questo modo:

<script src="<?php bloginfo('template_url'); ?>/js/lavalamp.js" type="text/javascript" charset="utf-8"></script>
<!-- Menu navbar -->
<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

dove il valore speed: 700 è la velocità di movimento del cursore-menu (modificabile a piacere)

Sempre in header.php trova la stringa di codice che richiama il tuo menu di navigazione wp_nav_menu (in questo tutorial si presume venga usata la nuova funzione dei menu personalizzati introdotta dalla versione 3.0 di WP), quindi sostituiscila o integra questo codice:

<div id="lavamenu">
<?php wp_nav_menu( array( 'menu_class' => 'lavaLamp', 'theme_location' => 'menu-top', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
</div>

per una corretta integrazione devi controllare il nome del tuo menu che puoi trovare generalmente nel file functions.php nella stringa di codice che abilita la funzione del menu personalizzato (register_nav_menus) e sostituirlo a quello che vedi nell’esempio sopra menu-header (‘theme_location’ => ‘menu-header‘)

Ultimo passo è l’aggiunta delle regole nel Css per poter visualizzare correttamente l’effetto Lavalamp, totalmente personalizzabile secondo le tue esigenze. Apri quindi il file style.css contenuto nella cartella del tuo tema e aggiungi queste righe di codice:

/* Lavalamp manu
-------------------------------------------------------------- */
#lavamenu {
    margin: 0px auto;
    float:right;
}
.lavaLamp {
    position: relative;
    padding: 0px 15px;
    margin: 0px 0;
    overflow: hidden;
}
.lavaLamp li {
    float: left;
    list-style: none;
}
 .lavaLamp li.back {
    background: url(images/lavalamp.png) no-repeat right -35px;
    width: 9px;
    height: 35px;
    z-index: 8;
    position: absolute;
}
.lavaLamp li.back .left {
    background: url(images/lavalamp.png) no-repeat top left;
    height: 35px;
    margin-right: 9px;
}
.lavaLamp li a {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    font: bold 14px arial;
    color: #A7A7A7;
    outline: none;
    text-align: center;
    height: 35px;
    top: 9px;
    z-index: 10;
    letter-spacing: 0;
    float: left;
    display: block;
    margin: auto 10px;
}  

Nel pacchetto che ho disposto nella sezione Download troverai il file lavalamp.js contenuto nella cartella /js e una immagine lavalamp.png che andrai ad inserire nella cartella /images del Tema.

demo lavalamp menu
download lavalamp menu