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

Дата публикации: 2011-01-18

jquery меню

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

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

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

Шаг 1.

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Colorful Content Accordion | Tutorialzine demo</title>

</head>

<body>

<ul>

<li class="button"><a href="#" class="box1">ГЛАВНАЯ</a></li>

<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>

<ul>

<ul>

<li><a href="#">Пункт1</a></li>

<li><a href="#">Пункт2</a></li>

<li><a href="#">Пункт3</a></li>

</ul>

</li>

</ul>

</li>

<ul>

<li class="button"><a href="#" class="box3">ВИДЕО</a></li>

<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>

<ul>

<li class="button"><a href="#" class="box4">БЛОГИ</a></li>

<ul>

<li><a href="#">Пункт1</a></li>

<li><a href="#">Пункт2</a></li>

<li><a href="#">Пункт3</a></li>

</ul>

</li>

</ul>

</li>

<ul>

<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>

<ul>

<li class="button"><a href="#" class="box6">КОНТАКТЫ</a></li>

<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 должен содержать этот код:

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;
}

body{

background: #000;

margin: 0;

padding: 0;

}

ul{

margin: 0;

padding: 0;

}

li{

list-style :none;

text-align: left;

}

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. Делать это необязательно. Просто в этом случае фон страницы будет черного цвета.

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

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

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

Шаг 2.

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

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

<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>

<ul>

<li class="button"><a href="#" class="box1">ГЛАВНАЯ</a></li>

<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 (стили для пунктов меню и их подпунктов, соответственно). Рассмотрим их:

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; - внутренний отступ блока;
}

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. За счет свойств данного блока наше меню расположено по центру экрана.

ul.container{
 width: 240px; - ширина блока;
 margin: 0 auto; -  внешние отступы блока(слева и справа задано auto – блок находится по середине экрана);
 padding: 0; - внутренние отступы блока;
}

ul.container{

width: 240px; - ширина блока;

margin: 0 auto; - внешние отступы блока(слева и справа задано auto – блок находится по середине экрана);

padding: 0; - внутренние отступы блока;

}

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

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

$(document).ready(function(){
 $.easing.def = &quot;easeInOutQuad&quot;;
 $('li.button a').click(function(e){
  var dropDown = $(this).parent().next();
  $('.dropdown').not(dropDown).slideUp('slow');
  dropDown.slideToggle('slow');
  e.preventDefault();
 }) 
});

