Качественное меню с выпадающими списками

Всем привет =) Итак, заряжаемся волной позитива и вперед - покорять вершины сайтостроения. Что ж, в этом, не менее интересном, уроке Вы научитесь делать классное меню с выпадающими списками в том месте, где нам это будет нужно. Итак, приступим! Для начала просмотрите демо получившегося у меня скроллера и скачайте исходные файлы урока:

Шаг 1. HTML-каркас меню

Первым этапом нашей работы будет создание основы для меню. Основа будет простой: всего несколько пунктов меню и только два из них - "Документация" и "Скачать" будут иметь дополнительные выпадающие списки. В нижеприведенном коде конструкции меню невооружимым глазом видно это:


<div class="container">     
<div id="header">          
<ul class="topnav">             
<li><a href="#">Главная</a></li>            
<li>                 
<a href="#">Документация</a>                 
<ul class="subnav">                     
<li><a href="#">jQuery</a></li>                     
<li><a href="#">CSS</a></li>                     
<li><a href="#">PHP</a></li>                     
<li><a href="#">AJAX</a></li>                    
<li><a href="#">Другое...</a></li>                 
</ul>             
</li>             
<li>                 
<a href="#">Скачать</a>                 
<ul class="subnav">                     
<li><a href="#">Иконки</a></li>                     
<li><a href="#">Шаблоны</a></li>                     
<li><a href="#">Скрипты</a></li>                     
<li><a href="#">Фоны</a></li>                     
<li><a href="#">Другое...</a></li>                 
</ul>             
</li>             
<li><a href="#">Форум</a></li>             
<li><a href="#">Товары</a></li>             
<li><a href="#">Блог</a></li>             
<li><a href="#">О нас</a></li>         
</ul>     
</div> 
</div> 

Шаг 2. Дизайн меню

Следующим шагом мы будем украшать наше меню. Хочу заметить, что все изображения, нужные для правильного отображения меню находятся впапке images и, если у Вас вдруг перестанет работать меню, то первым делом смотрите, где находятся эти изображения. Ну а CSS-код для самого дизайна меню будет таким:


<style type="text/css"> 
  body {
  margin: 0; padding: 0;
  font: 10px normal Arial, Helvetica, sans-serif;
  background: #ddd url(images/body_bg.gif) repeat-x;
  }
  .container {
  width: 960px;
  margin: 0 auto;
  position: relative;
  }
  #header {
  background: url(images/header_bg.gif) no-repeat center top;
  padding-top: 120px;
  }
  #header .disclaimer {
  color: #999;
  padding: 100px 0 7px 0;
  text-align: right;
  display: block;
  position: absolute;
  top: 0; right: 0;
  }
ul.topnav {
  list-style: none;
  padding: 0 20px; 
  margin: 0;
  float: left;
  width: 920px;
  background: #222;
  font-size: 1.2em;
  background: url(images/topnav_bg.gif) repeat-x;
  }
  ul.topnav li {
  float: left;
  margin: 0; 
  padding: 0 15px 0 0;
  position: relative; 
  }
  ul.topnav li a{
  padding: 10px 5px;
  color: #fff;
  display: block;
  text-decoration: none;
  float: left;
  }
  ul.topnav li a:hover{
  background: url(images/topnav_hover.gif) no-repeat center top;
  }
  ul.topnav li span { 
  width: 17px;
  height: 35px;
  float: left;
  background: url(images/subnav_btn.gif) no-repeat center top;
  }
  ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} 
  ul.topnav li ul.subnav {
  list-style: none;
  position: absolute; 
  left: 0; top: 35px;
  background: #333;
  margin: 0; padding: 0;
  display: none;
  float: left;
  width: 170px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border: 1px solid #111;
  }
  ul.topnav li ul.subnav li{
  margin: 0; padding: 0;
  border-top: 1px solid #252525; 
  border-bottom: 1px solid #444; 
  clear: both;
  width: 170px;
  }
  html ul.topnav li ul.subnav li a {
  float: left;
  width: 145px;
  background: #333 url(images/dropdown_linkbg.gif) no-repeat 10px center;
  padding-left: 20px;
  }
  html ul.topnav li ul.subnav li a:hover { 
  background: #222 url(images/dropdown_linkbg.gif) no-repeat 10px center; 
  }
  #header img {
  margin: 20px 0 10px;
  }
</style> 

Шаг 3. Подключение библиотеки jQuery

Теперь, конечно же, как и в любом уроке по jQuery мы, между тегами <head> и </head>, должны подключить нашу библиотеку. Делать это будем следующим образом:


<script type="text/javascript" src="jquery.js"></script> 

Шаг 4. Вставка основного jQuery-кода

Теперь, сразу после подключения jQuery-фреймворка нам остается, всего-навсего, поместить сам скрипт, необходимый для выпадания подменю:



<script type="text/javascript"> 
$(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"); 

$(this).removeClass("subhover"); 
});

});
</script> 

Заключение.

Вот и все. Наш очередной урок по разработке интересного меню готов. До новых встреч!

