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

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

jquery меню

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

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

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

Шаг 1.

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//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.

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

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

Файл 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. Ваши отзывы и вопросы по статье жду в комментариях.

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