Flickr horizontal menu
Posted on February 29th, 2008, by Cristian in Downloads, Tutorials, Xhtml & CSS
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
Update – 22.11.2008 – If you want to use the menu with MooTools there is … MooFlickrMenu … enjoy it!
[...] can check also my Flickr menu, that is build also on [...]
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.
I would like to close the submenu when I click outside the menu.
Do you how to do this ?
Thx
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!
Waouw. You’re Speedy Gonzales ;)
Thank you verry much.
You are welcome!
Everything is there to make a jquery plugi !
Thanks for the changes made for greg (my bro). It works great !
Yes, I will think to make a plugin. Looks that people are realy like the feature.
Simply wonderful! Thank you!
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.
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 ?
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
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.
[...] 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) [...]
Hi, great work.
Does anyone converted this script to prototype? I don’t know how to do it :-)
Thanks a lot.
If you can wait one more week I can provide you the code with Prototype.
Wow. That would be perfect.
I can wait ;-)
Thx
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.
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
Great! It looks good :)
What does this do? Why is it required?
http://code.jquery.com/jquery-latest.pack.js
It loads the latest version of jQuery.
Great script, I love it… But how can I change the fade in effect to no fade at all?
Just replace in the source code the “.fadeIn()” with “.show()”, everywhere.
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.
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.
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
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.
$(document).click(function(event){
This line doesn’t work when I test it in Safari or IE.
However, it works when I change it to
$(“body”).click(function(event){
Just FYI.
Hi! this is great!
I was needing something like that, but i added a few lines, so, if i don’t have a link in the parent item, i can click and the submenu was displayed as well (sorry for my english!).
In this case, the html, instead of “a” tag i used “span” with class “arrow” and added these lines:
$(“#nicemenu span.arrow”).click(function(){
$(“span.head_menu”).removeClass(‘active’);
submenu = $(this).parent().parent().find(“div.sub_menu”);
sister = $(this).parent().find(“img.arrow”);
if(submenu.css(‘display’)==”block”){
$(this).parent().removeClass(“active”);
submenu.hide();
sister.attr(‘src’,'arrow_hover.png’);
}else{
$(this).parent().addClass(“active”);
submenu.fadeIn();
sister.attr(‘src’,'arrow_select.png’);
}
$(“div.sub_menu:visible”).not(submenu).hide();
$(“#nicemenu img.arrow”).not(sister).attr(‘src’,'arrow.png’);
})
.mouseover(function(){ sister = $(this).parent().find(“img.arrow”);
sister.attr(‘src’,'arrow_hover.png’); })
.mouseout(function(){
sister = $(this).parent().find(“img.arrow”);
if($(this).parent().parent().find(“div.sub_menu”).css(‘display’)!=”block”){
sister.attr(‘src’,'arrow.png’);
}else{
sister.attr(‘src’,'arrow_select.png’);
}
});
The result is here:
http://usuarios.cnba.uba.ar/~anita/FlickrMenu/
(The parent item is “You”, and I leave the item without style, so you can see the difference)
Bye!
Thank you kindly for sharing this code, it works amazingly well.
One question though if I may — is it possible to have the dropdowns show on hover instead of click? Not just on the arrow but when you hover over the entire …? I haven’t been able to figure out how to do this.
Thanks kindly
If you want to show the dropdowns on hover just change the event from click -> mouseover
form: $(“#nicemenu img.arrow”).click(function(){ …
to: $(“#nicemenu img.arrow”).mouseover(function(){ …
Thank you Cristian, that certainly worked.
I don’t want to abuse your kindness, but I tried to extend the mouseover version even more by setting it up so that the dropdown hides when you mouseout. But I’m new to jQuery so I was unsuccessful. Any ideas what might be wrong with this:
$(“div.nicemenu”).mouseout(function() {
$(“#nicemenu span.head_menu”).removeClass(‘active’);
$(“#nicemenu div.sub_menu”).hide();
$(“#nicemenu img.arrow”).attr(‘src’,'img/arrow.gif’);
})
Also, I know this might be asking for a lot because of the way it’s coded, but is there any way to make the dropdown show when you mouseover span.head_menu? When I did that in the code, ALL of the span.head_menu’s popped open. Am I right in presuming that getting this to work properly would require far more code than this?
Thanks kindly
Yes, it does, and honestly I don’t have time right now to help you.
Oops, please disregard my previous post, there seems to be some strange kind of bug. Will update if I can fix it.
Absolutely SWEET menu, thanks for sharing!
that’s a nice menu, tnx for sharing!
Can some one post a version of this that works in most browsers. I have tried to do some of the suggestions above to get it to work in safari but I have had no luck.
Any help is appreciated
@Pete
What problems do you have with the menu? I tried the menu in safari and works fine.
Maybe I can help you.
Thanks
Great! Thanks!
is there a license associated with this? can we use it in our site?
No, there is no license for this. You can use on your website … And can you tell me on which website are you going to use, just to have a example for the “Who is using it” section.
Tks,
Cristi
thanks, still working on it, I will let you know.
[...] Enlace: Descargar Menu Horizontal de Flickr [...]
[...] y usabilidad En esta ocasión nos trae un interesante menú horizontal al estilo Flickr. Este Flickr Horizontal Menu es muy sencillo y está completamente desarrollado con JQuery. El menú puede ser implementado con [...]
[...] by Cristian at candesprojects.com free for download an with demo on line. This style is so similar as Flickr menu style. I was [...]
Is it possible to use it twice in the same page.
The second one doesnt seem to work.
We use it in http://www.yakamusic.com
It’s good to see that people are using it. Yes you can use it twice in the same page.
If I use two times id=”nicemenu” the second one isn’t working
Don’t use the id twice. Use for the second menu for ex nicemenu_second, and initiate the menu on that $(‘#nicemenu_second’) { …. }
So I have to duplicate all the js and the css ?
[...] Flickr horizontal menu | Candes Projects | Cristian Neagu – Web designer, developer (tags: css flickr javascript menu) [...]
Yes! My bad … I will make a plugin from this ….
Nice work,
i have used this one of my projects and work fine…
Thanks once again
I like your menu but it stops working for me on IE7(Vista) and Firefox 3(Linux), and also, Firefox 2 on Vista. I’m not an expert on jquery. Firebug tells me that the error is:
$is no defined
$(document).ready(function(){
Do you have any suggestion or any clue of what could be going on?
I’m trying to port this to YUI without much success.
Anyone already done this? Or willing to help out?
Thanks!!
@Danie, I think you haven’t include the jQuery.
[...] http://www.candesprojects.comFormat: CSSDownload Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte [...]
[...] Improved menu with drop downs (concept borrowed from Flickr; code courtesy of Candes) [...]
Candes already picked up my blog entry. But, I just wanted to let you know how appreciative I am of this code for use. We will be using with the new design and I am sure it is going to make our site navigation very easy. Also, it makes our life easy to build the menu. The menu that we have right now (image based) is pretty rigid.
Again, BIG thanks!
Best
Collagist
[...] Flickr horizontal menu Si vous aimez le menu de navigation déroulant de Flickr, alors cette ressource va vous plaire ! Il s'agit en effet d'un zip à télécharger contenant un menu fonctionnel ressemblant à celui de flickr [...]
[...] Menu horizontal de Flickr para tu pagina Si te gusta el menu que presenta Flickr en la parte superior, este script te viene perfecto, es un menu horizontal desarrollado con jQuery, sin embargo es f
quick question…..I’m plugging this into a wordpress theme and having trouble in IE 7 (haven’t tried IE6) when my dropdown links are list items:
`Link`
I’m generating the list using the list_categories function, which creates the list items. Is there a possible fix?
Did you already have time to make the jquery plugin ?
Nice work Thank you Cristian,
The Ani7a vesrion is very interesting, but it doesn’t work well on Intrenet Explorer
So is there a solution to have the same result like on Mozilla Firefox
Thanks
This menu doesn’t look so great using Chrome.
The span padding (I believe) in Safari and Chrome don’t work.
Here’s the fix for the padding issue. Of course, I don’t know what this fix may have broken, but it now works in all the browsers I’ve tested using Windows XP.
http://csscreator.com/node/32418#comment-137023
[...] merkezide ise burası. Bu menünün nasıl yapıldığını merak ediyorsanız 15 dakikanızı ayırarak buradaki yazıya [...]
[...] 老的Flickr Menu：http://www.candesprojects.com/downloads/flickr-horizontal-menu/ [...]
[...] Neagu yang memanfaatkan jQuery sehingga hasilnya lebih sempurna. Demo dan tutorialnya bisa dilihat di sini. Saya suka style menu yang satu ini, simpel dan [...]
[...] un menu JQuery à la Flickr que l’ont peut trouver à cette adresse: http://www.candesprojects.com/downloads/flickr-horizontal-menu/ ce menu est esthétique, pratique et nécessite moin d’espace [...]
Awesome menu, just what I was searching for. Wondering can this be made to work like gmail label & move to menus. anyone tried it?
how do i get to make a hover link that works with both opera and IE7?
[...] – Create a dynamic FAQ: open link - Dynamically add an icon for external links: open link – jQuery Google feed plugin: open link - jwysiwyg text editor plugin: open link – jquery corners plugin: open link – Create a flickr style horizontal menu: open link [...]
about the guy who had problems with the display of the menu behind images.
I use z-index:100 (o wathever you want), and the put position:absolute; like this:
#nicemenu{z-index:100; position:absolute;}
that solve the problem
cheers!
well the #nicemenu{z-index:100; position:absolute;} just worked in FF, but in IE doesn´t work. :S
the problems appear when i set a a div with rounde corrners and wrap the corners with jquery ;S, i don’t know how to solve it :S
ok i auto solve the problem (i like to speak against me), the content of the drop down is overlapping an image in other content so the solution is to put the content of the drop down with z-index:-1 for example.
Cristian, we have sucessfully used your code on our site http://www.akamusic.com. Thanks for the great work. I today posted a google code project as I lifted it out to a jquery-plugin. you can find the project here: http://code.google.com/p/flickr-like-menu/
All comments and discussions are welcome..
Thank you!!!
Is there a way to make the drop down appear by clicking on the menu text (and not just on the triangle)?
Hi Christian,
Thanks alot for this post. You’ve done a wonderful job.
Hello! This menu is very nice, but I have some trouble with it. Here you can see that. Aaand I have a question: whats this? :))
Hi.. Nice post.. Just wondering.. how can I adjust to make it the menu in vertical way…
Thanks.
hey everyone, thanks for this.. just one issue, when I install this on my wordpress theme, it totally breaks my layout – I think it has something to do with the width or padding or something….. is it possible to seperate the css code or something entirely from my wordpress theme so maybe it won’t break it?
I guess this menu uses common code that already my wordpress theme uses for layout. thanks.
Hi,
great work. But what i want to know is – can i make more than one submenu? May i need a sub nmenu under a sub menu.
example:
top
–> sub1
—> sub2
Thanks and best regards,
Donny
Have a look at http://code.google.com/p/flickr-like-menu/ which is a jquery plugin for this menu.
Hi Christian,
thanks but what i miss a sub menu unter a submenu. I have a horizontal structure with 5 op levels and each of them has 4 submenus and within the submenus there are again 2 sublevels. Like a tree structure. Your plugin shows als only 1 submenu. Or am i wrong?
Best regards,
Donny
Yes, is tru the plugin doesn’t support that. But also I think that you are able to control level 2 submenus, just from CSS.
tks you beatıful
Excellent, but I have a problem. The submenu it shows behind of swf, how can I fix that? I tried with z-index but it doesn’t works.
thanks a lot
[...] Flickr horizontal menu | Демо версия [...]
[...] to Make a Slideshow with a Transparent PNG FrameSimple Toggle with CSS & jQueryCaptifyFlickr Horizontal MenuEncyPlayer – jQuery Fancybox and Flowplayer IntergrationAlso noted that in the article, each [...]
Hello, this menue is great, but i noticed that it does not work in Opera perfectly. The “hover” style for the a-tags do not work. Does anyone have an idea ?
Is there any way to fit the submenu elements to the widthest element in each one?
I don´t know if I make myself clear (sorry for my english) but what y need is that if I have a submenu with one or two little words, that specific submenu adjusts to its width.
Thanks in advance!
[...] [...]