Expanding Menus
Expanding menus and boxes are becoming increasingly popular on website layouts. Now learn how you can create your own.
The markup for expanding menus
The html markup for this is actually pretty simple. Its just a couple of nested lists with hyperlinks.
<ul>
<li id="tutorioli">
<ul>
<li><a href="http://www.tutorio.com/">View All</a></li>
<li><a href="http://www.tutorio.com/webmaster/1-Announcements">Announcements.</a></li>
<li><a href="http://www.tutorio.com/webmaster/5-Featured">Featured.</a> </li>
<li><a href="http://www.tutorio.com/webmaster/6-Linkage">Linkage.</a> </li>
</ul>
</li>
<li id="tutorialsli">
<ul >
<li><a href="http://www.tutorio.com/webmaster-tutorials/">View All</a></li>
<li><a href="http://www.tutorio.com/free/11-Clientside-tutorials">Clientside.</a></li>
<li><a href="http://www.tutorio.com/free/7-Flash-tutorials">Flash.</a></li>
<li><a href="http://www.tutorio.com/free/10-Marketing-SEO-tutorials">Marketing-SEO.</a></li>
<li><a href="http://www.tutorio.com/free/8-Photoshop-tutorials">Photoshop.</a></li>
<li><a href="http://www.tutorio.com/free/9-Serverside-tutorials">Serverside.</a> </li>
</ul>
</li>
</ul>
Now what we need to do is to hide and show the lists using javascript
Javascript to hide and show lists
Javascript can be used to manipulate the 'display' style of the list, by default this property is set to display:block (display's normally). However it can be set to display:none (hidden). You can change the display type manually using css, or you can use javascript to turn the visibility of the menus on and off.
Here's an example of how a very simplified version of how the function to toggle visibility with javascript could work.
<script type="text/javascript">
function switchit(list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
else {
listElementStyle.display="none";
}
}
</script>
Now to toggle the visibility of the 'tutorialsli' list i would just insert an anchor tag that looks like this.<a href="javascript:switchit('tutorialsli')">Tutorials</a>
Example 1
Click on the links to make them expand
Explanation
The function switchit basically checks if the list with a given id is set to display:none or display:block then it switches the value back and forth.
The function is called whenever the link 'tutorials' is clicked, and in the example given above it would hide and open the list with the id 'tutorialsli'.Improvements
Right now the whole thing looks kind of ugly but its easy to make it look better with css. And now that you have learnt the basics you can apply this to more complicated examples.Such as the Stylish Expanding Menu Example.
Further more you can use the techniques from the Pure Css Image Rollovers tutorial to spice up the expandable menus.
