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

Здравствуйте, дорогие друзья! Сегодня мы будем делать очередное выпадающее меню на jQuery с помощью, но на этот раз оно будет выполнено с помощью особого плагина Superfish. Для начала, посмотрите демонстрацию и скачайте исходники файлов, которые мы будем использовать в ходе данного урока:

Шаг 1. HTML-конструкция меню.

Для начала, создадим html-каркас, который будет служить основой для нашего будущего меню. Ниже я привожу пример такого каркаса:

HTML:


   
<ul class="sf-menu">
  <li class="current">
  <a  href="#a">Профиль</a>
  <ul>
  <li>
  <a href="#">Мои сообщения</a>
  <ul>
  <li><a  href="#">Входящие</a></li>
  <li><a  href="#">Отправленные</a></li>
  <li><a  href="#">Черновик</a></li>
  </ul>
  </li>
  <li class="current">
  <a  href="#ab">Мои друзья</a>
  <ul>
  <li class="current">
  <a  href="#">OleGG!</a></li>
  <li>       <a href="#aba">D(o_0)B</a>                               
  </li>                  
  </ul>                                      
  </li>
  <li>
  <a  href="#aa">Выйти</a>
  </li>
  </ul>
  </li>
  <li>
  <a  href="#">Блог</a>
  </li>
  <li>
  <a href="#">Услуги</a>
  <ul>
  <li>
  <a  href="#">Верстка</a>
  <ul>
  <li>           <a  href="#">Заказать!</a>
  </li>
  </ul>
  </li>
  <li>
  <a  href="#">Оформление</a>
  <ul>
  <li>
  <a  href="#">Заказать!</a>
  </li>
  </ul>
  </li>
  <li>
  <a href="#">SEO</a>
  <ul>
  <li>   <a  href="#">Заказать!</a>
  </li>
  </ul>
  </li>  
  </ul>
  </li>
  <li>
  <a href="#">О  нас</a>
  </li> 
  </ul>

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

Отлично! Теперь те стили, которые мы привязывали к объектам списков, мы пропишем между тегами <head> и </head> Ниже я разместил примерный код стилей вместе с комментариями к нему, которые будут применяться в стилизации этого меню:

CSS:


  
         <style  type="text/css">
  /*** НЕОБХОДИМЫЕ СТИЛИ ***/
  .sf-menu, .sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
  }
  .sf-menu {
  line-height: 1.0;
  }
  .sf-menu ul {
  position: absolute;
  top: -999em;
  width: 10em; 
  }
  .sf-menu ul li {
  width: 100%;
  }
  .sf-menu li:hover {
  visibility: inherit; 
  }
  .sf-menu li {
  float:  left;
  position: relative;
  }
  .sf-menu a {
  display: block;
  position: relative;
  }
  .sf-menu li:hover ul,
  .sf-menu li.sfHover ul {
  left:  0;
  top:  2.5em;
  z-index: 99;
  }
  ul.sf-menu li:hover li ul,
  ul.sf-menu li.sfHover li ul {
  top: -999em;
  }
  ul.sf-menu li li:hover ul,
  ul.sf-menu li li.sfHover ul {
  left: 10em; 
  top: 0;
  }
  ul.sf-menu li li:hover li ul,
  ul.sf-menu li li.sfHover li ul {
  top: -999em;
  }
  ul.sf-menu li li li:hover ul,
  ul.sf-menu li li li.sfHover ul {
  left: 10em; 
  top: 0;
  }
/*** СКИН ДЕМО ***/
  .sf-menu {
  float: left;
  margin-bottom: 1em;
  }
  .sf-menu a {
  border-left: 1px solid #fff;
  border-top: 1px solid #CFDEFF;
  padding: .75em 1em;
  text-decoration:none;
  }
  .sf-menu a, .sf-menu a:visited  {
  color: #13a;
  }
  .sf-menu li {
  background: #BDD2FF;
  }
  .sf-menu li li {
  background: #AABDE6;
  }
  .sf-menu li li li {
  background: #9AAEDB;
  }
  .sf-menu li:hover, .sf-menu li.sfHover,
  .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  background: #CFDEFF;
  outline: 0;
  }
