Красивое раскрывающееся меню на jQuery

« Предыдущая запись
 
  Следующая запись »
 

Идея данного поста родилась, во время разговора с Сергеем Медведицыным в комментариях одного из постов. Если вкратце, то мне понравилась идея горизонтального плавно появляющегося меню, сделанного на jQuery. Возник вопрос на тему изменений в нём - как сделать. И я решил ответить на него развёрнуто здесь, так как это будет очень полезно начинающим, а для знающих - это просто милый полезный пример. Итак.

Исходные данные: по нажатию на логотип исчезает баннер и появляются кнопки меню. Чтобы закрыть меню, нужно нажать на крестик, который принадлежит непосредственно этому меню.
Задача: заставить скрываться меню по второму клику на логотип.

Текущая вёрстка меню

<html>
<head>
<style>
* {margin:0px;padding:0px;}
#uppanel {
   height:38px;
   background:url(img/uppan.gif);
   width:100%;
}
#pokaz {
   background:url(img/upprf.gif);
   width:163px;
   height:38px;
   border:none;
   float:left;
   display:block;
}
#pokaz:hover {
   background:url(img/upprf.gif) 0 -38px;
}
.cl {
   float:left;
   display:none;
   margin:9px 0 0 30px;
   padding:3px 20px 3px 20px;
}
.cl:link, .cl:visited, .cl:active {
    color:#b2e1ff;
    text-decoration:none;
    background:url(img/2.png);
}
.cl:hover {
   color:#fff;
   background:url(img/1.png);
}
#reclama {float:right;}
#exet {color:#ff0018;}
</style>
</head>
<body>
<div id="uppanel">
  <div id="reclama"><a href="/"><img src="img/reklama.png"></a></div>
  <a id="pokaz"></a>
  <div style="margin-left:200px;">
    <a href="/" class="cl">Профиль</a>
    <a href="/" class="cl">ЛС (0)</a>
    <a href="/" class="cl">Нагады</a>
    <a href="/" class="cl">Репутация</a>
    <a href="/" class="cl">Выход</a>
    <a href="javascript://" id="exet" class="cl">X</a>
  </div>
</div> 
</body>
</html>

Совсем вдаваться в детали вёрстки меню не буду, так как это не важно - всё может выглядеть совершенно иначе. Итак, важно запомнить следующее:

  1. Есть контейнер с идентификатором reclama - в нём будет баннер, который изначально отображён на сайте.
  2. Ссылка с идентификатором pokaz - логотип сайта, кликая по которому открывается меню.
  3. Контейнер с кучей ссылок, имеющих класс cl. Среди них есть ссылка с идентификатором exet, кликая по которой, меню закрывается

Текущий jQuery код
раскрывающегося меню

<script type="text/javascript">
  $(document).ready(function(){
    $("#pokaz").click(function () {
       $("#reclama").fadeOut("fast", function () {
        $(".cl:eq(0)").show("fast", function () {
          $(this).next().show("fast", arguments.callee);
        });
      });
    });

    $("#exet").click(function () {
      $(".cl").fadeOut("fast", function (){
       $("#reclama").fadeIn("fast");
      });
    });
  });
</script>

  1. Строка 2. Инициализируем jQuery (который главное не забыть подключить заранее)
  2. Строка 3. Первый набор функций. Логотипу сайта (с идентификатором pokaz) приписывается событие onClick, то есть что будет происходить, когда кликнешь по логотипу.
  3. Строка 4. По клику, в первую очередь, должен плавно исчезнуть баннер с идентификатором reclama. Для этого вызывается команда fadeOut (затухание исчезновения), который передаётся аргумент скорости затухания, в данном случае fast - быстро. Можно указать slow - то есть медленно. Но проще всего указывать просто цифру - в миллисекундах. В качестве второго аргумента fadeOut принимает функцию, то есть то, что будет выполнятся после того, как отработает сам fadeOut, то есть после того как исчезнет баннер. А после его исчезновения…
  4. Строка 5. В качестве селектора выступает класс cl. Обращаем внимание, что после названия класса идёт дополнительный селектор - eq(0). Этот селектор позволяет выбрать позицию элемента. В нашем случае это номер элемента с классом cl, с которого начнётся появление элементов с классом cl. Если немного запутанно написано, советую попробовать поставить вместо нуля 2, 3 или 4, и вы сразу поймёте о чём речь.
    Селектору применяется функция show, которая, как ясно из названия, заставляет появляться элементы. Первый аргумент, который она применяет, скорость появления, а второй аргумент - опять же функция.
  5. Строка 6. А функция эта передаёт селектор this (то есть уже выбранный селектор), затем вызывается функция next (которая переключает на следующий элемент, в данном случае на следующий элемент с классом cl), и затем вновь вызывается функция show, принимающая в качестве параметров: а) скорость появления, б) аргумент arguments.callee, который указывает на функцию к которой прикреплен текущий активированный объект.
  6. Строка 11. Второй набор функций. Кнопке с идентификатором exet приписывается событие onClick, то есть что будет происходить, когда кликнешь по кнопке.
  7. Строка 12. В качестве селектора выступают элементы с классом cl, к которому применяет функцию fadeOut с двумя аргументами (скорость и функция).
  8. Строка 13. Блоку с идентификатором reclama привязана функция fadeIn (плавное появление). Понятно, что эта строка выполнится только после того, как будет всё выполнено в строке 12, а именно отработает функция fadeOut.

 