С искренним уважением, Максим Курочкин

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.noupe.com
Перевел: Максим Курочкин
Урок создан: 11 Июля 2009
Просмотров: 77631
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

    Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.

  • 15 полезных .htaccess сниппета для сайта на WordPress

    Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

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

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 11 Июля 2009 10:42
    SADIQ
    интересненько))
  • 11 Июля 2009 10:53
    SADIQ
    Спасибо за урок!!! :) I AM FROM AZERBAIJAN
  • 11 Июля 2009 17:30
    denkut
    Ух nsss!!!!! Красивая менюшка!!! спасибо за урок!!!
  • 12 Июля 2009 23:11
    Live
    я единственый, у кого выпадающий список не работает?
    • 17 Июля 2012 01:19
      BENZIN124
      Нет не единственный,у меня тоже не пашет..
  • 14 Июля 2009 21:18
    Юрий
    Красивое меню. Но хочется узнать как сделать чтобы список выпадал не по зеленой стрелке, а непосредственно при нажатии в области кнопки с hover'ом. Спасибо
  • 14 Июля 2009 21:45
    denmart
    Согласен с тем, что с hover'ом было бы лутче
  • 15 Июля 2009 22:28
    asam
    Классно!!! Спасибо за урок!
  • 16 Июля 2009 17:44
    Дмитрий
    Если кому интересно, для открытия субменю по наведению мыши и не на стрелке а на кнопке, измените строку в коде $("ul.topnav li span").click(function() { на $("ul.topnav li a").mouseover(function() {
    • 13 Марта 2014 07:05
      Desus
      спасибо тебе добрый человек! если есть время может глянете! проблема в том что это меню я вставил в шаблон http://ruseller.com/adds.php?rub_id=36&id=3133 и при выпадании оно открывается за лист с информацией =( и не видно кнопок! за ранние благодарю
  • 17 Июля 2009 02:07
    Юрий
    Дмитрий, огромное спасибо!!!
  • 4 Августа 2009 13:48
    icepic
    у меня тоже выпадающий список не работает.. подскажите в чем может быть причина?
  • 13 Февраля 2010 13:12
    SuperSkat
    У меня возникла проблема, меню разворачивается только до элемента <div>, т.е. <div id="menu">....</div>, за ним идёт следующий <div id="sec"></div>, между этими дивами расстояние примерно 10 пикселей, и вот меню разворачивается на эти 10 пикселей, как бы упирается в нижний.
    • 13 Марта 2014 07:44
      Desus
      не нашли причину с меню? если нашли отпишитесь как и что меняли! все будут благодарны вам =)
  • 15 Марта 2010 17:09
    OLEGON
    ПОМОГИТЕ ПОЖАЛУЙСТА! Как вставить это меню, но только полоску меню с выпадающими окнами, без шапки и фонов, в страницу HTML?????
  • 27 Июля 2010 12:28
    Mikkel
    Как убрать серый фон после меню???
  • 9 Октября 2010 16:56
    Web_master_Noob
    я дико извиняюсь но мне ничего не понятно как например CSS вставить и куда? как поставить меню в то место куда я хочю куда что там жать? может зделаете видео урок я бы был очень признатетелен спасибо
    • 20 Апреля 2011 09:15
      Дмитрий
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title></title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(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"); $(this).removeClass("subhover"); }); }); </script> <style type="text/css"> body { margin: 0; padding: 0; font: 10px normal Arial, Helvetica, sans-serif; background: #ddd url(images/body_bg.gif) repeat-x; } дабиваешь остальной стиль и всё! Дальше дивы и будет тебе счастье </style> </head> <body>
  • 15 Октября 2010 20:41
    иван
    Хорошее меню. Но не каждый пользователь догадается нажать на стрелочку вниз ( например моя мама)))))). На мой взгляд лучше что бы меню выпадала после наведения на буквы. Классный эффект подсветки.!!! Автор: SuperSkat (2010-02-13 13:12:05) У меня возникла проблема, меню разворачивается только до элемента <div>, т.е. <div id="menu">....</div>, за ним идёт следующий <div id="sec"></div>, между этими дивами расстояние примерно 10 пикселей, и вот меню разворачивается на эти 10 пикселей, как бы упирается в нижний. Попробуй указать в <div> в котором меню position: absolute. у меня такая же проблема была, но с другим меню)
    • 20 Апреля 2011 09:13
      Дмитрий
      $("ul.topnav li span").click(function() { на $("ul.topnav li a").mouseover(function() {
  • 9 Марта 2011 08:10
    darkzip
    А как сделать так, чтобы вместо текста были картинки (скажем если нужен другой шрифт)?
  • 24 Марта 2012 21:11
    Иван Текунов
    Спасибо Большое!
  • 22 Апреля 2012 22:02
    koldungsm
    Не работает с последним JQuery 1.7.2
  • 22 Апреля 2012 22:30
    koldungsm
    Хотя нет, работает. Хорошее меню!!!
  • 22 Июня 2012 12:43
    llllllllllllllllllll
    разобрался,спасибо:)
  • 7 Мая 2013 23:03
    msvanciu
    Всем привет, можно ли сделать подпункты к выпадающим спискам?
^ Наверх ^