Prérequis : D7, Theme Omega 3.

Télécharger es fichiers requis pour lavalamp :

http://nixbox.com/projects/jquery-lavalamp/tutorials.php

Nous allons utiliser les paramètres de démo de lavalamp pour notre exemple mais il pourront être personnaliser par la suite en modifiant le css et/ou les paramètres de notre fichier 'exemplemontheme.js'.

La partie Javascript

Placer le fichier 'jquery.lavalamp-1.4.js' et 'jquery.easing.1.3.js' dans un dossier 'lavalamp' dans le répertoire 'js' du theme.
Nous utiliserons également la version 1.9.1 de jQuery. il faut donc modifier la version jQuery chargé par Drupal.(voir tuto)

Déclarer dans l'entête de Drupal(voir tuto) les fichiers .js suivants de lavalamp:

-jquery.lavalamp-1.4.js
-jquery.easing.1.3.js

Ajouter un fichier javascript personnel pour paramêtrer les différents effets:
à la racine du dossier 'js' créer un fichier 'exemplemontheme.js' et déclarer le fichier comme les autres ci-dessus.
Purger tout les caches.
(Note: ce fichier comporte du code jQuery, la structure d'un fichier executant du jquery est spécifique pour Drupal 7, voir ce tuto.)

Editer le fichier exemplemontheme.js et ajouter le code suivant :

// JavaScript Document

// jQuery for Drupal 7 [BEGIN]
(function ($) {
// [jQuery BEGIN] début des fonctions
$(document).ready(function() {
// ****************************************************************
/* votre code jQuery ici !! */

//lavalamp menu

$(function() {
            $('#main-menu').lavaLamp({
    fx: 'swing',
    speed: 400,
    homeLeft:-1
        });
});        
//////End lavalamp menu ////////////

// ****************************************************************
// [jQuery END] fin des fonctions
});
// jQuery for Drupal 7 [END]
}(jQuery));
 

La partie CSS

Placer les fichier 'bg.gif' et 'lava.gif' dans le dossier 'lavalamp' dans le dossier 'css' du subtheme.
Créer un fichier 'lavalamp_test.css' dans le dossier 'css' du subtheme omega. L'editer et y ajouter le code suivant :

.main-menu {
            position: relative;
            height: 29px;
            width: 421px;
            background: url("bg.gif") no-repeat top;
            padding: 15px;
            margin: 10px 0;
            overflow: hidden;
        }
                .main-menu li {
                    float: left;
                    list-style: none;
                }
                    .main-menu li.back {
                        background: url("lava.gif") no-repeat right -30px;
                        width: 9px; height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                        .main-menu li.back .left {
                            background: url("lava.gif") no-repeat top left;
                            height: 30px;
                            margin-right: 9px; /* 7px is the width of the rounded shape */
                        }
                    .main-menu li a {
                        font: bold 14px arial;
                        text-decoration: none;
                        color: #fff;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;    
                    }
                        .main-menu li a:hover, .main-menu li a:active, .main-menu li a:visited {
                            border: none;
                        }

Déclarer ensuite ce fichier css en ajoutant ces lignes dans le fichier .info du subtheme :

css[menu_lavalamp.css][name] = 'Style du menu lavalamp'
css[menu_lavalamp.css][description] = 'Ce fichier personnalise l'apparence du menu utilisant lavalamp.'
css[menu_lavalamp.css][options][weight] = '15'

Purger tout les caches.

Dans la configuration du theme > Activer/désactiver les styles :
activer ce style (case à cochée) et désactiver les feuilles de style des modules et des thèmes pour 'system.menus.css'.

A ce stade le menu devrait fonctionner avec l'aspect graphique du mode démo de lavalamp.
Il ne reste plus qu'a modifier le fichier css et les images pour finalisé le menu à son goût.