Выпадающее вертикальное меню с помощью CSS, JQuery

jquery меню

От автора: Сегодня мы сделаем простое, но привлекательное меню с помощью CSS, JQuery.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг 1.

Для начала создайте папку, например folder. В нее поместите файл index.html со следующим кодом:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Затем в папке folder создайте папку style и поместите в нее файл style.css. Файл style.css должен содержать этот код:

Также не забываем про наши скрипты. В папке folder создаем папку js и помещаем в нее скрипт jquery-1.4.2.js, jquery.easing.1.3.js и script.js.

Чтобы наша страничка была не такой унылой, я создал для нее красочный фон. Для этого в папке folder необходимо создать папку img и поместить в нее файл font.jpg. Делать это необязательно. Просто в этом случае фон страницы будет черного цвета.

После того как Вы выполнили вышеуказанные действия, в окне Вашего браузера появится вот такая вот страничка:

вертикальное меню jquery

Таким образом, мы создали вертикальное меню с помощью CSS, JQuery с выпадающими подпунктами. Для того чтобы увидеть подпункты меню, необходимо кликнуть на соответствующий пункт меню. Повторный клик по соответствующему пункту меню вернет его в исходное состояние.

Шаг 2.

Для того чтобы понять, как устроена работа данного меню, рассмотрим исходные коды файлов index.html, style.css и script.js.

Итак, рассмотрим файл index.html. А именно вот эту часть кода:

Она представляет собой в браузере пункт меню "ГЛАВНАЯ" с раскрывающимися подпунктами меню "Пункт1", "Пункт2", "Пункт3", "Пункт4".

Подпункты меню "Пункт1", "Пункт2", "Пункт3", "Пункт4" скрыты за счет свойства display: none;. Для того чтобы увидеть второй уровень меню Вам необходимо сделать один клик по пункту меню "ГЛАВНАЯ". После этого наше меню плавно раздвигается.

Данный эффект реализован при помощи ява-скрипта script.js.

Пункты меню "ФОТО", "ВИДЕО", "БЛОГИ", "ИГРЫ", "КОНТАКТЫ" реализованы аналогичным образом. Отличие друг от друга заключается в количестве подпунктов меню, поэтому их рассматривать мы не будем.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Файл style.css.

В этом файле я хочу обратить Ваше внимание на стили классов button и dropdown (стили для пунктов меню и их подпунктов, соответственно). Рассмотрим их:

В свою очередь, все меню заключено в блок container. За счет свойств данного блока наше меню расположено по центру экрана.

Файл script.js. Наши пункты меню второго уровня плавно открываются и закрываются именно за счет этого скрипта.

Рассмотрим его код более детально:

Строка $.easing.def = "easeInOutQuad"; задает эффект открытия/скрытия подпунктов меню. В данном случае указан эффект easeInOutQuad. На его место можно поставить другой эффект, например, easeOutBounce.

В строке $(‘li.button a’).click(function(e) описано то, что данный эффект (открытия/скрытия) применятся только для элементов класса button по клику, т.е. для пунктов меню "ГЛАВНАЯ", "ФОТО", "ВИДЕО", "БЛОГИ", "ИГРЫ", "КОНТАКТЫ".

Эти строки $(‘.dropdown’).not(dropDown).slideUp(‘slow’); dropDown.slideToggle(‘slow’); задают скорость открытия/скрытия подпунктов меню. В данный момент задана скорость открытия "slow". Она равна 1 секунде.

Спасибо за внимание. На этом урок окончен. Мы с Вами создали выпадающее вертикальное меню с помощью CSS, JQuery. Ваши отзывы и вопросы по статье жду в комментариях.

С уважением, Михаил Влащенко.

киберсант-вебмастер

Автор: Михаил Влащенко

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Учебник по основам CSS для начинающих

Прямо сейчас изучи CSS с нуля!

Смотреть курс

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (84)

  1. Денис

    Спасибо Тебе большое Михаил!!!!
    Нет слов выразить благодарность!!!!
    Вроде данный способ подменю элементарен, а перекопал столько сайтов — а все не то. :)

  2. Виктор

    Огромное спасибо давно искал что нибудь похожие.
    Но есть один вопрос.
    Как сделать ещё один подпункт. Например,
    Главная, нажимаем и открывается »Пункт1», а как добавить в »Пункт1» ещё один подпункт?

  3. Виктор

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

    • Андрей Кудлай

      Сложно что-то подсказывать, не видя кода. Да и комментарии не очень подходят для работы с кодом. Создайте тему на нашем форуме, выложите проблемный код и так будет гораздо больше шансов получить помощь.

      • Виктор

        Спасибо за совет, вот создал темку
        http://webformyself.com/forum/index.php/topic/757/

        • Андрей Кудлай

          Да, только было бы неплохо все же создавать тему в нужном разделе (в данном случае — это jQuery… тему я переместил). Кроме того, тот, кто Вам попытается помочь, совсем не поймет, как работает Ваше меню. Выложите еще код jQuery и CSS. В принципе, все это можно прикрепить архивом в сообщении.

  4. Татьяна

    Большое спасибо, единственное но у меня не встают ссылки а в основное меню — в выпадающее ноу проблем

  5. Lylliana

    Здравствуйте, создала папки, закинула файлы, всё сделала. А не открывается у меня. Судя по комментариям в Operа открывается отлично

    • Андрей Кудлай

      Здравствуйте.
      Попробуйте создать тему на нашем форуме, описать проблему подробнее (что именно не открывается, во всех браузерах или только в одном), выложить код, и мы постараемся помочь.

  6. Нина

    Отличный скрипт! Спасибо!! Лучший, который я нашла в интернет…
    Вообще Вы ребята молодцы, и курс который я у вас приобрела классный, работать одно удовольствие, всё толково и понятно!!!

  7. Нина

    У меня работает в браузерах: Опера, Firefox, Google, Сафари, Интернет Эксплойер начиная с 9-ой, в ранних версиях не работает.

  8. Дмитрий

    Очень хорошо все описано и разжёвано, спасибо!

    А хотелось бы добавить картинки «+» которая в раскрытом состояние меню будет меняться на «-».

  9. Сергей

    не плохая реализация меню, но можно было сделать на чистом хтмл и цсс, как тут например help-wp.ru/vertikalnoe-vypadayushhee-menu/

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

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

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

Я не робот.

Spam Protection by WP-SpamFree