Articles

Note utilisateur:  / 3

Démo du menu à onglets mootools

Création du menu

Avant de commencer à jouer avec les effets mootools, il faut créer le menu à onglets dans votre site. Pour cela suivez le tutoriel de création d'un menu à onglets pour Joomla! 1.6, et ensuite vous pourrez passer à l'étape suivante.

Modification des styles CSS

Pour faire fonctionne nos effets on va devoir modifier les CSS. Ce qu'on veut obtenir c'est un mouvement des onglets de 10px vers le haut, il va donc falloir agrandir le conteneur <ul> à 40px, et ajouter quelques détails qui ont leur importance.

Voici le contenu des CSS (contenu du fichier 'menuonglets.css') :

ul#menuonglets {
 height: 40px;
 border-bottom: 1px solid #666;
 margin: 0;
 padding: 10px 0 0 0;
 overflow: hidden;
}

ul#menuonglets li {
 float: left;
 display: block;
 height: 30px;
 padding: 0;
 margin: 0 5px;
 padding-left: 8px;
 overflow: hidden;
 background: url(../images/onglet_gauche.png) left top no-repeat;
}

ul#menuonglets a {
 display: block;
 height: 40px;
 padding: 0;
 margin: 0;
 padding: 0 18px 0 10px;
 background: url(../images/onglet_droite.png) right top no-repeat;
 line-height: 30px;
 text-decoration: none;
 color: #333;
 font-size: 12px;
}

ul#menuonglets a:hover {
 color: #666;
}

En apparence notre menu n'a pas changé, sauf qu'en réalité on va pouvoir faire varier la hauteur des éléments de liste <li>.

Création des effets mootools

Attaquons le gros du sujet, à savoir les effets de variation de hauteur. Pour la base du script je me suis inspiré de celui de David Walsh pour créer un Snook menu.

Tout d'abord j'ai ajouté la propriété de marge supérieur de 10px sur les éléments <li>. Pourquoi le faire en javascript et pas en CSS ? Le style CSS est défini également, c'est juste une précaution pour forcer la valeur si jamais il y a une interférence avec un style du template par exemple.

el.setStyle('margin-top','10px');

Ensuite au lieu de faire varier la position de l'image de fond comme dans le snook menu, je fais varier la marge précédemment définie et la hauteur de l'élément

Au survol :

'margin-top': '0px', 
 'height': '40px'

Lorsque l'on quitte l'élément :

'margin-top': '10px', 
 'height': '30px'

Et voilà le travail, ci-dessous le code complet du script mootools :

window.addEvent('domready', function() {

    $$('#menuonglets li').each(function(el) {
        //fx
        var fx = new Fx.Morph(el,{
            duration: 300,
            link: 'cancel'
        });
        el.setStyle('margin-top','10px');
        //css & events
        el.addEvents({
            'mouseenter': function(e) {
                e.stop();
                fx.start({
                    'margin-top': '0px',
                    'height': '40px' 
                });
            },
            'mouseleave': function(e) {
                e.stop();
                fx.start({
                    'margin-top': '10px',
                    'height': '30px' 
                });
            }
        });
    });
    
});

On copie le code dans un fichier 'menuonglets.js' que l'on place dans un dossier 'js' dans le template :

[SITEJOOMLA]/templates/[TEMPLATE]/js/menuonglets.js

Intégration du javascript mootools dans le template

Il faut éditer le fichier 'index.php' du template et chercher la balise '</head>' (celle qui ferme l'entête du fichier html). Juste avant cette balise on ajoute l'appel au fichier javascript créée précédemment :

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/menuonglets.js"></script>

Télécharger les fichiers du menu à onglets mootools