Horizontal animated menu using Mootools

Do you want to add a nice animated menu on your website? Take a look at this nice MooTools effect!

This is my favourite Mootools effect: a nice horizontal animated menu which changes dinamically the blocks width when you pass your mouse over a selected block. You can see the effect on mootools home page


Code is simple and you can customize all parameters you want such as blocks size, blocks colour, blocks number, background image, and blocks content.

Download this tutorial


Change bocks size
In order to change the blocks size, modify these parameters:

var szNormal = 140, szSmall = 80, szFull = 200;

... where szNormal is the normal blocks size, szSmall is the block size when your mouse is over another block and szFull is the block size when your mouse is over the selected box.

Add new blocks
To add new blocks find this code:

<div id="kwicks_container">
<ul id="kwicks">
...

... and add <li> elements with a progressive ID (kwick_6, kwick_7, kwick_X...) into <ul> tag:

<li id="kwick_6" class="kwick">...some code here...</li>
<li id="kwick_7" class="kwick">...some code here...</li>
<li id="kwick_8" class="kwick">...some code here...</li>
...

For each <li> element you can also define a custom style with CSS in this simple way:

#kwick_6 {background-color: #ff9230;}
#kwick_7{background-color: #ff6600;}
#kwick_8 {background-color: #ffffff;}

...and define other attributes such as text color, background image or links colors.


Download this tutorial