English 
Italiano 
The animated LavaLamp menu is funny, pleasing and lightweight. Originally developed in MooTools flavour, it has been ported to jQuery, and now it could be installed with ease on WordPress platforms to have a role in a blog index.
The LavaLamp menu plugin makes everything easy:
lavalamp-menu.0.1.zip
LavaLamp menu in the WordPress plugin archive.
Let’s explain the features with detailed source code.
In order to show the effect anywhere into the template, we have to define in functions.php a custom way to show the navgation menu:
function mynavmenu() { echo '<div id="menu"><ul class="lavaLamp">'; $menu = wp_list_pages('title_li=&sort_column=menu_order&echo=0'); // Params for the page list in header.php echo str_replace(array("\r", "\n", "\t"), '', $menu); echo '</ul></div>'; }
To highlight the active item, the javascript needs some further make-up:
(function($) { $.fn.lavaLamp = function(o) { o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {}); return this.each(function() { var me = $(this), noop = function(){}, $back = $('<li class="back"><div class="left"></div></li>').appendTo(me), $li = $("li", this), curr = $("li.current_page_item", this)[0] || $("li.current_page_parent", this)[0] || $($li[0]).addClass("current_page_item")[0]; $li.not(".back").hover(function() { move(this); }, noop); $(this).hover(noop, function() { move(curr); }); $li.click(function(e) { setCurr(this); return o.click.apply(this, [e, this]); }); setCurr(curr); function setCurr(el) { $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" }); curr = el; }; function move(el) { $back.each(function() { $(this).dequeue(); } ).animate({ width: el.offsetWidth, left: el.offsetLeft }, o.speed, o.fx); }; }); }; })(jQuery);
Then, the template file header.php loads every required script:
wp_enqueue_script('interface', get_bloginfo('template_directory').'/js/intface4.pack.js', array('jquery'), '1.3.2'); wp_enqueue_script('jqueryeasing', get_bloginfo('template_directory').'/js/jquery.easing.1.3.js', array('jquery'), '1.3.2'); wp_enqueue_script('lavalamp', get_bloginfo('template_directory').'/js/jquery.lavalamp.js', array('jquery'), '1.3.2'); wp_head();
At last, when calling the function mynavmenu() from the header itself or from the sidebar, it renders out the animated menu list. Obviously we should not miss the stylesheet:
/* Styles for the entire LavaLamp menu */ .lavaLamp { position: relative; height: 29px; width: 421px; background: url("../image/bg.gif") no-repeat top; padding: 15px; margin: 10px 0; overflow: hidden; } /* Force the list to flow horizontally */ .lavaLamp li { float: left; list-style: none; } /* Represents the background of the highlighted menu-item. */ .lavaLamp li.back { background: url("../image/lava.gif") no-repeat right -30px; width: 9px; height: 30px; z-index: 8; position: absolute; } .lavaLamp li.back .left { background: url("../image/lava.gif") no-repeat top left; height: 30px; margin-right: 9px; } /* Styles for each menu-item. */ .lavaLamp li a { position: relative; overflow: hidden; text-decoration: none; text-transform: uppercase; font: bold 14px arial; color: #fff; outline: none; text-align: center; height: 30px; top: 7px; z-index: 10; letter-spacing: 0; float: left; display: block; margin: auto 10px; }
Note: jQuery extension loaded by the lavalamp menu could result not compatible with WordPress default modules. I’ve found a nicely working setup in adding a stripped down version of interface elements and easing function to jQuery core:
jquery.easing.1.3.js
intface4.js
The animated lavalamp menu could fit not only the listings of pages, but also tags and categories.
I’m looking forward to collaborating with anyone interested in developing a plugin to smooth the installation process.
Source:
jquery.lavalamp.js
I’m trying to get this working without success. I’m confused about where to paste the second block of code above. The one labeled
“To highlight the active item, the javascript needs some further make-up:”,
Please clarify which file this needs to be pasted into.
Thank you.
It’s simple as that: as long as it’s JavaScript you have to paste it into your original jquery.lavalamp.js.
But you can always download the code files or use the plugin here provided to do it automagically!
Hi Man!
Great work on the WordPress plugin – but I just can’t get it to work. I am working with the DeStyle template but when I install this plugin I am not able to get the lavalamp menu working..
Any change you helping me out?
Thanks in advance !
Ren
Hi. Is this compatible with WordPress 3.1 and the Twenty Ten theme? I have activated it but doesn’t seem to be working.
Thanks
Hello! at the moment the WordPress Lavalamp Menu Plugin only filters wp_list_pages, wp_list_categories, wp_list_bookmarks to autorun (after enabling them in the admin options panel).
The recent wp_nav_menu and wp_page_menu are not yet supported by default, but you could:
A) replace wp_nav_menu with wp_list_pages (or whatever you want to list) in your theme header file
B) create your own nav menu, set container_class to lava_menu and menu_class to lavaLamp
so at last it should work. Let me know…
Hi I am also trying to implement this on a twenty ten child theme with no luck as of yet, I was hoping you would guide me in the right direction, here is the code I’ve made changes to
The plugin is active, but maybe it’s not configured correctly? It’s at it’s default settings right now, do we need to copy in any of the mentioned code above? Thanks for your help and your work on this project!
Already tried with more default options in the wp_nav_menu array?
Thanks for sharing..
I’ve also just created lavalamp menu using Drupal module which can be view here http://www.victheme.com/demo_product/7
Welcome for any review or comment:)
does anyone know how to remove the current_page_item from child list elements as the lavalamp menu highlights this in a strange way.
Ciao, non riesco a far funzionare questo menu con nessun tema. Ora sto provando con il tema “Twenty Eleven 1.3″ di WP e con la versione 3.3.1.
Prima ho provato con i vari tutorial a inserire il codice in header e style.css ma non funziona, al massimo mi escono fuori le voci del menu ma il menu vero e proprio non appare.
Ora ho provato a installarlo come plugin ma non appare niente..mi puoi aiutare? grazie mille
Prometto di rimetterci mano ed aggiustarlo appena ne trovo il tempo, nel frattempo posso confermare che, con qualche accorgimento, il plugin funziona anche con WP 3.3.1
Nelle opzioni del plugin, togli la spunta a “use internal js” e assicurati che i due script necessari (easing e interface elements) siano caricati dalla cartella di lavalamp-menu e non da altre estensioni (come fancybox, ecc).
Se usi un menu personalizzato (amministrazione > aspetto > menu) è più facile, basta modificare il tema (solitamente header.php) per assegnare in wp_nav_menu il valore lavaLamp al parametro class
Se hai ancora difficoltà, segnala pure un link di esempio e sarà più semplice aiutarti.
Ciao grazie mille ma ancora non funziona
Sto provando in locale questo menu.
Ho installato e attivato il plugin, poi da amministrazione -> lavalamp menu non ho selezionato nulla (use internal jquery easing and interface shipped with wordpress, apply lavalamp menu to list of pages, categories, bookmarks).
In customization devo scrivere il percorso della cartella del plugin, dove ci sono tutti i file?
In header twenty eleven ha questo codice:
‘primary’ ) ); ?>
E l’ho modificato in: ‘lavaLamp’ ) ); ?>
Ma niente nemmeno così, mi esce un elenco puntato con le voci
E da aspetto -> menu continua a esserci solo il nome di prima, cioè primary.
Esce così: http://img843.imageshack.us/img843/5103/menuzk.png
Non mi ha preso il codice, riprovo mettendo degli spazi:
‘primary’ ) ) ; ? >
L’ho modificato in: ‘lavaLamp’ ) ) ; ? >
se il sito è in locale e quindi non è possibile dargli un’occhiata, mandami pure via mail il file in uso, header.php suppongo, e magari anche un elenco dei plugin attivati
Grazie mille!! Ce l’ho fatta finalmente, dopo tante prove ecc..forse sbagliavo qualche passaggio o codice..ora ho messo anche l’effetto gel
still you can explain more breifly.. if you can please send to my mail