—»     —»   Создаем простенькое выпадающее меню при помощи jQuery
  Раздел: Меню и Навигация   Комментариев: 2  

Создаем простенькое выпадающее меню при помощи jQuery



В этой статье мы будем разрабатывать простенькое выпадающее меню при помощи jQuery. Для начала посмотрите на демо-файл. Надеемся, что вы хоть немного знаете основы jQuery и CSS. Ключевыми аспектами создания данного выпадающего меню заключаются в применении параметров CSS: position, top, left, z-index.

Используя эти параметры, мы можем быть уверены в том, что наше меню будет появляться точно под ссылкой, на которую был наведен курсор, и точно будет накрывать все остальные элементы. Мы также сделаем так, чтобы меню отображалось при наведении курсора, и исчезало тогда, когда курсор отведен в сторону. Для реализации данных событий, мы будем использовать функции jQuery: mouseenter и mouseleave. И это все, что нам понадобится для создания выпадающего меню!

Демо-файл финального результата и ссылка на скачивание

Кликните по ссылке демо-файла и вы увидите то, что мы сейчас будем разрабатывать.

* Демо-файл
* Исходные файлы (zip, 25кб)

HTML-код

Ознакомьтесь с HTML-кодом выпадающего меню:

<div id="container">

<!-- First Menu Start -->
  <ul>
  <li><a href="#">Menu One</a></li>

<li>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  </li>

</ul>
  <!-- First Menu End -->

<!-- Second Menu Start -->
  <ul>
  <li><a href="#">Menu Two</a></li>

<li>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  </li>

</ul>
  <!-- Second Menu End -->

<!-- and so on -->

</div>

Как видно, здесь мы будем использовать неупорядоченные списки для реализации пунктов меню. Каждой ссылке меню присвоен класс выпадающего меню, а само выпадающее меню охвачено классом суб-ссылок. Имена классов будут использоваться jQuery для того, чтобы определять, какое меню нужно отображать.

CSS-код

Ознакомьтесь с кодом CSS:

/* CSS For Dropdown Menu Start */
  ul
  {
  list-style:none;
  padding:0px;
  margin:0px
  }

ul li
  {
  display:inline;
  float:left;
  }

ul li a
  {
  color:#ffffff;
  background:#990E00;
  margin-right:5px;
  font-weight:bold;
  font-size:12px;
  font-family:verdana;
  text-decoration:none;
  display:block;
  width:100px;
  height:25px;
  line-height:25px;
  text-align:center;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border: 1px solid #560E00;
  }

ul li a:hover
  {
  color:#cccccc;
  background:#560E00;
  font-weight:bold;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border: 1px solid #000000;
  }

ul li.sublinks a
  {
  color:#000000;
  background:#f6f6f6;
  border-bottom:1px solid #cccccc;
  font-weight:normal;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  margin-top:2px;
  }

ul li.sublinks a:hover
  {
  color:#000000;
  background:#FFEFC6;
  font-weight:normal;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  }

ul li.sublinks
  {
  display:none;
  }

/* CSS For Dropdown Menu End */

Большая часть кода CSS используется для форматирования меню (вы можете придать внешний вид меню по собственному усмотрению), но здесь также есть некоторые важные моменты:

1 – Удаление знаков табуляции посредством list-style:none;

2 – Нам известно, что списки – это блочные элементы и всегда отображаются в вертикальном порядке. Для того, чтобы сделать расположить их горизонтально, мы придаем им параметр строчных элементов и выравниваем их по левой стороне с помощью кода:

display:inline;
float:left;

3 – По умолчанию ссылки являются строчными элементами. Мы же переделываем их в блочные элементы при помощи display:block (таким образом, мы теперь можем задать им значение ширины).

4 – Прячем все меню посредством:

ul li.sublinks
{
display:none;
}

jQuery

Представьте былые времена, когда выпадающие меню были реализованы посредством грубого кода javascript, к тому же там была нужна куча ненужного кода. Но сегодня все, что нам нужно, это jQuery:

$(function(){
  $('.dropdown').mouseenter(function(){
  $('.sublinks').stop(false, true).hide();

var submenu = $(this).parent().next();

submenu.css({
  position:'absolute',
  top: $(this).offset().top + $(this).height() + 'px',
  left: $(this).offset().left + 'px',
  zIndex:1000
  });

submenu.stop().slideDown(300);

submenu.mouseleave(function(){
  $(this).slideUp(300);
  });
  });
  });

Очень интересная и простая штука. Давайте мы вам объясним, как это работает. Для начала и как обычно, мы охватываем наш код в контроллер jQuery:

$(function(){
...
});

Наш код активизируется, когда курсор мыши будет наведен (функция mouseenter) на элемент, которому присвоен класс выпадающего меню ($('.dropdown')). В нашем случае это ссылка в меню:

$(function(){
$('.dropdown').mouseenter(function(){
........
});
});

Давайте убедимся, что мы спрятали (hide()) все предыдущие открытые меню до того, как курсор мыши перескочит на следующую ссылку:

$('.sublinks').stop(false, true).hide();

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

var submenu = $(this).parent().next();

Вот что будет в коде HTML:

<!-- First Menu Start -->
  <ul>
  <li><a href="#">Menu One</a></li>

<li>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  </li>

</ul>
  <!-- First Menu End -->

Когда курсор мыши наведен на ссылку с классом dropdown, мы двигаемся обратно при помощи parent() и останавливаемся на 'li', а далее при помощи next(), мы оказываемся на нужном выпадающем меню, а 'li' уже будет с классом суб-ссылок (sublinks). Таким образом, jQuery облегчает нам процесс поиска того, какое выпадающее меню отображать, когда курсор мыши наведен на определенную ссылку.

Далее мы применяем некоторый код CSS к выпадающему меню так, чтобы оно отображалось определенно под ссылкой, на которую наведен курсор:

submenu.css({
position:'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex:1000
});

Код очень важен, так как он гарантирует нам то, что выпадающее меню отображается точно под определенной ссылкой. Если позиция выставлена на absolute, мы можем позиционировать элемент в любой области нашей страницы. Далее мы определяем верхнюю позицию ссылки, на которую наведен курсор при помощи $(this).offset().top (это относится к текущему пункту меню, на который наведен курсор), и добавляем к нему такое значение height, чтобы меню отображалось точно под ссылкой. Нечто похожее проделываем и с параметром left. Затем мы используем z-index для того, чтобы быть уверенными, что наше меню будет отображено поверх остальных элементов.

Далее мы отображаем выпадающее меню путем его разворота (slideDown) на скорости в 300 миллисекунд с помощью:

submenu.stop().slideDown(300);

Конечно, вы можете использовать и другие варианты анимации типа fadeIn, анимацию с помощью собственных стилей и так далее.

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

submenu.mouseleave(function(){
$(this).slideUp(300);
});

Для того чтобы спрятать выпадающее меню, мы используем slideUp, антоним к slideDown. Учитывайте то, что submenu – это переменная, которую мы создали для определения конкретного выпадающего меню.

Таким образом, у нас получилось привлекательное одноуровневое выпадающее меню на jQuery.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Mysterious Master   Прочитано (раз): 21228   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 28 июня 2011 @ 15:13
Написал: Леонид — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
В HTML коде нигде нет класса sublinks


< l i class="sublinks">
< a href="#">Link 1< / a >
< a href="#">Link 2< / a >
Комментарий #2: 6 сентября 2012 @ 15:21
Написал: toherman — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Леонид, в данном случае класс придуман и определяет стиль CSS
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930