JQuery: выпадающее меню

В этой пошаговой инструкции я продемонстрирую то, как можно быстро создать простое кроссбраузерное выпадающее меню на JQuery и CSS. Ниже представлено оно самое, проверял в т.ч. и на Internet Explorer 8:

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

Скачать пример
1. В теле вашего HTML документа создайте ненумерованный список следующего содержания:

<ul class="vert-nav">
  <li><a href="#">Ipsum Lorem</a></li>
  <li><a href="#">Gun Proin</a></li>
  <li class="current"><a href="#">Aenean Amet leo</a>
    <ul>
      <li><a href="#">Nam interdum metus</a></li>
      <li class="current"><a href="#">Amet sit Dolar</a></li>
      <li><a href="#">Ronsecteruer</a></li>
    </ul>
  </li>
  <li><a href="#">Tincidunt</a>
    <ul>
      <li><a href="#">Maurus</a></li>
      <li><a href="#">Dabibus</a></li>
    </ul>
  </li>
</ul>

2. Подключите библиотеку JQuery (её можно скачать с хранилищ Яндекса или Google). Затем напишите небольшой клиентский скрипт, который при наведении на элемент списка с классом CSS  vert-nav будет просто сворачивать (slideUp()) или разворачивать (slideDown()) дочерние элементы:

<script type="text/javascript">
$(document).ready(function () {

  $('.vert-nav li').hover(
    function() {
      $('ul', this).slideDown(110);
    },
    function() {
      $('ul', this).slideUp(110);
    }
  );

});
</script>

Где будет подключен JavaScript — в  <HEAD> или перед  </BODY> значения не имеет.

Выпадающее меню может иметь максимальный уровень вложенности, равный числу 2, т.е. на 1 родительский элемент по N дочерних. Однако последние в свою очередь не могут иметь «потомков».

3. Третьим завершающим шагом остается только прописать стили (в  <HEAD> подключить), формирующие внешний вид меню и скрывающие подменю по умолчанию. Вот они:

 body {
  font-size:12px;
  font-family:arial;
}

/* Cброс стилей списка браузера: */
.vert-nav, .vert-nav ul {
  list-style:none;
  margin:0 0 0 -1px; /* Чтобы в IE8 не косило. */
  padding:0;
}

/* Делаем LI инлайновым: */
.vert-nav li {
  float:left;
  position:relative;
  display:block;
  margin:0 1px;
  z-index:999;
  width:150px;
  background:#507EB9;

}

/* Меню: */
.vert-nav li a {
  display:block;
  padding:8px 5px 0 5px;
  height:23px;
  text-decoration:none;
  text-align:center;
  color:#fff;
  font-weight:bold;
}

/* Выделенный пункт меню: */
.vert-nav li.current {
  background:#C5D4EA;
}
/* Пункт меню при наведении курсора: */
.vert-nav li a:hover {
  text-decoration:underline;
}

/* Подменю, скрываемое по умолчанию: */
.vert-nav ul {
  position:absolute;
  display:none;
  left:0;
}
.vert-nav ul li {
  border-top:1px solid #fff;
  float:left;
}
Опубликовано 16-04-2013 в 09:50


Комментариев к записи: 3

  1. Nerrazurri:

    Спасибо

  2. Спасибо ! как раз искал в таком исполнении пример. Так что не пришлось даже нечего переделывать у ся на сайте =)

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

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