Menu MooTools

2 mars 2010

Ayant eu besoin d’un menu pour un projet de développement d’un site pro, je suis tombé sur celui là :

http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/

Mais comme vous pouvez le voir, ce menu est développé avec jQuery, dont je ne suis pas particulièrement fan… Je l’ai donc converti pour Mootools 1.2 et voici les sources :

HTML

<div id="menu">
 <!-- Bloc menu. Toujours visible -->
<ul id="topnav">
	<li><a href="#">Lien</a></li>
	<li><a href="#">Lien</a></li>
	<li><a href="#">Lien</a></li>
	<li><a href="#">Lien</a></li>
	<li><a href="#">Lien</a></li>
	<li><a href="#">Lien</a></li>
</ul>
</div>
<!-- Fin menu -->

Javascript

window.addEvent('domready', function() {
 
                $$("#topnav li").each(function(el) {
                    var nvSpan = new Element("span");
                    nvSpan.innerHTML = el.get('text');
                    nvSpan.inject(el, 'top');
                });
 
                $$("#topnav li").each(function(el) { //For each list item...
                    var linkText = el.getFirst("a").html; //Find the text inside of the <a> tag
                    el.getFirst("span").html = linkText; //Add the text in the <span> tag
                });
 
                $$('#topnav li').addEvent('mouseenter', function(e) {	//On hover...
                    this.getFirst('span').tween('margin-top', '0', '-40px');
                });
 
                $$('#topnav li').addEvent('mouseleave', function(e) { //On hover out...
                    this.getFirst('span').tween('margin-top', '-40px', '0');
                });
 
            });
});
</span></a>

CSS

ul#topnav {
    width: 900px;
    width: 900px;
    display: inline-block;
    margin: auto;
    padding: 0;
    list-style: none;
    font-size: 1.1em;
}
 
ul#topnav li{
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    height:40px;
    text-align: left;
}
 
ul#topnav a, ul#topnav span {
    padding: 10px 20px;
    float: left;
    text-decoration: none;
    color: #fff;
    background: url(images/menuBg2.png) repeat-x;
    text-transform: uppercase;
    font-size: 10pt;
    clear: both;
    width: 100%;
    height: 20px;
    line-height: 20px;
}
 
ul#topnav a{
    color: #555;
    background-position: left bottom;
}
 
ul#topnav span{
    background-position: left top;
}

Et voici l’image menuBg2.png histoire que vous ayez un modèle (à répéter sur l’axe X):

et pour infos (encore), voici cette image répétée un certain nombre de fois :

La démo est disponible ici.

Voilà, n’hésitez à me dire ce que vous en pensez ;)

Posté par Albin Classé dans Non classé 1 Commentaire »

Une Réponse à “Menu MooTools”

Ghost Dit:
2 mars, 2010 à 23 h 59 min
Il n’aurait pas été plus malin de faire tout dans la même boucle?

var fxs = new Array(); //pas sûr que ce soit nécessaire…
var i = 0;
$$(« #topnav li »).each(function(el) {
var nvSpan = new Element(« span », {html: el.get(‘text’)});
nvSpan.inject(el, ‘top’);

fx[i] = new Fx.Tween(nvSpan, {link: ‘cancel’});

el.addEvents({
‘mouseenter’ : function(){
fx[i].start(‘margin-top’, ‘-40px’);
},
‘mouseleave’ : function(){
fx[i].start(‘margin-top’, ’0′);
}
});
i++;
});

Le code est a testé. Je suis fatigué et n’ai pas pu vérifier ..

Laisser un Commentaire

RSS | XHTML | CSS