This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Sunday, January 27, 2008

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

blog comments powered by Disqus
Cafefort said...

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!

Caustic Dave said...

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.

Denis said...

excellent tutorial, thx!

Nitos said...

awesome tutorial thx!!!

BilloBallo said...

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?

Antonio said...

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/

Naseer Ahmad Mughal said...

Nice work,

i have used this one of my projects and work fine...

Thanks once again

Samuel said...

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

coving said...

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

Karbonizma said...

Thank You Woork for this article

TG Holiday said...

very nice!
Thank so much.

Neha said...

really very knowledgeable tutorial.

rubbish clearance london said...

helpfull and very interesting

Skillipedia said...

Thanks

I thought menus such as in flickr and linkedIn would require loads of JS, tables inside LI and css

Cheer

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News