I really like the top navigation implemented on Vimeo.com. First time I saw it I wanted to recreate it. And this is exactly what I am going to do in this tutorial.
What I like the most is the menu that drops down when you hover search box. It offers you different search options that you can choose and narrow your search.
The base for this tutorial is simple CSS drop down menu based on unordered list. The structure is visually described in the image below:
As you can see we have UL with four items. The first one is logo with short submenu. Then comes login link, Help link with submenu and search item with submenu. Each submenu is being shown when hover corresponding link.
So this is the base structure that we’ll use here:
<ul id="menu">
<li class="logo">
<img style="float:left;" alt="" src="menu_left.png"/>
<ul id="main">
<li>Welcome to <b>Create Vimeo-like top navigation</b> tutorial!</li>
</ul>
</li>
<li><a href="#">Login</a>
</li>
<li><a href="#">Help</a>
<ul id="help">
<li><a href="#">General help</a></li>
<li><a href="#">Posts</a></li>
<li><a href="#">Pages</a></li>
</ul>
</li>
<li class="searchContainer">
<div>
<input type="text" id="searchField" />
<img src="magnifier.png" alt="Search" onclick="alert('You clicked on search button')" /></div>
<ul id="search">
<li><input id="cbxAll" type="checkbox" />All</li>
<li><input id="Articles" type="checkbox" />Articles</li>
<li><input id="Tutorials" type="checkbox" />Tutorials</li>
<li><input id="Reviews" type="checkbox" />Reviews</li>
<li><input id="Resources" type="checkbox" />Resources</li>
</ul>
</li>
</ul>
<img style="float:left;" alt="" src="menu_right.png"/>
And CSS styles:
/* menu */
#menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block;
float:left; z-index:1000; }
#menu a { color:#fff; text-decoration:none; }
#menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;
padding:0px 10px;}
#menu > li a:hover {color:#B0D730;}
#menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px;
background-color:Transparent;}
/* sub-menus*/
#menu ul { padding:0px; margin:0px; display:block; display:inline;}
#menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:16px;
background-color:#172322; color:#0395CC; /* for IE */ display:none; }
#menu li:hover ul { display:block;}
#menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060;
list-style-type:none; }
#menu li ul li:first-child { border-top: none; }
#menu li ul li a { display:block; color:#0395CC; }
#menu li ul li a:hover { color:#7FCDFE; }
/* main submenu */
#menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff;
z-index:999;}
/* search */
.searchContainer div { background-color:#fff; display:inline; padding:5px;}
.searchContainer input[type="text"] {border:none;}
.searchContainer img { vertical-align:middle;}
But as you can see this is far away from the good looking Vimeo navigation. It is functional, of course, but we need that pretty rounded corners everywhere. The solution is actually simple and it is described in the image below:
Now that looks fine. What we actually did can be seen in the code below. Let’s take Help submenu for the example:
<li><a href="#">Help</a>
<ul id="help">
<li>
<img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
<a href="#">General help</a>
<img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
</li>
<li><a href="#">Posts</a></li>
<li><a href="#">Pages</a></li>
<li class="last">
<img class="corner_left" alt="" src="corner_left.png"/>
<img class="middle" alt="" src="dot.gif"/>
<img class="corner_right" alt="" src="corner_right.png"/>
</li>
</ul>
</li>
We added two absolutely positioned images inside the first LI that will create “shoulders”. Also, we added one more LI to the end of the list that contains two absolutely positioned corners and one 1x1px stretched image to fill the empty space. And this is the additional styles that you need:
/* corners*/
#menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
#menu .corner_inset_right { position:absolute; top:0px; left:150px;}
#menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px;
border:none; position:relative; border:none; height:0px;}
#menu .corner_left { position:absolute; left:0px; top:0px;}
#menu .corner_right { position:absolute; left:132px; top:0px;}
#menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;}
Now we have functional AND good looking top navigation. This might be optimized, so if you have free time or you need it for your projects, step on it. Or you can use this one as is :)
Did you implement something similar in any project? Do you find this one useful for some of your future projects?
Very nice. One thing I found annoying to myself, was that the labels for the checkboxes aren’t actual labels, so clicking them did not focus the checkbox. You could make each list item to be something like:
<li>
<label><input id="cbxAll" type="checkbox" />All</label>
</li>
Very neat! Still, I’d personally prefer to make the bottom of the menu a single css class and apply it to the last element, rather than a separate li with three distinct images. Ok, you’d need two classes really if you want to allow it to stretch, but anyway. The same could be done for the top of the menu.
Apart from personal preference though, would there be any reason to use one technique rather than the other? I suspect the way you describe here [i]is [/i]less likely to blow up across different browsers.
FYI – doesn’t work in Opera 9.6.
Great Janko, im liking the dropdown on the search field too.
It’s a pity that IE6 screws up! =/
Kick ass tutorial Janko! Thank you for sharing.
@sean – i agree with you, but still quite okay better than nothing.
Once again you’ve outdone yourselve Janko – It really looks sleek, well done.
Just 2 remarks
- I’m not a big fan of "negative margins" (Have to admit that I use them too sometimes)
- The "corners" are part of the template, not of the content. For that reason, you should create an empty element with a background-image .
Keep up the good work!
Sean: good point, I missed that :)
Karl: It’s really much more of a preference, you can achieve the same effect in several ways. If I understood correctly, your suggestion is fine as well.
Gabe: I usually don’t test my examples in Opera at all. I know, I know. I should do that, but it’s something personal between Opera and me :-D
Max: thanks, yeah, search really looks great.
Alexandre: One more reason to upgrade :)
Raymond: thanks!
Marco: thanks :) Neither am I a fan of negative margins, but it actually turned out that I use them often. Regarding corners, yeah it’s fine as well.
The list of checkboxes should rather look like this:
<li>
<input id="cbxAll" type="checkbox" /><label for="cbxAll">All</label>
</li>
This is why we need attribute "for" for labels.
Great sample Janko! :D
I’m going to use your code during the restyling of my blog, I think it’s a really beautiful menu!
Very informative. Thank you.
Really good tutorial. I know writing such things takes sometime, in terms of authoring the tutorial I mean :)
Doesn’t work in IE6 and Opera 9.6. So it’s unusable for me.
I love the vimeo design. Thank you.
Nice Tuto Janko…
=)
What font is that with orange color?
Nice. Good tutorial. thanks!
Evgenij: yeah, labels should be placed here
Muhammad: thanks :) yea it is time consuming indeed
Jozko: None of my examples are tested in IE6. For Opera, you can fix ti css if issues are minor.
Davide, rgb255, Timothy: thanks!
Gustavo: Thanks. The font used is "Kirsten"
Heya Janko, nice tutorial for the dropdown menu! It’s interesting to learn that through the pseudo-classes we can actually create basic dropdown menus without touching Javascript at all. In the past, this would have been the case! One question though – I’ve noticed this line in your CSS that takes care of the upper right inset:
#menu .corner_right { position:absolute; left:132px; top:0px;}
I checked Vimeo’s code (out of curiousity) and realized that instead of absolutely positioning the corner right with a positive left coordinate, they’ve used ‘right: -12px’ instead. Isn’t that a better way to position the upper right inset to ensure fluidity of the menu, such that it doesn’t look weird when the menu is forced to be wider?
Just two cents of mine though. Thanks for sharing again!
Nice one…and all with CSS..I like it!
teddy: Actually I recreated this without copying the exact Vimeo code, but rather writing my own. Since I hardcoded the width of submenus I wasn’t thinking of the fluidity. I could have done it the same, but then it wouldn’t be that funny. Anyway, you’re right about this, it would be more flexible if not hardcoded. Thanks!
Sujhon: thanks!
Hi I like very much, But it is not work in Opera.
Disappointing that the code does not work in the IE6, except for this – an excellent example
not working on opera 9.63 btw
Very nice, good tutorial.
Respect!
Thanks for sharing this great piece of code!
It’s amazing.
Muy bueno el tutorial, pero me pregunto, donde van las esquinas corner_blue_right.png y corner_blue_left.png.?
Great!!!!.
Ya lo conseguí, miré en el index.html de los archivos de descarga y ahí se está especificado donde colocar las imágenes que me faltaban.
Muchas Gracias.
Thank you.
I saw the files and I do it.
Ops.. It does not work in Opera 9.62
Very cool, shame about IE 6, but then again, people DO need to upgrade!
sathish, Ahmad, Daniel: Yes it doesn’t work in Opera neither in IE6, I never test my examples in those two browsers.
Andrew : Thanks. Anyway I decided to drop the support for IE6 ;)
Vizor, Arjen: Thanks!
Blogfesor: Glad you made it. :)
Neil: Shame maybe, but yes – people really need to upgrade.
Very nice menu ! doesn’t work on ie6… too bad…
Thanks for a wonderful tut. Could the same technique be used for http://aviary.com/home? any tips for this?
thanks that great.
Thanks
Omair Rais
http://www.omairarts.com
Really cool effect but like some other people say, shame about it not working in IE. I have not looked at the code for Vimeos solution but their solution works fine in IE as well. Do you know if it works because they’re javascripting it or if they’ve simply found a CSS solution that works?
igrek, Omair: Thanks!
Rodney: Thanks. I can’t load aviary.com, but it could be just my damn connection ;)
Marcus: I didn’t get that deep into their code, but I guess they just have a different CSS :)
Thanks for the tip.
I managed to make it work in IE 6. Using Javascript …
I used JQuery for this example but may be using any library.
if($.browser.msie && parseInt($.browser.version) < 7){ //Test if is IE < 7
$("#menu li ul li:first").css({"border-top": "none"}); //Drop border from first element
$("#menu li").mouseover(function(){ //Show submenus
$(this).find("ul").css({"display" : "block"});
}).mouseout(function(){ //Hide submenus
$(this).find("ul").css({"display" : "none"});
});
}
well explained and easy to do, thanks for sharing, I’m using one of my projects.
I fixed the IE issue with the following code
[quote]
<script language="JavaScript">
window.onload = function()
{
var lis = document.getElementById(‘menu’).getElementsByTagName(‘li’);
for(i = 0; i < lis.length; i++)
{
var li = lis[i];
if (li.className == ‘main’)
{
li.onmouseover = function() { this.getElementsByTagName(‘ul’).item(0).style.display = ‘block’; }
li.onmouseout = function() { this.getElementsByTagName(‘ul’).item(0).style.display = ‘none’; }
}
}
}
</script>[/quote]
if someone want to take a stab at fixing the look for the search box…
Bruno, Justin: Thank you guys for your efforts to make it work in ie6. Great work!
Alojaweb: Thanks!
Another Great Idea ;) nice….
<a href="http://designerlistic.net" target="_blank" >Sanny Rizky Jatnika from Indonesia </a>
Rodney , I really like the top menu you have on your site aviary.com
do you mine sharing ?
Has anyone found out how to fix the search box i have no idea why theres a problem from looking throught the code
I can’t seem to get this to work using either Bruno or Justin’s given code in IE6 … is there something else that I’m missing? (I tried both separately and in combination on the given files to no avail).
The result is that it simply shows the Janko logo and the far right end of the menu — no buttons in between.
Any help would be appreciated!
Hey nice tutorial! thanks, it’s looks [b]so beautiful[/b] now :)!
gracias! =D
What???? No js? And yet I get such a wonderful drop-down menu? Janko, I have been looking for something like this for ages for my yet-to-be-born photoblog. Thanks for this rocking post.
Brian: What exactly is not working?
dyuein: I really have no idea regarding IE6
Netty Gritty: I’m glad it helped :)
Hey Janko, is this legit, or do you have a screen scraper – http://msforge.net/blogs/janko/archive/2009/01/19/create-vimeo-like-top-navigation.aspx
Neil: Oh, that’s the mirror site of my blog in my local community, but it’s not mirroring anymore :)
Nice One! Thanks.
Very Nice!
nice menu – nice tutorial [i](if i fix op-ie5&6 problems i will send)[/i]
very good, thanks
thank you i will use it
Nice and Informative. Thanks for Sharing the Tutorial.
Great tutorial and nice work – keep posting informative tutorials like this one. Cheers !!!
Hi I like very much, But it is not work in Opera.
THIS IS GREAT!!!.. THIS IS REALLY COOL…. Thanks for Sharing.. :)
Does anyone have any idea how to implement a third level in this menu, probably one that slide to the right?
Thank you for the great tut!
Hi! I was wondering if you could help me a bit. I’m trying to center the navigation bar, inside a DIV but I just can’t get it to work. Or maby I’m changing the wrong things. I’ve been googling all day or a answer and I’ve found that in some cases you just have to put text-align:center; in the ul to work.. but that does not seem to work here… help pleeease!!
Thanks, everyone!
denko: Nest more UL’s inside the existing lists. Here is a good reading: http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html
Frankie: You just set "tex-align: center;" for <body> and "margin: 0px auto; width:500px;" for navigation div. In this example it’s 500px, set this value differently.
Great
i like it
Thank you:)
God, I nearly broke my mind thinking how to do such a menu and you already have it. Thanks a lot for the solution and the tutorial.
HI Janko, nice tutorial and very neat. Thank you for sharing.
doesn’t work in Opera
can u fix and update it again please ..
pretty nice post. thanks.!
Hi there, can somebody tell me how make dropdown menu in columns and how http://www.ge.com/ made their menu in columns and put images. Is there any specific name for this technique?
Thanks
Farhan
I love Vimeo design :)
nice, but in ie7 not work
Thanks, everyone!
arczi: Works fine for me, what problems do you have?
Hi all.
Janko, I’ve been following your blog for a while but just decided to post. Congrats. This is great information and I really enjoy your tutorials.
I am using this navigation style, although quite modified visually, and I need to have it centered, and I’m having some issues with that. I tried your suggestion above and I couldn’t get it centered. Any ideas?
Thanks. Bruno.
Incredibly useful tutorial! Thank you a lot.
However, when I use it outside he demo page you include in the source files, the first menu items except the last one disappear when you move the mouse under the top level item. Why’s that happening?
Bruno: I am not sure why the fix for centering doesn’t work. Do you have any different styles for positioning or floating?
Manos: Hm, strange. Which browser do you use?
This is a great effect, thanks for sharing it Janko.
This is sweet! I’m a huge fan of Vimeo’s design, and I think this is an amazing tutorial to mimic some very creative and talented designers.
Did anyone get this working in IE6?
I tried and could not despite using the code supplied by Justin and/or Bruno?
ERROR CON OPERA 9.X // ERROR FOR OPERA 9.X
Can anyone help how it will work on IE6?
Wonderful, but it goes under flash elements. Any tip on how to work with the z-index to make it above all?
Hey, great article. I’ve spent the last 5 hours deconstructing this and reimplementing it how I like. I’ll post a link to my finished project for everyone once it’s finished in a few days. I would have to say I’m not a fan of images in html that are only for styling. This and a few other personal preferences are the only readl changes I’m going to make. Thanks again for your time putting the article together.
For all those stressing about the IE6 issue: I can relate. But put some effort in yourself and you’ll get some ways around everything if your willing to accept so JS for the idiots still in IE6.
Well, the navigationBar couldn’t display well in IE 6. I think the css is something wrong. Could you give me some advice. Please communicate with me via my email. Thank you!
I’m sure this is a dumb question, but how do you make the whole thing centered instead of having it "margin-left:50px;"? Could someone post the code for doing that??
Thanx,
Will
Thats a fine looking menu… and its so simple to do.. Awesome!!!
This is really cool, but it does not work in Opera unfortunately
I had an interesting time getting the dropdown menu to show on top of a fadeshow I was implementing recently. After looking through the code more closely I found that "position:relative" needed to be added to the "#menu" section of the css to make the z-index work correctly.
This is an AMAZING dropdown, and I could not be happier with the results. Mad props guys!
It does work in Opera 9…perhaps not in older versions.
Looks fantastic, thanks a lot for posting this.
Very nice tutorial Janko. Keep it up. Thanks for sharing to rest of us!
in the css part:
…#menu > li {background:…
what does ">" mean?
sb: the rule will be applied only to immediate child elements, in this case list items
right … this could be the crux of the IE6 problems, as IE6 it does not recognize "Child Selectors"
http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/
Noticed Opera 9 users were having problems. It doesn’t work in Opera 10 either. Big white space beneath the search box like the background isn’t extending right or something.
Care…svidja mi se ovo…samo mi nekako nedostaje malo animacije…
Hey i am actually implementing this into a brand new site i am making, i was wondering if i have permission to use it ?
What a great discussion, I got a lot of things from here. Thanks.
Great blog, this could be the best blog I ever visited this month. Never stop to write something useful dude!
Wow, always wondered how they did that. This is an awesome post man.
Hello,
please can someone fix the "Z-index" Problem with the IE 8!?
Very Nice Design :)
But unfortunately we have to make it compatible with all navigators :(
Thanks for sharing this tutorial
Hey Janko , I used a form of your tutorial ( mouse over BUSCAR evento ) and i encountered a problem
in IE 8 and FF mouse over BUSCAR evento in this link
http://www.gotickets.com.br/default.asp?mode=newuser
See how the other class cuts through it !???? any idea why this is happening??
Gus: just use z-index property
Doesn’t work in IE 2.5… Worthless.
Seriously people, IE6 is dead. Move on.
[b]@Janko:[/b] Excellent post — thanks for sharing.
[b]@Mike:[/b] IE6 is dead? What planet on you on? As of this year IE6 still comprises nearly 13% of global market browser share — or millions of users. I’m no fan of IE6, but for many sites it doesn’t make sense to ignore users numbering in the millions.
Nice n easy………exactly what I was looking for !!
Is is possible to make this menu floating, so it stays visible when scrolling down the page?
I have a problem with this when I try to put it in my site. The HTML is http://pastebin.com/m70d91fab. The CSS is http://pastebin.com/m454dd84e. I put it in a divtag. It shouldn’t be any problem right?
The problem is that the submenues does not show. I have tried to fix it but I don’t really know how. Can anybody please help me or at least give me some advice? Thank you.
Nevermind! I solved my problem. Thank you very much for this awesome tutorial!
Janko, thank you for taking the time to share, this helped me out today keep up the good work!!