$(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

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

PSD to HTML

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

Смотреть

Метки: jquery меню, вертикальное меню jquery, меню css jquery

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

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

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

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

labintech
2011-01-18 в 22:08

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

Войдите, чтобы ответить
Владимир
2011-01-18 в 22:23

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

Войдите, чтобы ответить
борис
2011-01-18 в 22:27

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

Войдите, чтобы ответить
Иван
2011-01-18 в 22:42

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

Войдите, чтобы ответить
Андрей
2011-01-18 в 22:42

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

Войдите, чтобы ответить
Василий
2011-01-18 в 23:14

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

Войдите, чтобы ответить
Александр
2011-01-19 в 03:32

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

Войдите, чтобы ответить
Сергей
2011-01-19 в 04:10

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

Войдите, чтобы ответить
Петр
2011-01-19 в 05:16

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

Войдите, чтобы ответить
Александр
2011-01-19 в 05:40

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

Войдите, чтобы ответить
Александр
2011-01-19 в 06:24

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

Войдите, чтобы ответить
Юрий
2011-01-19 в 07:57

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

Войдите, чтобы ответить
Алёна
2011-01-19 в 08:59

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

Войдите, чтобы ответить
- Михаил В.
  2011-01-20 в 11:34
  
  Вопрос с IE7 решен.
  
  Войдите, чтобы ответить
Виталий
2011-01-19 в 09:08

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

Войдите, чтобы ответить
Юлия
2011-01-19 в 09:22

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

Войдите, чтобы ответить
- Михаил В.
  2011-01-20 в 11:35
  
  Конечно можно, почему нет.
  
  Войдите, чтобы ответить
Сергей
2011-01-19 в 10:27

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

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

Войдите, чтобы ответить
- Михаил В.
  2011-01-20 в 11:36
  
  Сделайте margin: 0; и поставьте float: left; или float: right, соответственно.
  
  Войдите, чтобы ответить
Евгения
2011-01-19 в 10:46

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

Войдите, чтобы ответить
Игорь
2011-01-19 в 11:36

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

Войдите, чтобы ответить
Владимир
2011-01-19 в 11:44

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

Войдите, чтобы ответить
Елена
2011-01-19 в 11:50

Спасибо!

Войдите, чтобы ответить
Андрей
2011-01-19 в 13:05

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

Войдите, чтобы ответить
- nik
  2011-01-23 в 00:39
  
  в templates нужно ставить
  
  Войдите, чтобы ответить
Валентин
2011-01-19 в 13:10

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

Войдите, чтобы ответить
- Михаил В.
  2011-01-20 в 11:40
  
  Так понимаю, что Вы хотите сделать выпадающий блок по клику. Если это так, то создайте два блока. Сделайте один видимым, другой невидимым. Привяжите данный скрипт и все. По клику первого блока у Вас будет выезжать второй блок, в котором будет находиться необходимый контент.
  
  Войдите, чтобы ответить
Наталия
2011-01-19 в 13:26

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

Войдите, чтобы ответить
Станислав
2011-01-19 в 21:15

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

Войдите, чтобы ответить
nikolay
2011-01-19 в 21:25

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

Войдите, чтобы ответить
Олег
2011-01-19 в 22:24

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

Войдите, чтобы ответить
Virturum
2011-01-20 в 10:47

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

Войдите, чтобы ответить
Елена
2011-01-20 в 19:32

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

Войдите, чтобы ответить
Paul
2011-01-20 в 20:28

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

Войдите, чтобы ответить
Таня
2011-01-21 в 09:51

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

Войдите, чтобы ответить
- Михаил В.
  2011-01-22 в 11:59
  
  Просто вставьте в необходимое вам место весь код, заключенный в блок main, добавьте все стили и подключите скрипты.
  
  Войдите, чтобы ответить
Наталия
2011-01-21 в 13:56

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

Войдите, чтобы ответить
yota-sport.info
2011-01-23 в 00:42

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

Войдите, чтобы ответить
aiko2011(Сергей)
2011-01-24 в 18:46

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

Войдите, чтобы ответить
Сергей Петрович
2011-01-24 в 21:31

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

Войдите, чтобы ответить
- Михаил В.
  2011-01-25 в 18:43
  
  Где Вы того желаете. Данная папка создана для того, чотбы все не растерять. Скачайте демо — все поймете.
  
  Войдите, чтобы ответить
nikjar215 (Николай)
2011-01-25 в 15:37

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

Войдите, чтобы ответить
Андрей
2011-01-25 в 21:40

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

Войдите, чтобы ответить
Анатолий
2011-01-26 в 12:11

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

Войдите, чтобы ответить
- Михаил В.
  2011-01-27 в 14:55
  
  Почему же. Возможно. Но просто какой в этом смысл(при нажатии на кнопку пункта и выезжали подпункты меню, и происходил переход на указанную страницу). Данное меню используется в целях экономии места страницы и красочного эффекта. И с точки зрения юзабилити это оченьудобно.
  
  Войдите, чтобы ответить
Наталия
2011-02-07 в 00:33

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

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

Войдите, чтобы ответить
Алексей
2011-02-17 в 21:56

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

Войдите, чтобы ответить
- Andrey Bernacki
  2011-02-17 в 23:30
  
  Скорее всего проблема с подключением файла стилей. Высылайте на e-mail код и вопрос продублируйте в письме тоже.
  
  Войдите, чтобы ответить
  - Розик
    2013-02-28 в 08:37
    
    У меня та же проблема. Если отдельно запустить код, который отвечает за меню, то все прекрасно работает. Но вот когда загружаешь на страницу сайта сразу видны все пункты(кнопок нет). Подскажите пожалуйста в чем может быть ошибка?
    
    Войдите, чтобы ответить
    - Андрей Кудлай
      2013-02-28 в 11:03
      
      Создайте тему на нашем форуме, покажите что сделано и тогда можно будет что-то посоветовать.
      
      Войдите, чтобы ответить
      - Розик
        2013-02-28 в 13:16
        
        Спасибо, вроде разобралась. Только вот сейчас почему то подменю у меня появляется максимум на несколько секунд и сразу исчезает. Подскажите пожалуйста с чем это может быть связанно?
      - Андрей Кудлай
        2013-02-28 в 13:28
        
        Логично, что с непредусмотренной работой кода. К сожалению, я не телепат и кода Вашего не вижу
        Повторюсь, милости просим на форум, где можно выложить код и посмотреть что и как там у Вас.
      - Розик
        2013-02-28 в 14:15
        
        спасибо большое за статью, очень помогла)) вроде разобралась и даже кое-что начала понимать))
      - Андрей Кудлай
        2013-02-28 в 14:27
        
        Пожалуйста))
