Меню аккордеон

В примере представлены два варианта вертикального меню "Аккордеон".

В первом варианте, при клике на корневом пункте, показываются подменю второго уровня (если таковые имеются). Что бы их свернуть, требуется еще раз кликнуть на корневом пункте меню. Таким образом, можно сделать видимыми все скрытые пункты.

Второй вариант демонстрирует несколько другой алгоритм работы. Единовременно видимым остается только подменю активного корневого пункта. При клике на следующем корневом пункте текущее подменю прячется и открывается подменю второго уровня, принадлежащее корневому пункту, по которому был сделан клик.

В этом материале показан код обоих вариантов, даны ссылки на демонстрационный пример и скачивание архива с примерами. О том, как написать подобный код самостоятельно, подробно рассказывается в статьях Простейший аккордеон и Расширяем функциональность аккордеона.

Первый вариант. Меню Аккордеон без автоматического закрытия подменю.

html разметка

<ul id="nav_list_first" class="nav_list">
	<li><a href="#">Главная</a></li>
	<li><a href="#">Новости</a>
		<ul>
			<li><a href="#">Хроника</a></li>
			<li><a href="#">Политика</a></li>
			<li><a href="#">Спорт</a></li>
			<li><a href="#">За рубежом</a></li>
		</ul>	
	</li>
	<li><a href="#">О компании</a>
		<ul>
			<li><a href="#">Отзывы</a></li>
			<li><a href="#">События</a></li>
		</ul>	
	</li>
	<li><a href="#">Связь с нами</a>
		<ul>
			<li><a href="#">Написать нам</a></li>
			<li><a href="#">Наши контакты</a></li>
		</ul>		
	</li>
</ul>

Вариант стилевого оформления:

.nav_list {
margin:20px;
width:200px;
list-style:none;
}
.nav_list li {
position:relative;
}
.nav_list li a {
padding:5px 10px 5px 20px;
display:block;
font-size:14px;
font-weight:bold;
color:#000;
text-decoration:none;
background:#e4e7ea;
border-bottom:1px solid #d4d9df
}
.nav_list li span {
width:0;
height:0;
position:absolute;
top:11px;
left:6px;
border-top:3px solid transparent;
border-bottom:3px solid transparent;
border-left:6px solid #000;
}
.nav_list li.active span {
border-top:6px solid #000;
border-left:3px solid transparent;
border-right:3px solid transparent;
}

.nav_list ul {
margin:0;
display:none;
}
.nav_list ul li {
position:static;
}
.nav_list ul a  {
padding-left:20px;
font-size:12px;
color:#8b8b8b;
background:#ededed;
}

jQuery код:

$(function () {
	var el = $('#nav_list_first li a');
	$('#nav_list_first li:has("ul")').append('<span></span>');		
	el.click(function() {
		var checkElement = $(this).next();	
		
		checkElement.stop().animate({'height':'toggle'}, 500).parent().toggleClass('active');
		if(checkElement.is('ul')) {
			return false;
		}		
	});
});

Второй вариант. Меню Аккордеон с автоматическим закрытием неактивного подменю.

html и css код остается без изменений. Нужно только поменять id у родительского контейнера (ul), если предполагается разместить оба варианта на одной странице.

jQuery код для второго варианта (в примере оба меню размещены в одном документе):

$(function () {
	var el = $('#nav_list_second li a');//здесь обращение идет к ul с другим id
	$('#nav_list_second li:has("ul")').append('<span></span>');
	el.click(function() {
		var checkedElement = $(this).next(),
			visibleElement = $('#nav_list_second ul:visible');
			
		visibleElement.stop().animate({'height':'toggle'}, 500).parent().removeClass('active');		
		if((checkedElement.is('ul')) && (!checkedElement.is(':visible'))) {
			checkedElement.stop().animate({'height':'toggle'}, 500).parent().addClass('active');
			return false;
        }	
		if((checkedElement.is('ul')) && (checkedElement.is(':visible'))) {
			return false;
		}
	});
});

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

Меню протестированы в IE 7-8-9, Chrome, Safari, Opera, FF и везде демонстрируют одинаковый результат.