Выпадающее вертикальное меню с помощью 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

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки: , ,

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

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

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

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

  1. labintech

    Приятное меню для легких сайтов.

  2. Владимир

    Интересно, но с маху разобраться сложно.

  3. борис

    молодцы класс!!!

  4. Иван

    Папку создал,а поместить в нее не чего не получается. Просьба подскажите по подробней как?

  5. Андрей

    В Опере оно работает отлично. И если это меню работает также корректно во всех браузерах … то тогда просто отлично!

  6. Василий

    Спасибо.Очень полезная информация.

  7. Александр

    Как-то оно мну не очень понравилось… Может следует форму изменить или че-нить с ним сделать другого?

  8. Сергей

    Спасибо за урок!

  9. Петр

    Спасибо. Только похоже, это не подойдёт для CMS WordPress.

  10. Александр

    Андрей и Михаил спасибо. Создаю сайт и опыт на примерах можно перенять.

  11. Александр

    Считаю что неплохо… Надо подумать… Спасибо за предложение… А для чего это всё нужно???

  12. Юрий

    Очень даже хорошо, да и не сложное.

  13. Алёна

    Смотрю меню в IE7. Здесь между главным пунктом меню и подпунктами (например, пежду рамкой кнопки Контакты и рамкой кнопки Пункт 1) при щелчке мышью по главному пункту расстояние до выпадающего подменю то остается таким же как между кнопками в начальном состоянии, то проподает совсем, при этом граница подменю приклеивается к границе соответствующей кнопки. Проявляется это не всегда, как-то через раз. Чтобы увидеть, нужно «погонять» меню, пощелкать по кнопкам. Плохо, что здесь нельзя выложить картинки, это проще показать скринами. Видимо, это какая-то несовместимость IE, в GoogleChrome такого не заметила.

  14. Виталий

    Спасибо за меню. Понятно и доходчиво разьяснено. Буду использовать на практике.

  15. Юлия

    Спасибо за отличное и простое меню. А можно добавлять 3-4 уровень выпадения?

  16. Сергей

    Интересное меню. Спасибо.
    Подскажите, а как и какие прописать операторы для выравнивания меню по левому или по правому краю вот в этой строке:
    margin: 0 auto; — внешние отступы блока(слева и справа задано auto – блок находится по середине экрана);

    Заранее спасибо

  17. Евгения

    Я конечно не мастер- я только учусь. Изучила наконец HTML. Теперь приступаю к изучению дизайна сайтов и верстке. Так что ваша помощь мне как-раз кстати. Тепрь буду разбираться в коде. Пусь это будет как экзамен для меня на знания HTML. И если честно, я в восторге от вашей работы. У меня прекрасно скопировалось. Открывается замечательно в Internet Explorer.

  18. Игорь

    Спасибо. Очень хорошо.

  19. Владимир

    Большое спасибо. Очень интересный и своевременный материал.
    Хотелось бы чтобы блоки основного меню были расположены горизонтально в одну линию.
    Но… Есть идея, есть основа…, а как расположить, развернуть блоки меню, придется разобраться самостоятельно.
    Спасибо!!!

  20. Андрей

    Господа, кто нибудь знает — если я хочу прикрутить такое меню к сайту на joomla, где создавать папку — в templates или в корневой папке?

  21. Валентин

    А как привязать к каждому выпадающему пункту меню содержимое этого пункта, допустим какой нибудь текст или подпункты меню?
    также, картинку или фон меню можно менять?

    • Михаил В.

      Так понимаю, что Вы хотите сделать выпадающий блок по клику. Если это так, то создайте два блока. Сделайте один видимым, другой невидимым. Привяжите данный скрипт и все. По клику первого блока у Вас будет выезжать второй блок, в котором будет находиться необходимый контент.

  22. Наталия

    Спасибо! Очень интересная статья для практического применения.

  23. Станислав

    Спасибо за полезную информацию.

  24. nikolay

    Я новенький-впечатляет!!

  25. Олег

    Мне понравилось. благодарю.

  26. Virturum

    «2Андрей:19.01.2011 в 13:05″
    Все и во всех CMS надо делать в templates. И при переносе не будет возникать ни каких сложностей.

  27. Елена

    Михаил. спасибо. Очень хорошо и понятно разъяснено. Я ещё только в начале пути блогостроения, так сказать, первые шаги делаю, в моём возрасте это не просто, но и мне было почти всё понятно и очень интересно. Утаскиваю к себе в закрома с ссылочкой.

  28. Paul

    Спасибо! Меню очень понравилось — просто обожаю прозрачные или полупрозрачные объекты, такие как это меню))) Хочу использовать его в своём сайте, который собираюсь делать, ещё раз Спасибо Огромное!=)

  29. Таня

    классное меню, простое и понятное, можно втулить много подпунктов и на сайте уже никогда не заблудишься))) но как поместить это меню именно в то место куда мне надо?

  30. Наталия

    Спасибо, мне как раз в тему. Надо с этим разобраться по серьёзному.

  31. yota-sport.info

    Спасибо за ценную инфу пользователям!

  32. aiko2011(Сергей)

    Всегда был тупым копировальщиком кода, но сегодня даже без исходников начал сам читать, и думаю, что стал хоть что-то понимать. Успехов и удачи, признание у Вас уже есть!

  33. Сергей Петрович

    Всем всё понятно кроме меня. Создать папку folder… где? в корневой папке сайта или на диске компа?

  34. nikjar215 (Николай)

    Я пока на чинающий. Но всё чётко, доступно, молодцы!

  35. Андрей

    Тоже самое можно сделать и проще используя программу Adobe Dreamweaver. Она сама вставит кот в то место где должно быть выпадающее меню и создаст все скрипты и стили в отдельной папочке. Вам только надо изменить под себя фаил style.css, какой шрифт вам надо, расцветка фона, ну и т.д.
    В Adobe Dreamweaver это называется меню «боян» очень удобно и просто.

  36. Анатолий

    Замечательное меню! Спасибо автору. Просьба: объясните для «начинающего», как можно сделать активной ссылку из кнопки пункта (а не только подпункта) по адресу страницы? Чтобы при нажатии на кнопку пункта и выезжали подпункты меню, и происходил переход на указанную страницу? Или это принципиально не возможно?

    • Михаил В.

      Почему же. Возможно. Но просто какой в этом смысл(при нажатии на кнопку пункта и выезжали подпункты меню, и происходил переход на указанную страницу). Данное меню используется в целях экономии места страницы и красочного эффекта. И с точки зрения юзабилити это оченьудобно.

  37. Наталия

    Спасибо вам огромное!!!!

    Скажите пожалуйста: у меня внизу под меню находится картинка, и в Mozille при открытии меню картинка не съезжает, а оказывается над подпунктами (закрывает их). Можно ли как нибудь сделать, чтобы картинка сдвигалась, как в остальных браузерах?

  38. Алексей

    Меню очень полезное, но есть одна проблема. Сделал всё по описанию. При открытии страницы в браузере меню появляется в открытом виде(сразу видны все подпункты) и в виде текста(ни кнопок ни фона). Подскажите как справиться с этой проблемой?

    • Andrey Bernacki

      Скорее всего проблема с подключением файла стилей. Высылайте на e-mail код и вопрос продублируйте в письме тоже.

      • Розик

        У меня та же проблема. Если отдельно запустить код, который отвечает за меню, то все прекрасно работает. Но вот когда загружаешь на страницу сайта сразу видны все пункты(кнопок нет). Подскажите пожалуйста в чем может быть ошибка?

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

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

          • Розик

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

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

            Логично, что с непредусмотренной работой кода. К сожалению, я не телепат и кода Вашего не вижу :)
            Повторюсь, милости просим на форум, где можно выложить код и посмотреть что и как там у Вас.

          • Розик

            спасибо большое за статью, очень помогла)) вроде разобралась и даже кое-что начала понимать))

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

            Пожалуйста))

  39. Виталий

    Помогите сделать активной ссылку в главном меню. Она у меня передает параметр на сервер в базу для формирования списка подменю. Я понимаю что произойдет перезагрузка страницы, но мне это и нужно для вывода базовой информации о пункте главного меню.

    Спасибо.

  40. Игорь

    Спасибо, Михаил, это — очень интересно! Но пожалуйста поясните, что такое jquery-1.4.2.js, jquery.easing.1.3.js и в каком виде их нужно поместить в папку js. (Если это файлы, как script.js, то где текст? Если это ссылки на готовые библиотечные проги, то в каком виде их в папке указать?) Извините мою серость, но пожалуйста поясните!

    • Игорь

      Уважаемый автор меня игнорирует и поделом! Отвечу сам себе: предложение скачать исходники для кого? Внимательнее надо быть! И ещё одно спасибо за интереснейший урок!

    • Михаил В.

      Все верно, jquery-1.4.2.js, jquery.easing.1.3.js — это стандартные библиотеки для JS. Они содержат стандартный код, в них ничего не нужно менять.

  41. Прохожий

    Спасибо, хороший мануал.
    А вот как сделать, чтобы при выборе пункта меню он оставался выбранным(т.е. применялись параметры hover), а для пункта подменю соответственно сам пункт подменю и пункт меню, которому принадлежит выбранный пункт подменю.и как дать ссылку для пункта меню, чтоб на страницу переходил, для подменю все нормально работает, а вот для пункта меню не хочет ссылаться

  42. Виктор

    Что-то не могу разобраться со стилями, где находится параметр, который отвечает за отступ между кнопками?

  43. Алексей

    jquery-1.4.2.js, jquery.easing.1.3.js – это стандартные библиотеки для JS Скажите данные библиотеки можно использовать легально или на них нужно покупать лицензию Спасибо!

  44. Алексей

    Подскажите пожалуйста как можно сделать, так чтобы при наведении мыши на подменю «Пункт1, …..» они меняли цвет Спасибо!

  45. Андрей

    А как сделать чтобы при нажатии на подпункт меню оно не сворачивалось?

  46. Игорь

    Классное меню но как с пункта сделать ссылку на документ? Не получается?

  47. Владимир

    Подскажите, почему в ИЕ9 при нажатии не открывается подменю?

  48. Banderas

    Все просто, но можете ли лучше расписать сам JS код? Например что значит
    preventDefault()
    и ещё
    not(dropDown) работает на подобе .stop(true, true)?
    зачем команды
    .parent().next() ?

    спасибо

  49. Даурен

    Здравствуйте! Помогите пожалуйста, а как сделать подпункт, то есть 3 уровня

    • Andrey Bernacki

      Делается точно так же, как и второй уровень.
      то есть на пункте меню второго уровня из которого должен выпадать 3-ий уровень меню ставим класс- class=»button». И после него делаем дополнительный пункт с классом class=»dropdown» — со своими пунктами.

      То есть технологию создания второго подуровня нужно повторить еще раз и получим 3-ий уровень.

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