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 tutorialStep 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";
}
}
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 -->
</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><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>
</ul>
To try it download the package!
Download this tutorial
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Old Comments
Nice work here! Thanks :)
Semantically spoken, the submenu should be a lis.
Instead of <div class="sub_menu">, it will be better IMHO to have <ul class="sub_menu"> followed by items, so the hierarchy will be semantically more evident. Again thank you! Keep your experiments coming!
very nice!
may i please request a post about how you would tackle flyout and 'suckerfish' menus? Every try having to put one in a table cell?
Please keep up the good work.
excellent tutorial, thx!
awesome tutorial thx!!!
Thank you very much! But, when I try to have more than one menu item like this (one more li) right next to Profile, and when I click to show the submenu, the next top menu item jumps underneath the submenu.
The way it is now, I can only have 1 menu item.
Can you fix it to enable a real menu bar with several items and submenus?
Take a look at this post of Cristian Neagu which solve some issue on my original post:
http://www.candesprojects.com/downloads/flickr-horizontal-menu/
Nice work,
i have used this one of my projects and work fine...
Thanks once again
Could you tell me how to get the menu to drop down when you hover over the menu header and not just when you click the arrow
NICE TUTORIAL!
Very interesting and useful informations.
This looks good! Really good tutorial include so many helpful informations!
Excellent SITE. I will refer people to your ITEMS.
Cheers
Thank You Woork for this article
very nice!
Thank so much.
really very knowledgeable tutorial.
helpfull and very interesting
Thanks
I thought menus such as in flickr and linkedIn would require loads of JS, tables inside LI and css
Cheer