/*** СТРЕЛКИ **/
  .sf-menu a.sf-with-ul {
  padding-right: 2.25em;
  min-width: 1px; 
  }
  .sf-sub-indicator {
  position: absolute;
  display: block;
  right: .75em;
  top: 1.05em; /* ТОЛЬКО ДЛЯ IE6 */
  width: 10px;
  height: 10px;
  text-indent: -999em;
  overflow: hidden;
  background: url('images/arrows-ffffff.png') no-repeat  -10px -100px; 
  }
  a > .sf-sub-indicator {  
  top: .8em;
  background-position: 0  -100px; 
  }
a:focus > .sf-sub-indicator,
  a:hover > .sf-sub-indicator,
  a:active > .sf-sub-indicator,
  li:hover > a > .sf-sub-indicator,
  li.sfHover > a > .sf-sub-indicator {
  background-position: -10px  -100px; 
  }

.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
  .sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
.sf-menu ul a:focus > .sf-sub-indicator,
  .sf-menu ul a:hover > .sf-sub-indicator,
  .sf-menu ul a:active > .sf-sub-indicator,
  .sf-menu ul li:hover > a > .sf-sub-indicator,
  .sf-menu ul li.sfHover > a > .sf-sub-indicator {
  background-position:  -10px 0; 
  }
/*** ТЕНИ ДЛЯ ВСЕХ БРАУЗЕРОВ,  КРОМЕ IE6 ***/
  .sf-shadow ul {
  background: url('images/shadow.png') no-repeat bottom  right;
  padding: 0 8px 9px 0;
  -moz-border-radius-bottomleft:  17px;
  -moz-border-radius-topright:  17px;
  -webkit-border-top-right-radius:  17px;
  -webkit-border-bottom-left-radius:  17px;
  }
  .sf-shadow ul.sf-shadow-off {
  background:  transparent;
  }
  </style>

Шаг 3. Прикрутка фреймворка jQuery

Теперь главное не забыть привязать основной фреймворк jQuery, поскольку, если мы вставим его позже, наше меню будет некорректно отображаться. Выглядеть будет это следующим образом:


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

Шаг 4. Вставка необходимых JavaScript'ов

Далее мы заставим наше меню плавно выдвигаться и придадим некоторые эффекты выпадающим элементам меню. Чтобы не размещать здесь длинные javascript-коды, я вынес отдельно файл hoverIntent.js, который будет отвечать за плавное появление пунктов меню, и superfish.js, отвечающий за работу самого плагина Superfish! Эти файлы я выложил в исходниках урока. Они находятся в папке – JS. Скачивайте и пользуйтесь! Теперь нам нужно привязать данные файлы к нашему документу, где будет находиться меню. Делаем это, вставляя следующий код между тегами <head> и </head>:

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

Шаг 5. jQuery-доработки

Наконец, завершающий и важнейший для работы меню этап. Для правильного отображения мы должны между тегами <head> и </head> прописать следующий небольшой javascript-код:



<script type="text/javascript">

  jQuery(function(){
  jQuery('ul.sf-menu').superfish();
  });
           </script>

Заключение.

