08.02.2018

Вертикальное меню аккордеон на jQuery

Вертикальное меню аккордеон на jQuery

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

Но в данной статье мы сделаем свое меню и поймем как оно устроено.

Для начало делаем стандартный древовидный двухуровневый список, см. ниже в коде HTML. Это и будет основой нашего меню.

Затем оборачиваем наше меню в стили, не забывая про 2 состояния .slide и .active, которые показывают, что меню раскрыто или активно в данный момент. Список меню второго уровня сразу скрываем, используя display: none, а для активного состояния display: block, все стандартно.

Далее идет скрипт, который мы активируем при нажатии на ссылку в первом уровне меню. Если подменю данного пункта не видно, тогда закрываем все другие меню

if (false == $(this).next().is(':visible')) {
	menu.find('li').removeClass('slide active');
	menu.find('ul').slideUp();
}

и скрываем/раскрываем выбранное подменю:

$(this).next().slideToggle();
$(this).parent().addClass('slide');

Вот и все, что нам нужно для неплохого меню в виде аккордеона на jQuery.

<ul class="accordeon">
	<li>
		<a href="#">Audi</a>
		<ul>
			<li><a href="#">A3</a></li>
			<li><a href="#">A4</a></li>
			<li><a href="#">A5</a></li>
			<li><a href="#">A6</a></li>
			<li><a href="#">Q3</a></li>
			<li><a href="#">Q5</a></li>
			<li><a href="#">Q7</a></li>
		</ul>
	</li>
	<li class="active">
		<a href="#">BMW</a>
		<ul>
			<li><a href="#">1 Series</a></li>
			<li><a href="#">3 Series</a></li>
			<li><a href="#">5 Series</a></li>
			<li><a href="#">X1</a></li>
			<li><a href="#">X3</a></li>
			<li><a href="#">X5</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Mercedes-Benz</a>
		<ul>
			<li><a href="#">A</a></li>
			<li><a href="#">C</a></li>
			<li><a href="#">E</a></li>
			<li><a href="#">S</a></li>
			<li><a href="#">GLA</a></li>
			<li><a href="#">GLC</a></li>
			<li><a href="#">GLE</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Volkswagen</a>
		<ul>
			<li><a href="#">Polo</a></li>
			<li><a href="#">Golf</a></li>
			<li><a href="#">Jetta</a></li>
			<li><a href="#">Passat</a></li>
			<li><a href="#">Tiguan</a></li>
			<li><a href="#">Toureg</a></li>
		</ul>
	</li>
</ul>
.accordeon,
.accordeon ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.accordeon li {
	margin: 0 0 2px 0;
	padding: 0;
}
.accordeon > li > a {
	background: #FFF;
	color: #333;
	display: block;
	font-weight: 700;
	height: 50px;
	line-height: 50px;
	padding: 0 30px;
	text-decoration: none;
	text-transform: uppercase;
	vertical-align: middle;
	width: 100%;
}
.accordeon > li.slide > a,
.accordeon > li.active > a {
	background: #1967c3;
	color: #FFF;
}
.accordeon > li > ul {
	display: none;
	width: 100%;
	background: #FFF;
	padding: 10px 0;
}
.accordeon > li.active > ul {
	display: block;
}
.accordeon > li > ul > li > a {
	padding: 5px 30px;
	text-decoration: none;
	display: block;
	color: #333;
}
$(".accordeon > li > a").click(function (e) {
	e.preventDefault();
	
	var menu = $(this).closest('.accordeon');
	
	if (false == $(this).next().is(':visible')) {
		menu.find('li').removeClass('slide active');
		menu.find('ul').slideUp();
	}
	
	$(this).next().slideToggle();
	$(this).parent().addClass('slide');
});

Демонстрация

Комментарии

Загрузка комментариев...