Tạo top menu cho trang web theo phong cách Vimeo
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 1×1px 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;}
Javascript, Lập trình web http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
Ðược xem 2516 lần, 1 hôm nay
anh hung