Раскрывающееся меню на Jquery | Все что вы хотели знать о хостинге и сайтостроении

Раскрывающееся меню на Jquery


Рубрика: JavaScript, jQuery

Изучать jquery я начал пару месяцев назад по долгу службы, и очень скоро понял насколько это удобно. Причем не только если разрабатываешь какое-нибудь ajax-приложение, но и в более мелких вещах — таких как простенькие анимации, выпадающие менюшки и тд.

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

<ul id="my-menu">
  <li><a href="#0">Главная</a></li>
  <li><a href="#0">О компании</a>
    <ul>
      <li><a href="#0">История</a></li>
      <li><a href="#0">Настоящее</a></li>
      <li><a href="#0">Будущее</a></li>
    </ul>
  </li>
  <li><a href="#0">Контакты</a></li>
  <li><a href="#0">Продукция</a>
    <ul>
      <li><a href="#0">Мясные продукты</a>
        <ul>
          <li><a href="#0">Колбаса</a></li>
          <li><a href="#0">Сосиски и сардельки</a></li>
          <li><a href="#0">Деликатесы</a></li>
        </ul>
      </li>
      <li><a href="#0">Алкоголь</a>
        <ul>
          <li><a href="#0">Вино</a></li>
          <li><a href="#0">Водка</a></li>
          <li><a href="#0">Пиво</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Некоторые оставляют корневые ссылки ссылками, но мы так делать не будем. У нас корневые ссылки («О компании», «Продукция», «Мясные продукты», «Алкоголь») не будут вести ни на какую страницу, при клике по ним будет раскрываться подменю.

Итак, первым делом инициализируем библиотеку jquery.js. Желательно подключать ее в секции документа:

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

Теперь мы может писать javascript-скрипты. Делать это будем в отдельном js-файле, который прилинкуем аналогично jquery.js. Сразу приведу базовый код:

$(document).ready(function() {
  $('ul#my-menu ul').each(function(index) {
    $(this).prev().addClass('collapsible').click(function() {
      if ($(this).next().css('display') == 'none') {
        $(this).next().slideDown(200, function () {
          $(this).prev().removeClass('collapsed').addClass('expanded');
        });
      }else {
        $(this).next().slideUp(200, function () {
          $(this).prev().removeClass('expanded').addClass('collapsed');
          $(this).find('ul').each(function() {
            $(this).hide().prev().removeClass('expanded').addClass('collapsed');
          });
        });
      }
      return false;
    });
  });
});

Здесь мы делаем следующие вещи:
когда дерево DOM документа готово, пробегаемся в цикле по всем подменю (ul#my-menu ul);
в каждой итерации назначаем класс ‘collapsible’ ссылке, которая отвечает за данное подменю;
этой же ссылке назначаем обработчик события ‘click’, который в зависимости от состояния подменю будет раскрывать либо скрывать его.
onlick возвращает ‘false’, чтобы не происходил переход по ссылке.

Источник: http://alt-f4.ru/expanding-menu-by-jquery

Теги: , , ,
Если вам понравилась статья или была полезна, поделитесь ею с друзьями: