Firstly lets create a menu in html.
- Code: Select all
<span id="menu_link">Open Menu</span>
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Thats all we need for the html. When a user clicks "Open Menu" the <ul> will come into view.
A bit of css is needed(or you can add the style attribute to the ul)
- Code: Select all
ul#menu
{
display:none;
}
obviously you can add more styling to make it look good but for this tutorial that is all we need.
Next is the jQuery.
We need to add an event once the "Open Menu" link is clicked:
- Code: Select all
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('#menu_link').click(function(){
$j('#menu').slideToggle();
});
});
with the above code the display:none attribute on the <ul> will be removed and it will slide down. Once the menu link is clicked again it will slide back up.
You can also feed some additional parameters into the slideToggle method to modify its behaviour.
- Code: Select all
$j('#menu').slideToggle(1000);
The above will set the animation duration to 1000 milliseconds. You can also use a string to define the speed. Available strings are:
"slow", "fast".
You can also add an easing effect to the animation.
- Code: Select all
$j('#menu').slideToggle(1000, 'easein');
You will need the jQuery easing plugin plugin for this parameter to work.
Lastly you can add a callback function to be called when the animation is complete.
- Code: Select all
$j('#menu').slideToggle(1000, function(){
alert('Animation Finished');
});
And thats it for now. Enjoy experimanting!