Ура, мы сделали это! У меня на этом все. Надеюсь, Вам урок понравился, жду Ваших комментариев! До новых встреч, друзья! С уважением Ваш jQuery-проводник – М. К. Wink

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


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 12 Июня 2009 12:34
    Виталий
    Мне кажется, для такого количества кода эффект слабоват. P.S. Ура!!! Поиск на сайте появился.
  • 12 Июня 2009 12:58
    Максим
    2Виталий: Я вынужден с Вами немного не согласиться. Если Вы хоть чуть-чуть помимо всех этих уроков знаете основы веб-дизайна, разбираетесь в стилях ну и немного в html, то Вы свободно можете сделать из этого меню классную навигацию по своему вкусу.
  • 12 Июня 2009 13:19
    SergStril
    Поиск действительно был нужен, и спасибо, что его сделали. Только немного странное место для него, можно было бы его разместить на полосе горизонтального меню, так бы смотрелось лучше.
  • 12 Июня 2009 13:25
    SergStril
    Или здесь. Значительно лучше.
  • 12 Июня 2009 13:31
    Максим
    Я тоже присоединяюсь к Виталию и SergStril'у! Поисковой формы действительно не хватало! Огромное Вам спасибо, Евгений, за это!
  • 12 Июня 2009 15:57
    Андрей
    Согласен с Виталием, обычное меню, но столько кода занимает....
  • 13 Июня 2009 09:52
    Виталий
    To Максим. Я не имел ввиду дизайн. И ежу понятно, что из любого непривлекательного на вид меню с помощью CSS можно сделать "ляльку". Я говорил о коде. Есть меню с подобным эффектом, но с меньшим кодом.
  • 13 Июня 2009 11:27
    МаксимКурочкин
    2Виталий 2Андрей: Да, ребят, здесь есть Ваша доля правды, код действительно довольно громоздкий, однако, если он Вам не понравился, то можете его не делать, значит это для других людей =)
  • 13 Июня 2009 11:37
    СЕРИК
    Вот вопрос во всей этой красоте используется js а что если у просматривающего он отключен то просто на просто его никто не увидет так чтоли просветите Пожалуйста
  • 20 Июля 2009 11:35
    AssFucker
    где пишет кто урок делал? и как переобразовать меню в ветикальное с випадом в право? в css надо править? што, где и как?
  • 3 Октября 2009 18:30
    Seiger
    Уважаемые, интересует тот же вопрос! Подскажите плз.
  • 5 Октября 2009 17:42
    scorpionchik
    подскажите плиз... а как это меню выровнять по середине!!! ????????
  • 30 Октября 2009 20:12
    darito
    у меня такой вопрос к этому уроки скажите пожалуйста Евгений как реализовать этот же меню с Mysql
  • 1 Января 2010 22:52
    quallcom
    Такой вот вопрос, как переобразовать меню в ветикальное с випадом в право?
  • 3 Января 2010 19:54
    quallcom
    Автор урока читает коменты или он только методом Ctrl+c -> Ctrl+v копирует чужие уроки. Здесь в народа вопросы нарисовались, а ответа нет!!! Как переобразовать меню в ветикальное с випадом в право?
  • 21 Января 2010 12:35
    felixxx
    фу елки палки, преобразовать его предельно просто - редактируете стили CSS и все. Прописываете margin-left и вуаля.
  • 17 Июня 2011 21:09
    xzibitcar
    у меня меню почему то применяется только для 4 пунктов меню. Подскажите как исправить.
  • 4 Сентября 2011 16:07
    JonDo
    Отличное меню, а для тех кому кажется, что много кода - вы не заметили что оно 100% кроссбраузерно, даже в 6 осле работает - не отличишь. Единственное с размерностью ячеек в 6-7 немного напутали.
  • 1 Декабря 2012 16:03
    agravin
    Добрый день. Хочу использовать ваш скрипт в 2-х уровневом меню, где оба уровня горизонтальные (как тут - http://ria.ru/ ). Возникла проблема с 2-м уровнем для активного раздела. Возможно ли это с вашим скриптом, или поискать другие?
  • 1 Декабря 2012 18:58
    agravin
    Нашел документацию тут - http://jquerylist.ru/navigation/superfish.html . Вопрос решается путем установки pathClass. Спасибо за ваш пример.
  • 19 Января 2013 23:33
    Dronn
    Спасибо за меню! Как при открытии одного раздела, сделать так, чтобы остальные сворачивальсь сами?
  • 25 Марта 2016 03:49
    kiordek
    Здравствуйте! А такое меню не нужно выводить специальным образом, как с wayfinder? Просто вставить код и подключить скрипты?
^ Наверх ^