This tutorial illustrates how to implement a nice animated menu using Mootoolsand some lines of CSS and HTML code ready to reuse in your project.
This is the basic version with a basic design, but you can customize it how you prefer modifying the CSS related source code.
Download this tutorial 
Live PreviewStep 1: HTML Code
HTML code is very simple. You have a layer with ID mymenu which is your menu container, section header (H3 tag) and section content (ul list) which contains some sub-links for each section:
... so, HTML code is something like this:
<div id="mymenu">
<h3 class="toggler menusection">Menu Section 1</h3>
<div class="element menusection">
<ul>
</div>
<h3 class="toggler menusection">Menu Section 2</h3>
<div class="element menusection">
<ul>
</div>
<!-- Add here other sections... -->
</div>
<h3 class="toggler menusection">Menu Section 1</h3>
<div class="element menusection">
<ul>
<li><a href="1">Link 1</a></li>
<li><a href="2">Link 2</a></li>
<li><a href="3">Link 3</a></li>
<li><a href="4">Link 4</a></li>
</ul><li><a href="2">Link 2</a></li>
<li><a href="3">Link 3</a></li>
<li><a href="4">Link 4</a></li>
</div>
<h3 class="toggler menusection">Menu Section 2</h3>
<div class="element menusection">
<ul>
<li><a href="1">Link 1</a></li>
<li><a href="2">Link 2</a></li>
</ul><li><a href="2">Link 2</a></li>
</div>
<!-- Add here other sections... -->
</div>
You can add other sections using the previous structure for each new section.
Step 2: Javascript Code
Ok, now add a link to mootools framework in the tag of your page using this line of code:
<script type="text/javascript" src="mootools.svn.js"></script>
...and add this code in the <head> tag of the page:
<script type="text/javascript">
window.addEvent('domready', function(){
var accordion = new Accordion('h3.menusection', 'div.menusection', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#333333');
toggler.setStyle('background', '#FFFFCC');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#FFFFFF');
toggler.setStyle('background', '#999999');
}
}, $('mymenu'));
});
</script>
window.addEvent('domready', function(){
var accordion = new Accordion('h3.menusection', 'div.menusection', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#333333');
toggler.setStyle('background', '#FFFFCC');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#FFFFFF');
toggler.setStyle('background', '#999999');
}
}, $('mymenu'));
});
</script>
Step 3: Customize CSS code
You can change the look of your menu simply changing some lines of CSS code:
It's all! Download source code to reuse it in your projects.
Download this tutorial
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
Thanks, nice effect
Nice and simple tutorial, I love the accordion!
Anyway I think you should use the cursor:pointer; property to make people aware that they're actually clicking a button to activate the slider.
Ciao antonio!
Thanks for the tutorial.. Cool effect!
Hello,
i really like this effect for menu. I did all customization and now fits my design, but theres one problem.
How i can use active state for the links, so the menu will keep activated link that i clicked on.
Thanks!
Rade
This is a nice blog. I like it!
i downloaded the src but in ie it is showing the activeX warning,
In firefox it works fine.
Any idea???
Ye.. nice blog. :| nothing support...
Uhm, why use those extra divs instead of UL UL? Like: (NOTE: All < and > replaced with | due to Bloggers filtering ..)
|ul|
|li class="toggler"|Toggle 1|/li|
|ul class="toggledcontent"|
|li|Item 1|/li|
|li|Item 2|/li|
|li|Item 3|/li|
|/ul|
|li class="toggler"|Toggle 2|/li|
|ul class="toggledcontent"|
|li|Item 1|/li|
|li|Item 2|/li|
|li|Item 3|/li|
|/ul|
|/ul|
etc..? :f
Is there some way of having the second (or third) section active/expanded by default?
So helpful!! Thank you!
hi antonio.
may i ask, is it possible to use this accordion technique with tables?
say if i click a <tr> element, the details of that record will show below it.
thanks in advance.
I modified your code to do something slightly different and screwed up.
Still testing
Hello
Very nice, I have this implemented but am wondering, how do I make a hover state for the togglers? I tried doing it with the css but it didnt work.
is there a command simliar to
onActive or onBackground that it would be, like onHover?
many thanks, Joey