От автора: Сегодня мы сделаем простое, но привлекательное меню с помощью CSS, JQuery.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Шаг 1.
Для начала создайте папку, например folder. В нее поместите файл index.html со следующим кодом:

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Colorful Content Accordion | Tutorialzine demo</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div id="main"> <ul class="container"> <li class="menu"> <ul> <li class="button"><a href="#" class="box1">ГЛАВНАЯ</a></li> <li class="dropdown"> <ul> <li><a href="#">Пункт1</a></li> <li><a href="#">Пункт2</a></li> <li><a href="#">Пункт3</a></li> <li><a href="#">Пункт4</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="box2">ФОТО</a></li> <li class="dropdown"> <ul> <li><a href="#">Пункт1</a></li> <li><a href="#">Пункт2</a></li> <li><a href="#">Пункт3</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="box3">ВИДЕО</a></li> <li class="dropdown"> <ul> <li><a href="#">Пункт1</a></li> <li><a href="#">Пункт2</a></li> <li><a href="#">Пункт3</a></li> <li><a href="#">Пункт4</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="box4">БЛОГИ</a></li> <li class="dropdown"> <ul> <li><a href="#">Пункт1</a></li> <li><a href="#">Пункт2</a></li> <li><a href="#">Пункт3</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="box5">ИГРЫ</a></li> <li class="dropdown"> <ul> <li><a href="#">Пункт1</a></li> <li><a href="#">Пункт2</a></li> <li><a href="#">Пункт3</a></li> <li><a href="#">Пункт4</a></li> <li><a href="#">Пункт5</a></li> <li><a href="#">Пункт6</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="box6">КОНТАКТЫ</a></li> <li class="dropdown"> <ul> <li><a href="#">Пункт1</a></li> <li><a href="#">Пункт2</a></li> <li><a href="#">Пункт3</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html> |
Затем в папке folder создайте папку style и поместите в нее файл style.css. Файл style.css должен содержать этот код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | body{ background: #000; margin: 0; padding: 0; } ul{ margin: 0; padding: 0; } li{ list-style :none; text-align: left; } a{ color: #000; text-decoration: none; } a:hover{ text-decoration: underline; } #main{ width: 100%; height: 620px; background: url(../img/font.jpg); margin: 0; } ul.container{ width: 240px; margin: 0 auto; padding: 0; } li.menu{ width: 240px; padding: 5px 0; } li.button a{ width: 200px; height: 34px; display: block; overflow: hidden; position: relative; font-family: Arial,Helvetica,sans-serif; font-size: 21px; padding: 10px 20px 0 20px; } li.button a:hover{ text-decoration: none; } li.button a span{ /* This span acts as the right part of the section's background */ height:44px; position:absolute; right:0; top:0; width:4px; display:block; } li.button a.box1, li.button a.box2, li.button a.box3, li.button a.box4, li.button a.box5, li.button a.box6{ background: url(../img/point.png); color :#ccc; border: solid 1px #ccc; } .dropdown{ width: 242px; display: none; } .dropdown li{ background: url(../img/point.png); border: 1px solid #ccc; margin: 5px 0; padding: 4px 18px; } |
Также не забываем про наши скрипты. В папке folder создаем папку js и помещаем в нее скрипт jquery-1.4.2.js, jquery.easing.1.3.js и script.js.
Чтобы наша страничка была не такой унылой, я создал для нее красочный фон. Для этого в папке folder необходимо создать папку img и поместить в нее файл font.jpg. Делать это необязательно. Просто в этом случае фон страницы будет черного цвета.
После того как Вы выполнили вышеуказанные действия, в окне Вашего браузера появится вот такая вот страничка:
Таким образом, мы создали вертикальное меню с помощью CSS, JQuery с выпадающими подпунктами. Для того чтобы увидеть подпункты меню, необходимо кликнуть на соответствующий пункт меню. Повторный клик по соответствующему пункту меню вернет его в исходное состояние.
Шаг 2.
Для того чтобы понять, как устроена работа данного меню, рассмотрим исходные коды файлов index.html, style.css и script.js.
Итак, рассмотрим файл index.html. А именно вот эту часть кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <li class="menu"> <ul> <li class="button"><a href="#" class="box1">ГЛАВНАЯ</a></li> <li class="dropdown"> <ul> <li><a href="#">Пункт1</a></li> <li><a href="#">Пункт2</a></li> <li><a href="#">Пункт3</a></li> <li><a href="#">Пункт4</a></li> </ul> </li> </ul> </li> |
Она представляет собой в браузере пункт меню "ГЛАВНАЯ" с раскрывающимися подпунктами меню "Пункт1", "Пункт2", "Пункт3", "Пункт4".
Подпункты меню "Пункт1", "Пункт2", "Пункт3", "Пункт4" скрыты за счет свойства display: none;. Для того чтобы увидеть второй уровень меню Вам необходимо сделать один клик по пункту меню "ГЛАВНАЯ". После этого наше меню плавно раздвигается.
Данный эффект реализован при помощи ява-скрипта script.js.
Пункты меню "ФОТО", "ВИДЕО", "БЛОГИ", "ИГРЫ", "КОНТАКТЫ" реализованы аналогичным образом. Отличие друг от друга заключается в количестве подпунктов меню, поэтому их рассматривать мы не будем.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееТакже стоит обратить внимание на корректное подключение стилей и скриптов. Т.к. если неправильно подключить хотя бы один из скриптов, то наше меню работать будет не так, как нам нужно.
Файл style.css.
В этом файле я хочу обратить Ваше внимание на стили классов button и dropdown (стили для пунктов меню и их подпунктов, соответственно). Рассмотрим их:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | li.button a{ width: 200px; - ширина блока; height: 34px; - высота блока; display: block; - блочное расположение блоков; font-family: Arial,Helvetica,sans-serif; - шрифт текста блока; font-size: 21px; - размер шрифта текста блока; padding: 10px 20px 0 20px; - внутренние отступы блока; } .dropdown{ width: 242px; - ширина блока; display: none; - скрытое отображение блока; } .dropdown li{ background: url(../img/point.png); - фон блока, представленный картинкой; border: 1px solid #ccc; - рамка блока цвета #ccc в 1 пиксель; margin: 5px 0; - внешний отступ блока; padding: 4px 18px; - внутренний отступ блока; } |
В свою очередь, все меню заключено в блок container. За счет свойств данного блока наше меню расположено по центру экрана.
1 2 3 4 5 | ul.container{ width: 240px; - ширина блока; margin: 0 auto; - внешние отступы блока(слева и справа задано auto – блок находится по середине экрана); padding: 0; - внутренние отступы блока; } |
Файл script.js. Наши пункты меню второго уровня плавно открываются и закрываются именно за счет этого скрипта.
Рассмотрим его код более детально:
1 2 3 4 5 6 7 8 9 | $(document).ready(function(){ $.easing.def = "easeInOutQuad"; $('li.button a').click(function(e){ var dropDown = $(this).parent().next(); $('.dropdown').not(dropDown).slideUp('slow'); dropDown.slideToggle('slow'); e.preventDefault(); }) }); |
Строка $.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
Узнать подробнее
Приятное меню для легких сайтов.
Интересно, но с маху разобраться сложно.
молодцы класс!!!
Папку создал,а поместить в нее не чего не получается. Просьба подскажите по подробней как?
В Опере оно работает отлично. И если это меню работает также корректно во всех браузерах … то тогда просто отлично!
Спасибо.Очень полезная информация.
Как-то оно мну не очень понравилось… Может следует форму изменить или че-нить с ним сделать другого?
Спасибо за урок!
Спасибо. Только похоже, это не подойдёт для CMS WordPress.
Андрей и Михаил спасибо. Создаю сайт и опыт на примерах можно перенять.
Считаю что неплохо… Надо подумать… Спасибо за предложение… А для чего это всё нужно???
Очень даже хорошо, да и не сложное.
Смотрю меню в IE7. Здесь между главным пунктом меню и подпунктами (например, пежду рамкой кнопки Контакты и рамкой кнопки Пункт 1) при щелчке мышью по главному пункту расстояние до выпадающего подменю то остается таким же как между кнопками в начальном состоянии, то проподает совсем, при этом граница подменю приклеивается к границе соответствующей кнопки. Проявляется это не всегда, как-то через раз. Чтобы увидеть, нужно «погонять» меню, пощелкать по кнопкам. Плохо, что здесь нельзя выложить картинки, это проще показать скринами. Видимо, это какая-то несовместимость IE, в GoogleChrome такого не заметила.
Вопрос с IE7 решен.
Спасибо за меню. Понятно и доходчиво разьяснено. Буду использовать на практике.
Спасибо за отличное и простое меню. А можно добавлять 3-4 уровень выпадения?
Конечно можно, почему нет.
Интересное меню. Спасибо.
Подскажите, а как и какие прописать операторы для выравнивания меню по левому или по правому краю вот в этой строке:
margin: 0 auto; — внешние отступы блока(слева и справа задано auto – блок находится по середине экрана);
Заранее спасибо
Сделайте margin: 0; и поставьте float: left; или float: right, соответственно.
Я конечно не мастер- я только учусь. Изучила наконец HTML. Теперь приступаю к изучению дизайна сайтов и верстке. Так что ваша помощь мне как-раз кстати. Тепрь буду разбираться в коде. Пусь это будет как экзамен для меня на знания HTML. И если честно, я в восторге от вашей работы. У меня прекрасно скопировалось. Открывается замечательно в Internet Explorer.
Спасибо. Очень хорошо.
Большое спасибо. Очень интересный и своевременный материал.
Хотелось бы чтобы блоки основного меню были расположены горизонтально в одну линию.
Но… Есть идея, есть основа…, а как расположить, развернуть блоки меню, придется разобраться самостоятельно.
Спасибо!!!
Спасибо!
Господа, кто нибудь знает — если я хочу прикрутить такое меню к сайту на joomla, где создавать папку — в templates или в корневой папке?
в templates нужно ставить
А как привязать к каждому выпадающему пункту меню содержимое этого пункта, допустим какой нибудь текст или подпункты меню?
также, картинку или фон меню можно менять?
Так понимаю, что Вы хотите сделать выпадающий блок по клику. Если это так, то создайте два блока. Сделайте один видимым, другой невидимым. Привяжите данный скрипт и все. По клику первого блока у Вас будет выезжать второй блок, в котором будет находиться необходимый контент.
Спасибо! Очень интересная статья для практического применения.
Спасибо за полезную информацию.
Я новенький-впечатляет!!
Мне понравилось. благодарю.
«2Андрей:19.01.2011 в 13:05″
Все и во всех CMS надо делать в templates. И при переносе не будет возникать ни каких сложностей.
Михаил. спасибо. Очень хорошо и понятно разъяснено. Я ещё только в начале пути блогостроения, так сказать, первые шаги делаю, в моём возрасте это не просто, но и мне было почти всё понятно и очень интересно. Утаскиваю к себе в закрома с ссылочкой.
Спасибо! Меню очень понравилось — просто обожаю прозрачные или полупрозрачные объекты, такие как это меню))) Хочу использовать его в своём сайте, который собираюсь делать, ещё раз Спасибо Огромное!=)
классное меню, простое и понятное, можно втулить много подпунктов и на сайте уже никогда не заблудишься))) но как поместить это меню именно в то место куда мне надо?
Просто вставьте в необходимое вам место весь код, заключенный в блок main, добавьте все стили и подключите скрипты.
Спасибо, мне как раз в тему. Надо с этим разобраться по серьёзному.
Спасибо за ценную инфу пользователям!
Всегда был тупым копировальщиком кода, но сегодня даже без исходников начал сам читать, и думаю, что стал хоть что-то понимать. Успехов и удачи, признание у Вас уже есть!
Всем всё понятно кроме меня. Создать папку folder… где? в корневой папке сайта или на диске компа?
Где Вы того желаете. Данная папка создана для того, чотбы все не растерять. Скачайте демо — все поймете.
Я пока на чинающий. Но всё чётко, доступно, молодцы!
Тоже самое можно сделать и проще используя программу Adobe Dreamweaver. Она сама вставит кот в то место где должно быть выпадающее меню и создаст все скрипты и стили в отдельной папочке. Вам только надо изменить под себя фаил style.css, какой шрифт вам надо, расцветка фона, ну и т.д.
В Adobe Dreamweaver это называется меню «боян» очень удобно и просто.
Замечательное меню! Спасибо автору. Просьба: объясните для «начинающего», как можно сделать активной ссылку из кнопки пункта (а не только подпункта) по адресу страницы? Чтобы при нажатии на кнопку пункта и выезжали подпункты меню, и происходил переход на указанную страницу? Или это принципиально не возможно?
Почему же. Возможно. Но просто какой в этом смысл(при нажатии на кнопку пункта и выезжали подпункты меню, и происходил переход на указанную страницу). Данное меню используется в целях экономии места страницы и красочного эффекта. И с точки зрения юзабилити это оченьудобно.
Спасибо вам огромное!!!!
Скажите пожалуйста: у меня внизу под меню находится картинка, и в Mozille при открытии меню картинка не съезжает, а оказывается над подпунктами (закрывает их). Можно ли как нибудь сделать, чтобы картинка сдвигалась, как в остальных браузерах?
Меню очень полезное, но есть одна проблема. Сделал всё по описанию. При открытии страницы в браузере меню появляется в открытом виде(сразу видны все подпункты) и в виде текста(ни кнопок ни фона). Подскажите как справиться с этой проблемой?
Скорее всего проблема с подключением файла стилей. Высылайте на e-mail код и вопрос продублируйте в письме тоже.
У меня та же проблема. Если отдельно запустить код, который отвечает за меню, то все прекрасно работает. Но вот когда загружаешь на страницу сайта сразу видны все пункты(кнопок нет). Подскажите пожалуйста в чем может быть ошибка?
Создайте тему на нашем форуме, покажите что сделано и тогда можно будет что-то посоветовать.
Спасибо, вроде разобралась. Только вот сейчас почему то подменю у меня появляется максимум на несколько секунд и сразу исчезает. Подскажите пожалуйста с чем это может быть связанно?
Логично, что с непредусмотренной работой кода. К сожалению, я не телепат и кода Вашего не вижу
Повторюсь, милости просим на форум, где можно выложить код и посмотреть что и как там у Вас.
спасибо большое за статью, очень помогла)) вроде разобралась и даже кое-что начала понимать))
Пожалуйста))
Помогите сделать активной ссылку в главном меню. Она у меня передает параметр на сервер в базу для формирования списка подменю. Я понимаю что произойдет перезагрузка страницы, но мне это и нужно для вывода базовой информации о пункте главного меню.
Спасибо.
Спасибо, Михаил, это — очень интересно! Но пожалуйста поясните, что такое jquery-1.4.2.js, jquery.easing.1.3.js и в каком виде их нужно поместить в папку js. (Если это файлы, как script.js, то где текст? Если это ссылки на готовые библиотечные проги, то в каком виде их в папке указать?) Извините мою серость, но пожалуйста поясните!
Уважаемый автор меня игнорирует и поделом! Отвечу сам себе: предложение скачать исходники для кого? Внимательнее надо быть! И ещё одно спасибо за интереснейший урок!
Все верно, jquery-1.4.2.js, jquery.easing.1.3.js — это стандартные библиотеки для JS. Они содержат стандартный код, в них ничего не нужно менять.
Спасибо, хороший мануал.
А вот как сделать, чтобы при выборе пункта меню он оставался выбранным(т.е. применялись параметры hover), а для пункта подменю соответственно сам пункт подменю и пункт меню, которому принадлежит выбранный пункт подменю.и как дать ссылку для пункта меню, чтоб на страницу переходил, для подменю все нормально работает, а вот для пункта меню не хочет ссылаться
Я могу Вам помочь со вторым вопросом о ссылке, пишите мне на почту, объясню.
А вот вопрос про выбранный пункт меня меня тоже интересует.
utro_v_lesu@list.ru
Что-то не могу разобраться со стилями, где находится параметр, который отвечает за отступ между кнопками?
jquery-1.4.2.js, jquery.easing.1.3.js – это стандартные библиотеки для JS Скажите данные библиотеки можно использовать легально или на них нужно покупать лицензию Спасибо!
Можно использовать…
Подскажите пожалуйста как можно сделать, так чтобы при наведении мыши на подменю «Пункт1, …..» они меняли цвет Спасибо!
А как сделать чтобы при нажатии на подпункт меню оно не сворачивалось?
Классное меню но как с пункта сделать ссылку на документ? Не получается?
Подскажите, почему в ИЕ9 при нажатии не открывается подменю?
Все просто, но можете ли лучше расписать сам JS код? Например что значит
preventDefault()
и ещё
not(dropDown) работает на подобе .stop(true, true)?
зачем команды
.parent().next() ?
спасибо
Здравствуйте! Помогите пожалуйста, а как сделать подпункт, то есть 3 уровня
Делается точно так же, как и второй уровень.
то есть на пункте меню второго уровня из которого должен выпадать 3-ий уровень меню ставим класс- class=»button». И после него делаем дополнительный пункт с классом class=»dropdown» — со своими пунктами.
То есть технологию создания второго подуровня нужно повторить еще раз и получим 3-ий уровень.
Я всё сделал так как вы говорите, но при нажатии на »Пункт 1» меню закрывается полностью.