Виталий
2011-02-22 в 01:29

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

Спасибо.

Войдите, чтобы ответить
Игорь
2011-02-26 в 04:23

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

Войдите, чтобы ответить
- Игорь
  2011-02-28 в 13:00
  
  Уважаемый автор меня игнорирует и поделом! Отвечу сам себе: предложение скачать исходники для кого? Внимательнее надо быть! И ещё одно спасибо за интереснейший урок!
  
  Войдите, чтобы ответить
- Михаил В.
  2011-02-28 в 18:16
  
  Все верно, jquery-1.4.2.js, jquery.easing.1.3.js — это стандартные библиотеки для JS. Они содержат стандартный код, в них ничего не нужно менять.
  
  Войдите, чтобы ответить
Прохожий
2011-04-09 в 06:47

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

Войдите, чтобы ответить
- Дарья
  2011-04-12 в 11:24
  
  Я могу Вам помочь со вторым вопросом о ссылке, пишите мне на почту, объясню.
  А вот вопрос про выбранный пункт меня меня тоже интересует.
  utro_v_lesu@list.ru
  
  Войдите, чтобы ответить
Виктор
2011-05-15 в 10:08

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

Войдите, чтобы ответить
Алексей
2011-05-16 в 18:16

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

Войдите, чтобы ответить
- Andrey Bernacki
  2011-05-16 в 22:49
  
  Можно использовать…
  
  Войдите, чтобы ответить
Алексей
2011-05-16 в 18:22

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

Войдите, чтобы ответить
Андрей
2011-08-02 в 10:40

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

Войдите, чтобы ответить
Игорь
2011-10-21 в 03:55

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

Войдите, чтобы ответить
Владимир
2011-12-02 в 20:10

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

Войдите, чтобы ответить
Banderas
2011-12-12 в 09:38

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

спасибо

Войдите, чтобы ответить
Даурен
2011-12-26 в 05:54

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

Войдите, чтобы ответить
- Andrey Bernacki
  2011-12-26 в 11:57
  
  Делается точно так же, как и второй уровень.
  то есть на пункте меню второго уровня из которого должен выпадать 3-ий уровень меню ставим класс- class=»button». И после него делаем дополнительный пункт с классом class=»dropdown» — со своими пунктами.
  
  То есть технологию создания второго подуровня нужно повторить еще раз и получим 3-ий уровень.
  
  Войдите, чтобы ответить
  - Виктор
    2013-01-07 в 18:08
    
    Я всё сделал так как вы говорите, но при нажатии на »Пункт 1» меню закрывается полностью.
    
    Войдите, чтобы ответить