Доброго времени  суток, друзья!

Продолжая тему вертикальных аккордеонных меню, затронутую в предыдущих статьях, сегодня я вновь хочу поделиться таким меню, но выполненном на более популярной javascript-библиотеке – jQuery. Данное меню очень простое, без использования навороченных плагинов, и основано на использовании стандартных эффектов анимации jQuery, а именно эффектов скольжения – slideDown и slideUp, которые посредством изменения высоты элементов плавно раскрывают и скрывают эти элементы (в нашем случае это список ссылок – подпунктов меню).

В разметке html-страницы, как обычно, ничего особенного нет. Сначала подключаем таблицу стилей, потом – jQuery, после этого следует небольшой скрипт для меню. В теле станицы – основная разметка. Это список пунктов, которые представлены тегами h3 и списки подпунктов – непосредственно ссылок на нужные страницы проекта. Единственное, на что хотелось бы обратить внимание, так это то, что для открытия необходимого пункта меню по умолчанию используется класс active. Данный класс может быть использован для сохранения информации об активном пункте меню в куке.

Меню вертикальное на jQuery и CSS3






ПУНКТ №1

Ссылка 1.1
Ссылка 1.2
Ссылка 1.3
Ссылка 1.4




ПУНКТ №2

Ссылка 2.1
Ссылка 2.2
Ссылка 2.3
Ссылка 2.4
Ссылка 2.5



ПУНКТ №3

Ссылка 3.1
Ссылка 3.2
Ссылка 3.3
Ссылка 3.4
Ссылка 3.5
Ссылка 3.6
Ссылка 3.7
Ссылка 3.8



ПУНКТ №4

Ссылка 4.1
Ссылка 4.2
Ссылка 4.3
Ссылка 4.4

Стилизация элементов зависит от общего дизайна проекта, и приведена здесь только в качестве примера:

* {margin: 0; padding: 0;}
body {font-family: Nunito, arial, verdana;}
#accordion > ul >li >ul {	height:250px;}		
#accordion li {	list-style-type: none;}
#accordion ul ul {display: none;}
#accordion li.active ul {display: block;}

#accordion {
	background: #fff;
	width: 250px;
	margin: 100px auto 0 auto;
	border: 1px solid #ccc;
}

#accordion h3 {
	color: #567;
	font-size: 12px;
	line-height: 34px;
	padding: 0 10px;
	cursor: pointer;
	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
}

#accordion h3:hover {
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}

#accordion ul ul li a {
	color:#555;
	text-decoration: none;
	font-size: 11px;
	line-height: 27px;
	display: block;
	padding: 0 25px;
	transition: all 0.15s;
}

#accordion ul ul li a:hover {
	color:#55d;	
	background: #f6f6f6;
}

В итоге получаем простое меню-аккордеон.

Вот, собственно и всё! В следующей статье постараюсь рассказать о меню, выполненном только средствами JavaScript.

До встречи!