forma e sostanza della comunicazione

menu

Il simpatico ed ultraleggero menu animato LavaLamp, sviluppato per jQuery, può essere installato facilmente su piattaforma WordPress e fare la sua figura nell’indice di un blog.

Il plugin LavaLamp menu ne facilita l’utilizzo:
lavalamp-menu.0.1.zip
LavaLamp menu nell’archivio dei plugin di WordPress.

Spiego ora le modifiche in dettaglio.
Ad esempio, per attivare l’effetto ovunque nel template, in functions.php viene definita la funzione opportuna che racchiude il menu di navigazione:


<code>function mynavmenu() {
    echo '
<div id="menu">
<ul class="lavaLamp">';
    $menu = wp_list_pages('title_li=&amp;sort_column=menu_order&amp;echo=0');
    // Params for the page list in header.php
    echo str_replace(array("\r", "\n", "\t"), '', $menu);
    echo '</ul>
</div>
';
}
</code>

 

Anche il codice javascript va modificato, per considerare la voce al momento attiva:

<code>(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"></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);
</code>

 

Infine, gli script vengono caricati nel file header.php:

<code>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();
</code>

 

per poi richiamare, nella stessa testata, nella pagina o nella barra laterale, il codice mynavmenu() prima definito per generare la lista, senza dimenticare ovviamente le informazioni sullo stile:

<code>/* 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;
        }
</code>

 

Nota: i moduli di jQuery caricati per gestire le animazioni del menu potrebbero non essere compatibili con quelli predefiniti di WordPress. Ho trovato una configurazione funzionante partendo dal nucleo base di jQuery, ed integrandovi delle versioni ridotte degli elementi interface e delle funzioni easing rispetto a quelli originariamente forniti:
jquery.easing.1.3.js
intface4.js

In modo simile, l’effetto può essere applicato non soltanto all’elenco delle pagine, ma anche ad esempio per le categorie, eventualmente anche nella sua precedente versione basata su MooTools.

Sorgente:
jquery.lavalamp.js


Nessun commento

Lascia un commento


  • diario di sviluppo