This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Wednesday, January 23, 2008

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

blog comments powered by Disqus
Anonymous said...

Nice effect! Thanks

adel said...

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

Rob said...

@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.

Jaysen said...

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!!

Silver Firefly said...

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.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News