Flickr like horizontal menu

Do you like Flickr and its simple and clean interface?

This tutorial explains how to implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu:

Download this tutorial

Step 1: introduction
I used a simple javascript function showMenu() to show/hide sub-menu:

function showMenu(id_menu){
var my_menu = document.getElementById(id_menu);
if(my_menu.style.display=="none" || my_menu.style.display==""){
my_menu.style.display="block";
} else {
my_menu.style.display="none";
}
}

...take a look at this post for more infos about this function.

Step 2: HTML menu structure
The menu structure is the following:


...with sub-menu contained inside <li> element and (for default) with CSS display property set to "none";

HTML code is like this:

<ul>
<li class="menu" id="profile"><span><a href="index.html">Profile</a> <img src="arrow.png" name="arrow_profile"></span>
<!-- Submenu -->

<div class="sub_menu" id="id_menu_profile">
<a href="index.html">Modify Profile</a>
<a href="index.html">Contact List</a>
<a href="index.html">Add photo</a>
<a href="index.html">class="item_line">Invite your Friends</a>
<a href="index.html">Invite History</a>
<a href="index.html">Guest Pass History</a>
</div>

</li>
</ul>

To try it download the package!

Download this tutorial