Create Vimeo-like top navigation

vimeo

Vimeo Menu System

I really like the top navigation implemented on Vimeo.com.
The first time I visited the site, I wanted to recreate it.  So after a bit of web searching, I found an article that was created by the clever peeps over at Janko at warp speed.

What is great about this menu is that it drops down when you hover over the search box which then offers different search options for narrowing the 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 🙂

Advertisements

~ by Simon on April 18, 2009.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: