form and substance of communication

menu
lava lamp
http://www.flickr.com/photos/[email protected]/3740207269/
April 28th, 2010

wordpress lavalamp menu

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


22 Comments

  1. 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.

    • 3dolab 17 Feb 2011

      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!

  2. 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

  3. Richard 8 Mar 2011 Reply

    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

  4. 3dolab 8 Mar 2011 Reply

    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…

  5. 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!

  6. 3dolab 7 Jul 2011 Reply

    Already tried with more default options in the wp_nav_menu array?

  7. 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:)

  8. does anyone know how to remove the current_page_item from child list elements as the lavalamp menu highlights this in a strange way.

  9. 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

    • 3dolab 20 Feb 2012

      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.

  10. 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

  11. Non mi ha preso il codice, riprovo mettendo degli spazi:

    ‘primary’ ) ) ; ? >

    L’ho modificato in: ‘lavaLamp’ ) ) ; ? >

    • 3dolab 24 Feb 2012

      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

  12. Grazie mille!! Ce l’ho fatta finalmente, dopo tante prove ecc..forse sbagliavo qualche passaggio o codice..ora ho messo anche l’effetto gel 😀

  13. still you can explain more breifly.. if you can please send to my mail

  14. Seymore 25 May 2012 Reply

    I failed to get it to work after nearly 2 hours in WP 3.2.1 I’ll donate $100 USD if you can update this =)

    • 3dolab 25 May 2012

      while striving to find the time to release an update, I could privately send you a beta version “as is”: always keep in mind to check for duplicate script queuing and set the parameter ‘menu_class’ => ‘lavaLamp’ if you’re using wp_nav_menu

  15. Hi,

    I have tried to integrate the lavalamp menu plugin with Twenty Eleven, but I am making to many mistakes. I read that you have already a beta of the update, maybe you can help me out with it. That would make it easier fro me to start with?

  16. Skirmantas 11 Jun 2012 Reply

    Hi, i tying to get my meniu item hover on php query with function &lang=en, is this possible? I trying all day with no progress.

  17. Hi,
    I’m new in wordpress and I want to integrate this plugin in my website. I already installed and activated the plugin but I don’t know how to call it in header and Change it.
    Can you please guide me step by step.

    Thanks

    • 3dolab 7 Mar 2013

      If you’re using the WP nav menu, you should edit the menu_class parameter of the function (most probably in your theme header) in order to assign the lavaLamp class to the UL list element containing menu LI items.

      Otherwise, if your menu is actually a simple list of pages, the plugin should automatically filter the wp_list_pages function: just activate it from the plugin settings page.

Leave a Reply


  • development diary