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
No comments:
Post a Comment