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 tutorialChange 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">
...
<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>
...
<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;}
#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
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Old Comments
Nice effect! Thanks
impressive
it is what i look for.... million thanx
also i have two questions and i hope you answer them
how do i make the rounded corners of this menu? same like image above
and second: how to set the spaces between the slides or is it hust image?
thanx again
@adel
Check out the page source for mootools.net - it becomes pretty clear how they accomplished the rounded corners and the item spacing.
To create the spaces: add a border-right to the list items, but remember to specify no border on the last item. This should leave the last list item not at the complete end of the list (ul) container.
To create the rounded corners: First create the first and last list item background with rounded corners. Then, apply the background image for the last list item (the one all the way on the right, with border-right specifically set to 0) to the list container (the ul element), setting its position to right.
Hope that helps.
Hi mr antonio! Thanks for this tutorial and the scripts! I was looking for this kind of stuffs for some time now! Its really cool!
But im having a problem! I want it to b like on the mootools website, with the width of the menu to stay the same while mouse over! Sorry for my bad english! Hope you'll understand!
BTW your website ROCKS!!
It sounds like an interesting effect but as there's no working demo, I can't see for myself what it does exactly. I prefer to view a working demo before I download anything so that I can decide for myself if I want to put more time into the tutorial.