5 Menus with Mootools

User Rating: / 0
PoorBest 

In this example you have 5 menus, example 1 not use script, is just html and css. You have this example for download, if you do this find the design of this button in Phtoshop format if you want to modify.

As I hope  have already used I will begin with HEAD section where we will have Javascript and links which links pugin mootools and css with our html.

In conclusion HEAD section must look like thise:

<link href="style.css" mce_href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="mootools-1.2.5-core-yc.js" mce_src="mootools-1.2.5-core-yc.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
    /* example a:  top down */
    $$('#a a').each(function(el) {
        //fx
        var fx = new Fx.Tween(el,{
            duration: 500,
            link: 'cancel'
        });
       
        //css & events
        el.setStyle('background-position','-20px 35px').addEvents({
            'mouseenter': function(e) {
                e.stop();
                fx.start('background-position','-20px 94px');
            },
            'mouseleave': function(e) {
                e.stop();
                fx.start('background-position','-20px 35px');
            }
        });
    });
   
    /* example b:  right left */
    $$('#b a').each(function(el) {
        //css
        var reset = false;
        var fx = new Fx.Tween(el,{
            duration: 500,
            link: 'cancel',
            onComplete:function() {
                if(reset) {
                    el.setStyle('background-position','0 0');
                }
            }
        });
        //events
        el.setStyle('background-position','0 0').addEvents({
            'mouseenter': function(e) {
                e.stop();
                fx.start('background-position','-150px 0');
                reset = false;
            },
            'mouseleave': function(e) {
                reset = true;
                fx.start('background-position','-300px 0');
            }
        });
    });
   
    /*example c */
    $$('#c a').each(function(el) {
        //css
        var reset = false;
        var fx = new Fx.Tween(el,{
            duration: 500,
            link: 'cancel',
            onComplete:function() {
                if(reset) {
                    el.setStyle('background-position','0 0');
                }
            }
        });
        //events
        el.setStyle('background-position','0 0').addEvents({
            'mouseenter': function(e) {
                e.stop();
                fx.start('background-position','-150px 0');
                reset = false;
            },
            'mouseleave': function(e) {
                reset = true;
                fx.start('background-position','-300px 0');
            }
        });
    });
   
        /*example D */
    $$('#d a').each(function(el) {
        //css
        var reset = false;
        var fx = new Fx.Tween(el,{
            duration: 500,
            link: 'cancel',
            onComplete:function() {
                if(reset) {
                    el.setStyle('background-position','0 0');
                }
            }
        });
        //events
        el.setStyle('background-position','0 0').addEvents({
            'mouseenter': function(e) {
                e.stop();
                fx.start('background-position','-151px 0');
                reset = false;
            },
            'mouseleave': function(e) {
                reset = true;
                fx.start('background-position','-450px 0');
            }
        });
    });
   
});
</script>

This is the CSS file:

@charset "utf-8";
/* CSS Document */

.body {
background:url(background.png) repeat top center;   
}

.container {
float:left;
width:600px;
display:block;   
}

ul {
list-style:none;
margin:0;
}

li {
float:left;
width:128px;
margin:0;
padding:0;
text-align:center; 
font-size:20px;
}

li a {
display:block;
padding:5px 10px;
height:100%;
color:#fff;
text-decoration:none;
border-right:1px solid #fff;
}

li a {
background: url(bg1.jpg) #000010 repeat 0 0; /* HERE YOU CAN CHANGE THE BACKGROUND IMAGE FOR EXAMPLE 1 */
}

a:hover, a:focus, a:active {
background-position:-150px 0;
color:#fff; /* HERE YOU CAN CHANGE THE TEXT COLOR WHEN MOUSE IS OVER */
}

#a a {
background:url(bg2.jpg) repeat;  /* HERE YOU CAN CHANGE THE BACKGROUND IMAGE FOR EXAMPLE 2 */
background-position:-20px 35px;
}

#b a {
background:url(bg3.jpg) repeat;  /* HERE YOU CAN CHANGE THE BACKGROUND IMAGE FOR EXAMPLE 3 */
background-position:0 0;
}

#c a {
background:url(bg4.jpg) repeat;   /* HERE YOU CAN CHANGE THE BACKGROUND IMAGE FOR EXAMPLE 4 */
background-position:0 0;
}

#d a {
background:url(bg5.jpg) repeat;   /* HERE YOU CAN CHANGE THE BACKGROUND IMAGE FOR EXAMPLE 5 */
background-position:0 0;
}

h2 {
float:left;
width:600px;
font-size:24px;
margin:25px 0 10px 42px;
color:#fff;   
}
 

Here is the script for  Download !