Делаем меню как на Vimeo.com
Мне очень нравится меню на Vimeo.com. Первый раз, когда я увидел его, захотел сделать нечто подобное. И именно этим мы займемся в этом уроке. Больше всего мне нравится, когда при наведении на поиск оно выпадает вниз с различными вариантами поиска, из которых вы можете выбрать подходящее и сузить область поиска.
Основой этого урока является простое выпадающие меню.
Его структура наглядно описано в изображении ниже:
Как видно на схеме все меню состоит из четырёх пунктов:
1.Логотип с коротким подменю
2. Ссылка на вход
3. Помощь с подменю
4. Поиск по сайту с подменю, в которых можно выбрать тематику поиска.
Подменю будет показаны, как только вы наведёте на соответствующую ссылку.
Таким образом, базовая структура, будет выглядеть, как показано ниже:
<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"/>
CSS Стиль:
/* 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;}
Но, как вы видите пока не очень похоже на навигацию Vimeo, очень не хватает закруглённых углов в подменю, без них все смотрится квадратно.
Решение на самом деле очень простое его видно на изображении ниже:
Ну вот с такими углами будет выглядеть намного лучше.
Давайте рассмотрим на примере подменю раздела Помощь:
<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>
Мы добавили два абсолютно позиционированные изображения внутри первого LI , которые будут создавать так называемые плечи (”shoulders”).
<img class=”corner_inset_left” alt=”" src=”corner_inset_left.png”/>
<img class=”corner_inset_right” alt=”" src=”corner_inset_right.png”/>
Кроме того, мы добавили еще один LI к концу списка, который содержит два абсолютно позиционируемые угла и одно изображение 1×1px, чтобы заполнить пустое пространство.
<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 id=”main”> и <ul id=”search”>
Это дополнительные стили, которые вам необходимы:
/* 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;}
Вот и все, у нас получилось меню по функционалу похожее на то, что у vimeo, вы можете свободно доработать его под существующие проекты или использовать как есть. К сожалению, у меня не получилось откорректировать его для Opera, во всех остальных браузерах работает без проблем.
Связанные записи
-
guest