Обновлённый код

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

  • кнопке вызова (логотипу) мы назначим функцию
  • функция будет проверять специальную переменную и из неё решать - прятать меню или нет
  • специальная проверочная переменная - принимает только два значения - включено меню или выключено (по умолчанию выключено - ноль, включена - единица)

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

<a href="javascript:show_menu()" id="pokaz"></a>

А теперь js код.

<script type="text/javascript">
var check_lmen = '0';
function show_menu() {
   if (check_lmen == '0') {
      $(document).ready(function(){
         $("#reclama").fadeOut("fast", function () {
            $(".cl:eq(0)").show("fast", function () {
               $(this).next().show("fast", arguments.callee);
               check_lmen = '1';
            });
         });
      });
   }
   else {
      $(document).ready(function(){
         $(".cl").stop().fadeOut("fast", function (){
            $("#reclama").fadeIn("fast");
         });
      });
      check_lmen = '0';
   }
}
$(document).ready(function(){
   $("#exet").click(function () {
      $(".cl").fadeOut("fast", function (){
         $("#reclama").fadeIn("fast");
      });
   });
});
</script>
  1. Строка 2. Определяем переменную check_lmen и ставим ей значение 0. Это та самая проверочная переменная, которая будет содержать информацию включено или выключено меню. По умолчанию оно выключено - нолик.
  2. Строка 3. Инициализируем нашу функцию show_menu.
  3. Строка 4. Начало блока кода (5-12 строки), который будет выполнятся, если меню выключено, то есть check_lmen равен нулю.
  4. Строка 5-8. Аналогичны тому, что было с поправкой на то, что нет привязки на функцию onClick, так как здесь эту роль выполняет не jQuery, а сама ссылка.
  5. Строка 9. Раз мы выполнили сценарий, когда меню выключено, в результате чего меню включилось, то нужно сообщить в проверочную переменную, что мы его включили. Ставим check_lmen равным единице.
  6. Строка 14. Начало блока кода (15-20 строки), который будет выполнятся, если меню выключено, то есть check_lmen равен нулю.
  7. Строки 15-19 идентичны тому, что было раньше, за исключением 16 строки. Там мы добавили функцию stop. Она нужна для того, чтобы если вдруг два раза подряд щёлкнули по кнопке, то не происходил бы сбой анимации. Иными словами, если кликнуть второй раз по кнопке когда меню ещё не до конца появилось, то функция stop остановит анимацию появления и запустит анимацию исчезновения.
  8. Строка 20. Раз мы выключили меню, то нужно передать переменной, что оно выключено.
  9. Строки 23-29. Оставил их из предыдущего кода, чтобы кнопка с крестиком продолжала работать.

В завершении

По ссылке можно посмотреть пример того, что получилось. Если у вас есть другой взгляд на тему того, как можно было реализовать данное меню, с интересом выслушаю, также как и всякие замечания, вопросы и пожелания. А пока до новых встреч!

UPDATE 28.12.14: Вот уже почти полгода у меня (и Х времени до этого у преданного читателя) пролежал скрипт меню, сделанный с использованием css3. Читателя, сотворившего это, зовут Артём, так что используя файл не забудьте поблагодарить автора переработки =) Архив можно скачать по ссылке.

,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 4, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 9 на запись

"Красивое раскрывающееся меню на jQuery"

  1. Сергей
    16/02/2010 at 21:38 Постоянная ссылка Цитировать

    спс за обновление кода, сам бы не сделал :) только не надо было моё меню в пример ставить, оно теперь какое то пабликовское хД (ну это если кто нить увидит то будет думать не “о как классно и оригинально” а “знаю, я такое уже видел как делать” )

  2. Александр Шуйский
    16/02/2010 at 22:39 Постоянная ссылка Цитировать

    пожалуйста =)
    ну, я тут иногда рассказываю и о своих менюшках. на самом деле данное меню очень простое, поэтому тут ничего секретного нету. плюс довольно полезно на таких простых примерах учиться работать с библиотекой jQuery, да и как-то непосредственно жабаскрипт не забывается – вот он тут в виде созданной функции и проверочной переменной

  3. Буду теперь на примерах jq учить :) подписался.

  4. Да… дествительно зачетно сделано.
    Попробуем, что из этого может ещё что-то выйти :)

  5. 2vladko95. Удачи в обучении! И спасибо за подписку =)

    2Reysler. Да, мне тоже понравилось. Думаю место применения этого скрипта точно найдётся =)

  6. Владислав Леухин
    23/02/2010 at 20:20 Постоянная ссылка Цитировать

    Отлично придумано. Теперь буду читать ваш блог =) Думаю узнаю много интересного.

  7. Рад видеть среди своих читателей!
    Постараюсь не разочаровать =)

  8. здрасте, а исходники с картинками откуда можно качнуть?
    спасибо за менюшку – понравилась

  9. открываете пример и сохраняете страницу =)
    пожалуйста!

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии