Приветствую Вас Гость • Регистрация • Вход
Понедельник, 16.12.2019
Главная » 2012 » Декабрь » 22 » Плавно выпадающее меню с помощью jQuery
10:17
Плавно выпадающее меню с помощью jQuery
Здравствуйте уважаемые читатели!

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

DEMO DOWNOLOAD

Шаг 1. HTML-конструкция меню.
Для начала, создадим html-каркас, который будет служить основой для нашего будущего меню. Ниже я привожу пример такого каркаса:
HTML:
Код
<ul class="sf-menu">
  <li class="current">
<a href="#a">Тест</a>
  <ul>
  <li>
<a href="#">Ссылка</a>
  <ul>
<li><a href="#">Ссылка-1</a></li>
<li><a href="#">Ссылка-2</a></li>
<li><a href="#">Ссылка-3</a></li>
  </ul>
  </li>
  <li class="current">
<a href="#ab">Ссылка-1</a>
  <ul>
  <li class="current">
<a href="#">Ссылка-1</a></li>
<li> <a href="#aba">Ссылка-2</a>
  </li>
  </ul>
  </li>
  <li>
<a href="#">Тест-1</a>
  </li>
  </ul>
  </li>
  <li>
<a href="#">Тест-2</a>
  </li>
  <li>
<a href="#">Тест-3</a>
  <ul>
  <li>
<a href="#">Тест-4</a>
  <ul>
<li> <a href="#">Ссылка-2</a>
  </li>
  </ul>
  </li>
  <li>
<a href="#">Ссылка-3</a>
  <ul>
  <li>
<a href="#">Ссылка-4</a>
  </li>
  </ul>
  </li>
  <li>
<a href="#">Тест-5</a>
  <ul>
<li> <a href="#">Ссылка-5</a>
  </li>
  </ul>
  </li>
  </ul>
  </li>
  <li>
<a href="#">Тест-6</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 | Просмотров: 2550 | Добавил: Samosval |Рейтинг: 0.0/0


Всего комментариев: 2
avatar
0
2 Samosval • 13:52, 25.05.2013
Спасибо за подсказку,просто я забыл загрузить в папку 2 скрипта hoverIntent.js, который будет отвечать за плавное появление пунктов меню, и superfish.js, отвечающий за работу самого плагина Superfish!
avatar
1
1 hank • 06:40, 22.04.2013
Странно, почему-то в демо, меню совсем не плавно выпадает...
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика