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";
}
}
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
Antonio Lupetti
6 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/
Post a Comment