To begin with we need to make a menu, which I've just done a quick temporary 5 items in mine using the HTML lists tags.
<menutitle>Main</menutitle> <ul id="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul>
Then in the header of your page, you will need to call your jQuery file.
Now the document is ready for your jQuery code, we need to tell it that when the "title" bit of the menu (which we've tagged as
The above code will toggle the sliding action of anything we've put id="menu" on, which is why we've put it on the
- bit. Now with everything put together and saved, you should have a menu that toggles closed and open when you press the top bit, which in my example is "Main"
Please note though, that this is just an example of doing a menu that can open and close. You can use a cookie to saved if you've closed the menu so that when you refresh the page it stays closed or you can style the menu nicely with CSS. You can also use this method for anything if you wanted from showing and hiding an image, paragraphs, forms, buttons, flash applications, etc...
You can get hold of the latest copy of jQuery from the jQuery website.