Create Vimeo-like top navigation

January 19, 2009

vimeo

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.

Download source View demo

The base for this tutorial is simple CSS drop down menu based on unordered list. The structure is visually described in the image below:

sample1

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:

sample2

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?

Let's discuss this on twitter.

109 Comments

  • Sean McArthur (January 20, 2009)

    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>

  • Karl Agius (January 20, 2009)

    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.

  • Gabe (January 20, 2009)

    FYI – doesn’t work in Opera 9.6.

  • Max Stanworth (January 20, 2009)

    Great Janko, im liking the dropdown on the search field too.

  • Alexandre (January 20, 2009)

    It’s a pity that IE6 screws up! =/

  • Raymond Selda (January 20, 2009)

    Kick ass tutorial Janko! Thank you for sharing.

  • Management software (January 20, 2009)

    @sean – i agree with you, but still quite okay better than nothing.

  • Marco (January 20, 2009)

    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!

  • Janko (January 20, 2009)

    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.

  • Evgenij (January 20, 2009)

    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.

  • Davide Espertini (January 20, 2009)

    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!

  • logo design (January 20, 2009)

    Very informative. Thank you.

  • Muhammad Mosa (January 20, 2009)

    Really good tutorial. I know writing such things takes sometime, in terms of authoring the tutorial I mean :)

  • Jozko (January 21, 2009)

    Doesn’t work in IE6 and Opera 9.6. So it’s unusable for me.

  • rgb255 Webdesign (January 21, 2009)

    I love the vimeo design. Thank you.

  • Gustavo Melo (January 21, 2009)

    Nice Tuto Janko…
    =)
    What font is that with orange color?

  • Timothy (January 21, 2009)

    Nice. Good tutorial. thanks!

  • Janko (January 21, 2009)

    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"

  • teddY (January 22, 2009)

    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!

  • Sujhon (January 22, 2009)

    Nice one…and all with CSS..I like it!

  • Janko (January 22, 2009)

    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!

  • sathish (January 23, 2009)

    Hi I like very much, But it is not work in Opera.

  • Andrew (January 24, 2009)

    Disappointing that the code does not work in the IE6, except for this – an excellent example

  • Ahmad Alfy (January 24, 2009)

    not working on opera 9.63 btw

  • Vizor (January 24, 2009)

    Very nice, good tutorial.
    Respect!

  • Arjen (January 24, 2009)

    Thanks for sharing this great piece of code!

    It’s amazing.

  • Blogfesor (January 25, 2009)

    Muy bueno el tutorial, pero me pregunto, donde van las esquinas corner_blue_right.png y corner_blue_left.png.?

  • Blogfesor (January 25, 2009)

    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.

  • Daniel G. Blázquez (January 25, 2009)

    Ops.. It does not work in Opera 9.62

  • Neil (January 26, 2009)

    Very cool, shame about IE 6, but then again, people DO need to upgrade!

  • Janko (January 26, 2009)

    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.

  • igrek (January 27, 2009)

    Very nice menu ! doesn’t work on ie6… too bad…

  • Rodney (January 28, 2009)

    Thanks for a wonderful tut. Could the same technique be used for http://aviary.com/home? any tips for this?

  • Omair Rais (January 29, 2009)

    thanks that great.

    Thanks
    Omair Rais
    http://www.omairarts.com

  • Marcus Dalgren (January 29, 2009)

    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?

  • Janko (January 30, 2009)

    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 :)

  • Bruno Wiltemburg (January 31, 2009)

    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"});
    });
    }

  • Alojaweb (February 1, 2009)

    well explained and easy to do, thanks for sharing, I’m using one of my projects.

  • Justin Lim (February 2, 2009)

    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…

  • Janko (February 5, 2009)

    Bruno, Justin: Thank you guys for your efforts to make it work in ie6. Great work!

    Alojaweb: Thanks!

  • Sanny Rizky Jatnika (February 9, 2009)

    Another Great Idea ;) nice….

    <a href="http://designerlistic.net&quot; target="_blank" >Sanny Rizky Jatnika from Indonesia </a>

  • Justin Lim (February 9, 2009)

    Rodney , I really like the top menu you have on your site aviary.com

    do you mine sharing ?

  • Brian (February 12, 2009)

    Has anyone found out how to fix the search box i have no idea why theres a problem from looking throught the code

  • dyuein (February 20, 2009)

    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!

  • Illi.Pro (February 25, 2009)

    Hey nice tutorial! thanks, it’s looks [b]so beautiful[/b] now :)!

  • Janckos (February 26, 2009)

    gracias! =D

  • Netty Gritty (March 8, 2009)

    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.

  • Janko (March 8, 2009)

    Brian: What exactly is not working?

    dyuein: I really have no idea regarding IE6

    Netty Gritty: I’m glad it helped :)

  • Neil (March 9, 2009)

    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

  • Janko (March 9, 2009)

    Neil: Oh, that’s the mirror site of my blog in my local community, but it’s not mirroring anymore :)

  • CyberFox (March 12, 2009)

    Nice One! Thanks.

  • CyberFox (March 12, 2009)

    Very Nice!

  • rehber (March 15, 2009)

    nice menu – nice tutorial [i](if i fix op-ie5&6 problems i will send)[/i]

  • sivas (March 15, 2009)

    very good, thanks

  • Barış (March 15, 2009)

    thank you i will use it

  • web design (March 16, 2009)

    Nice and Informative. Thanks for Sharing the Tutorial.

  • CSharpDummy (March 17, 2009)

    Great tutorial and nice work – keep posting informative tutorials like this one. Cheers !!!

  • b2b (March 17, 2009)

    Hi I like very much, But it is not work in Opera.

  • AL (March 19, 2009)

    THIS IS GREAT!!!.. THIS IS REALLY COOL…. Thanks for Sharing.. :)

  • denko (March 25, 2009)

    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!

  • Frankie (April 17, 2009)

    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!!

  • Janko (April 18, 2009)

    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.

  • dong pan (April 18, 2009)

    Great
    i like it
    Thank you:)

  • Alex W (April 24, 2009)

    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.

  • Hans Hendrady (May 27, 2009)

    HI Janko, nice tutorial and very neat. Thank you for sharing.

  • john (May 29, 2009)

    doesn’t work in Opera

    can u fix and update it again please ..

  • tasarhane (June 20, 2009)

    pretty nice post. thanks.!

  • Farhan (June 25, 2009)

    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

  • Nikola Ovcharski (June 30, 2009)

    I love Vimeo design :)

  • arczi (July 15, 2009)

    nice, but in ie7 not work

  • Janko (July 15, 2009)

    Thanks, everyone!

    arczi: Works fine for me, what problems do you have?

  • Bruno (July 20, 2009)

    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.

  • Manos (July 21, 2009)

    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?

  • Janko (July 21, 2009)

    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?

  • SJL Web Design (July 27, 2009)

    This is a great effect, thanks for sharing it Janko.

  • Jake Rocheleau (July 28, 2009)

    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.

  • gripnrip (July 28, 2009)

    Did anyone get this working in IE6?

    I tried and could not despite using the code supplied by Justin and/or Bruno?

  • usurio (August 1, 2009)

    ERROR CON OPERA 9.X // ERROR FOR OPERA 9.X

  • website designing (August 4, 2009)

    Can anyone help how it will work on IE6?

  • Bernardo (August 7, 2009)

    Wonderful, but it goes under flash elements. Any tip on how to work with the z-index to make it above all?

  • Denis (August 9, 2009)

    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.

  • benlong (August 9, 2009)

    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!

  • Will Kernan (August 23, 2009)

    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

  • John (August 28, 2009)

    Thats a fine looking menu… and its so simple to do.. Awesome!!!

  • James Dalton (September 5, 2009)

    This is really cool, but it does not work in Opera unfortunately

  • Levi (September 7, 2009)

    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!

  • Levi (September 8, 2009)

    It does work in Opera 9…perhaps not in older versions.

  • Webdesign Hamburg (September 18, 2009)

    Looks fantastic, thanks a lot for posting this.

  • RWH (October 6, 2009)

    Very nice tutorial Janko. Keep it up. Thanks for sharing to rest of us!

  • sb (October 27, 2009)

    in the css part:

    …#menu > li {background:…

    what does ">" mean?

  • Janko (October 27, 2009)

    sb: the rule will be applied only to immediate child elements, in this case list items

  • Rich Sturim (October 29, 2009)

    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/

  • Vernon (October 29, 2009)

    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.

  • hellboysrb (October 30, 2009)

    Care…svidja mi se ovo…samo mi nekako nedostaje malo animacije…

  • Ronald Nicholls (November 4, 2009)

    Hey i am actually implementing this into a brand new site i am making, i was wondering if i have permission to use it ?

  • Bryan (November 7, 2009)

    What a great discussion, I got a lot of things from here. Thanks.

  • Computer Blog (November 11, 2009)

    Great blog, this could be the best blog I ever visited this month. Never stop to write something useful dude!

  • Matelix (November 13, 2009)

    Wow, always wondered how they did that. This is an awesome post man.

  • Dennis (November 17, 2009)

    Hello,
    please can someone fix the "Z-index" Problem with the IE 8!?

  • Djerba (November 22, 2009)

    Very Nice Design :)

    But unfortunately we have to make it compatible with all navigators :(

    Thanks for sharing this tutorial

  • Gus (December 9, 2009)

    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??

  • Janko (December 9, 2009)

    Gus: just use z-index property

  • Mike (December 17, 2009)

    Doesn’t work in IE 2.5… Worthless.

    Seriously people, IE6 is dead. Move on.

  • Damion Hankejh (December 30, 2009)

    [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.

  • Rox (January 24, 2010)

    Nice n easy………exactly what I was looking for !!

  • kaykim (February 7, 2010)

    Is is possible to make this menu floating, so it stays visible when scrolling down the page?

  • Alexander (February 8, 2010)

    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.

  • Alexander (February 8, 2010)

    Nevermind! I solved my problem. Thank you very much for this awesome tutorial!

  • Web Catch (February 15, 2010)

    Janko, thank you for taking the time to share, this helped me out today keep up the good work!!