Закрыть панель
Авторизация || вход на сайт

Войти

Делаем красивое многоуровневое меню на jQuery и CSS

Печать
PDF

15 Марта 2010
Раздел Веб-мастеру

Релиз выпадающего меню на jQuery

Исследования показывают, что выпадающее меню навигации, как правило, используют, чтобы получить наибольшее визуальное внимание, когда пользователь в первый раз посещает сайт. Организация на сайте интуитивно понятной навигации имеет ключевое значение. В этом уроке мы бы хотели рассказать о том, как создать красивое выпадающее меню, тем самым придать своему сайту модную изюминку.


Итак, в данном уроке мы покажем три кода, которые отвечают за отображение меню, а именно: HTML, CSS и естественно jQuery. На итоговый результат вы уже можете посмотреть здесь.

создание html-кода меню

Демо выпадающего меню

Часть 1: HTML

Для начала создаем маркированный список для нашего меню навигации. Для этого пишем следующий код:

<ul class="topnav">
 <li><a href="#">Home</a></li>
 <li>
 <a href="#">Tutorials</a>
 <ul class="subnav">
 <li><a href="#">Sub Nav Link</a></li>
 <li><a href="#">Sub Nav Link</a></li>
 </ul>
 </li>
 <li>
 <a href="#">Resources</a>
 <ul class="subnav">
 <li><a href="#">Sub Nav Link</a></li>
 <li><a href="#">Sub Nav Link</a></li>
 </ul>
 </li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Advertise</a></li>
 <li><a href="#">Submit</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>

Естественно, что пункты меню указанные в образце (Home, Tutorials, Sub Nav Link) поменяйте на свои. Класс subnav отвечает за вывод субменю навигации.

Часть 2: CSS

Теперь пришло время приукрасить наше меню CSS-стилем. Все указанные ниже параметры стиля вы можете менять на свое усмотрение и на свой вкус.

ul.topnav {
 list-style: none;
 padding: 0 20px;
 margin: 0;
 float: left;
 width: 920px;
 background: #222;
 font-size: 1.2em;
 background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
 float: left;
 margin: 0;
 padding: 0 15px 0 0;
 position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
 padding: 10px 5px;
 color: #fff;
 display: block;
 text-decoration: none;
 float: left;
}
ul.topnav li a:hover{
 background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
 width: 17px;
 height: 35px;
 float: left;
 background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
 list-style: none;
 position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
 left: 0; top: 35px;
 background: #333;
 margin: 0; padding: 0;
 display: none;
 float: left;
 width: 170px;
 border: 1px solid #111;
}
ul.topnav li ul.subnav li{
 margin: 0; padding: 0;
 border-top: 1px solid #252525; /*--Create bevel effect--*/
 border-bottom: 1px solid #444; /*--Create bevel effect--*/
 clear: both;
 width: 170px;
}
html ul.topnav li ul.subnav li a {
 float: left;
 width: 145px;
 background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
 padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
 background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

Часть 3: jQuery

В этой части устанавливаем jQuery.

$(document).ready(function(){

 $("ul.subnav").parent().append("<span></span>"); *

 $("ul.topnav li span").click(function() { 

 $(this).parent().find("ul.subnav").slideDown('fast').show(); 

 $(this).parent().hover(function() {
 }, function(){
 $(this).parent().find("ul.subnav").slideUp('slow'); 
 });
 }).hover(function() {
 $(this).addClass("subhover"); 
 }, function(){    //On Hover Out
 $(this).removeClass("subhover");    });

});

*Мы показываем выпадающее меню триггера только для тех, у кого включен JavaScript.

выпадающее меню jQuery

Ниже показано, как выглядит меню, когда отключен JavaScript:

код javascript для меню

В заключении

Экспериментируйте, чтобы настроить красивое меню в соответствии с вашими потребностями! Если у Вас возникли вопросы, проблемы, предложения или комментарии, пожалуйста, не стесняйтесь, дайте нам о них знать ниже в комментариях. Спасибо.


rssfeed Читайте нашу RSS-ленту
Статья была Вам полезна? Подпишитесь и получайте наши новости по RSS. Также Вы можете добавить данную новость себе в закладки. Спасибо.
Email Favoriten
Тэги материала
< Предыдущая   Следующая >
Похожие материалы:
Предыдущие материалы:

КомментарииКомментарии  

 
0 #1 enenuarcory 07.02.2012 16:53
Скачать бесплатно игру Властелин колец 2003 с торрента

песни закрытой школы слушать

светофор актеры

Автомобиль хонда пилот превосходно оптимизирован под дороги России. Посмотреть honda pilot можно на страницах нашего сайта.

ховер н5
Цитировать
 

Добавить комментарийДобавить комментарий


Защитный код
Обновить

Вход на сайт:



Последние отзывы:

Кто мы? немного информации о проекте uaBIG.com

about_us_uabig

Привет! Рады тебя видеть в нашем блоге. Давай знакомиться! uaBIG.com - проект, реализованный группой молодых людей из Киева. Мы ежедневно наполняем наш блог актуальной и подробной информацией о веб-разработке и дизайне. Если ты хочешь создать красивый сайт своими силами, подписывайся и следи за блогом, мы тебя обязательно научим! Наш рабочий кабинет здесь.

Популярные теги: часто используемые мета-теги uaBIG.com