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

jQuery 31.03.2013

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

ДЕМО

ИСХОДНИКИ

Преимуществом такого аккордеона является то, что в нем выводится количество информации в цифровом обозначении. И так приступим. Для начала мы создадим неупорядоченный список для разметки HTML:

<div id="wrapper-250">

<ul class="accordion">
 <li id="one" class="files">

<a href="#" class="">Мои файлы<span>495</span></a>

<ul class="sub-menu" style="display: none; ">

<li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>
 <li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>

<li><a href="#"><em>03</em>FTP Сервер<span>366</span></a></li>

<li><a href="#"><em>04</em>Google Drive<span>1</span></a></li>

 <li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>

</ul>

</li>

</ul>

Теперь рассмотрим стили CSS, данный код не является чем-то новым, мы будем использовать градиентную заливку и некоторые правила. Все достаточно просто, можете в этом сами убедиться:

.accordion > li:hover > a,
.accordion > li:target > a,
.accordion > li > a.active {
    color: #3e5706;
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);

    /*background: url(../img/active.png) repeat-x;*/
    background: #a5cd4e;
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
}
.accordion > li:hover > a span,
.accordion > li:target > a span,
.accordion > li > a.active span {
    color: #fdfdfd;
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);
    background: #3e5706;
}
.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before,
.accordion li.files > a.active:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before,
.accordion li.mail > a.active:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before,
.accordion li.cloud > a.active:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before,
.accordion li.sign > a.active:before { background-position: -72px -24px; }

Для очистки мы будем использовать height, overflow, etc., также для окрытия и закрытия мы будем использовать правила "display: none;” и “display: block”.

.accordion li > .sub-menu {
	display: none;
}

.accordion li:target > .sub-menu {
	display: block;
}

Так как CSS3 поддерживают не все браузеры, мы будем использовать jQuery, еще, данный скрипт, поможет сделать данный аккордеон более привлекательным. Скрип jQuery мы будем подключать с репозитория Google.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

	$(document).ready(function() {

		var accordion_head = $('.accordion > li > a'),
			accordion_body = $('.accordion li > .sub-menu');

accordion_head.first().addClass('active').next().slideDown('normal');

		accordion_head.on('click', function(event) {

			event.preventDefault();

			if ($(this).attr('class') != 'active'){
				accordion_body.slideUp('normal');
				$(this).next().stop(true,true).slideToggle('normal');
				accordion_head.removeClass('active');
				$(this).addClass('active');
			}
		});

Далее мы задаем правила для хранения двух переменных, избегая скачков элементов:

var accordion_head = $('.accordion > li > a'),
			accordion_body = $('.accordion li > .sub-menu');

Эта строчка позволяет открыть первый пункт при загрузке:

var accordion_head = $('.accordion > li > a'),
			accordion_body = $('.accordion li > .sub-menu');

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

event.preventDefault();

Данный код позволяет при открытии одной вкладки закрывать другие:

if ($(this).attr('class') != 'active'){
				accordion_body.slideUp('normal');
				$(this).next().stop(true,true).slideToggle('normal');
				accordion_head.removeClass('active');
				$(this).addClass('active');
			}