I have start my menu from “Flickr like horizontal menu” and I improved it because it has a bug in the css. You can’t add more menu items on a line.This horizontal menu that I want to show is used also by many well know websites as Facebook, LinkedIn and Flickr.

I made a very nice, simple and useful menu, developed with jQuery. If we can use js framewords why not, jQuery it’s very easy to use for traversing the DOM. The menu can be very easy implement with Prototype, MooTools or basic javascript functions.

I’m open for comments and suggestion so please add your comment.

View demo or Download the source code

1. jQuery Tutorials for Designers | Candes Projects | Cristian Neagu - Web designer & developer on February 29th, 2008 at 4:57 pm

   […] can check also my Flickr menu, that is build also on […]
2. Antonio Lupetti on March 7th, 2008 at 1:57 pm

   Hi Christian, thanks for this update! I’ll add a link at this post from the original post:
   http://woork.blogspot.com/2008/01/flickr-like-horizontal-menu.html

   Have a nice day.
   Antonio.
3. greg on March 12th, 2008 at 2:56 pm

   I would like to close the submenu when I click outside the menu.

   Do you how to do this ?

   Thx
4. admin on March 12th, 2008 at 3:25 pm

   Hi Greg,

   Here is the answer to your question. Just add the following lines at the end of the javascript code and before the $(document).ready is close:

   $(document).click(function(event){
        var target = $(event.target);
        if (target.parents("#nicemenu").length == 0) {
              $("#nicemenu span.head_menu").removeClass('active');
   	   $("#nicemenu div.sub_menu").hide();
   	   $("#nicemenu img.arrow").attr('src','arrow.png');
        }
   });
   

   So, when you click outside the menu I check that is the click is not on elements that are in the menu.

   I update also the tutorial demo!
5. greg on March 12th, 2008 at 3:30 pm

   Waouw. You’re Speedy Gonzales ;)

   Thank you verry much.
6. admin on March 12th, 2008 at 3:32 pm

   You are welcome!
7. jm on March 12th, 2008 at 4:44 pm

   Everything is there to make a jquery plugi !

   Thanks for the changes made for greg (my bro). It works great !
8. admin on March 12th, 2008 at 5:15 pm

   Yes, I will think to make a plugin. Looks that people are realy like the feature.
9. goldmann on March 13th, 2008 at 11:59 am

   Simply wonderful! Thank you!
10. Jonh on March 17th, 2008 at 3:45 pm

    Did you comment that it can be implement with Prototype or Javascript. Please, can you paste the code in Javascript? Thus the menu doesn’t depent of any external library and will work in any proyect.

    Many thanks and congratulations.
11. jm on March 19th, 2008 at 1:42 pm

    Hi and thanks again

    There is a problem with the menu over any image under the submenu (with IE6 and IE7)

    The menu is hidden by the image. Have tried a lot of css stuff (z-index,…).

    Do you have any idea what the problem may be ?
12. admin on March 20th, 2008 at 3:58 pm

    I think the answer to your question is to change the z-index to the menu container (div.nicemenu). For example add the property” “z-index:100″ to div.nicemenu
13. Vicent Gozalbes on March 22nd, 2008 at 9:44 am

    Hello, following your suggestions, I write the same menu using DOM.

    http://vicentgozalbes.com/2008/3/21/men-u-horizontal-al-estilo-flickr-o-facebook

    Thanks.
14. links for 2008-03-24 on March 24th, 2008 at 10:18 pm

    […] Flickr horizontal menu | Candes Projects | Cristian Neagu - Web designer, developer I have start my menu from Flickr like horizontal menu and I improved it because it has a bug in the css. You can’t add more menu items on a line.This (tags: code flickr menu navigation) […]
15. Herr.Vorragend on March 25th, 2008 at 9:51 pm

    Hi, great work.
    Does anyone converted this script to prototype? I don’t know how to do it :-)
    Thanks a lot.
16. admin on March 25th, 2008 at 10:00 pm

    If you can wait one more week I can provide you the code with Prototype.
17. Herr.Vorragend on March 25th, 2008 at 11:22 pm

    Wow. That would be perfect.
    I can wait ;-)
    Thx
18. Herr.Vorragend on April 1st, 2008 at 3:28 pm

    Hi,
    sorry. I don’t want to bother you. :-)
    But do you already have a prototype-solution? Would be very nice of you. Thank you.
19. Federico on April 20th, 2008 at 10:04 pm

    Hi, I ported your nice menu to prototype. Those interested can find it here http://igorstravinskij.blogspot.com/2008/04/flickr-horizontal-menu-with-prototype.html
20. admin on April 21st, 2008 at 9:05 am

    Great! It looks good :)
21. -CP- on April 26th, 2008 at 2:02 pm

    What does this do? Why is it required?
    http://code.jquery.com/jquery-latest.pack.js
22. admin on April 26th, 2008 at 5:16 pm

    It loads the latest version of jQuery.
23. Bill on April 27th, 2008 at 10:46 pm

    Great script, I love it… But how can I change the fade in effect to no fade at all?
24. admin on April 28th, 2008 at 8:59 am

    Just replace in the source code the “.fadeIn()” with “.show()”, everywhere.
25. Sean on May 4th, 2008 at 5:39 am

    Hi, I have 2 menus on the same page, when I expand the top one, it will overlap the second one, the second one will show on top of sub_menu expanded from the first menu… I tried with css z-index, but it didn’t work.
26. admin on May 4th, 2008 at 8:21 am

    Try to change the z-index to the menu container in my example div #nicemenu. The first one should have for ex. z-index:101 and the second one z-index:100.
27. André Beaudry on May 4th, 2008 at 5:19 pm

    Hi, I would like to know why :

    $(”#nicemenu span.head_menu”).mouseover(function(){
    $(this).addClass(’over’)
    })
    .mouseout(function(){
    $(this).removeClass(’over’);
    });

    does the same as

    $(”#nicemenu span.head_menu”).mouseover(function(){
    $(this).addClass(’over’)
    });
    $(”#nicemenu span.head_menu”).mouseout(function(){
    $(this).removeClass(’over’);
    });

    there something here with javascript syntaxe ???
    I prefer writing explicite statement, but your version seam’s to exploit a not decommented behaviour or I’ve got something to learn her ???

    tx
    form St-Hippolyte / Québec
28. admin on May 4th, 2008 at 7:04 pm

    Yes, it does the same.
    Basic I just get the object $(”#nicemenu span.head_menu”) once, and applied the behaviors. What you suggest is to select the object twice and apply the behavior. If you do my way you save some power.