Аккордеон без списков

Попробуем реализовать меню, рассмотренное в прошлой статье, полностью отказавшись от списков.

Разметим страницу. На сей раз мы обернем весь контент, относящийся к навигации, в общий блок и зададим ему класс nav_wrap. Пункты верхних уровней сделаем заголовками со ссылками, а пункты, которые должны показываться и прятаться обернем в блок с классом sub_nav и каждую ссылку в свою очередь разместим внутри параграфа. Для меню разметка странновата, но у нас сейчас цель увидеть разницу между реализацией меню, построенном на списках и без них (к тому же разметка без списков, как нельзя лучше, подойдет для страницы вопрос-ответ):

<div class="nav_wrap">
	<h3><a href="#">Главная</a></h3>
	<h3><a href="#">Новости</a></h3>
	<div class="sub_nav">
		<p><a href="#">Хроника</a></p>
		<p><a href="#">Политика</a></p>
		<p><a href="#">Спорт</a></p>
		<p><a href="#">За рубежом</a></p>		
	</div>
	<h3><a href="#">О нас</a></h3>
	<div class="sub_nav">
		<p><a href="#">Отзывы</a></p>
		<p><a href="#">События</a></p>	
	</div>	
	<h3><a href="#">Связь с нами</a></h3>
</div>

Теперь добавим стилевые правила и получим точно такое же меню, как и в прошлом примере, только размеченное по другому (вот она вся мощь css):

.nav_wrap {
margin:20px;
width:200px;
}
.nav_wrap a {
padding:5px 10px 5px 20px;
display:block;
color:#8b8b8b;
text-decoration:none;
}
.nav_wrap h3 a {
padding-left:10px;
color:#000;
}
.nav_wrap h3 {
font-size:14px;
font-weight:bold;
color:#000;
text-decoration:none;
background:#e4e7ea;
border-bottom:1px solid #d4d9df;
}
.sub_nav {
width:100%;
display:none;
background:#ededed;
} 
.sub_nav p {
font-size:12px;
color:#8b8b8b;
border-bottom:1px solid #d4d9df;
}

Займемся анимацией. Для реализации задуманного нам на сей раз понадобится отловить клик на заголовке и показать соседний, расположенный по соседству скрытый блок. При повторном клике этот блок нужно спрятать. Возьмем js, рассмотренный в прошлой статье и слегка подправим его:

$(function () {
	$('div.nav_wrap h3').click(function() {
		var checkElement = $(this).next('.sub_nav');
		checkElement.stop().animate({'height':'toggle'}, 500);	
		if((checkElement) && (checkElement.is(':visible'))) {
			return false;
		}
	});
});

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

Обратите внимание, что на сей раз в методе next() мы указываем, что нам необходим не любой, следующий за заголовком элемент, а только блок с классом sub_nav. Если бы мы этого не сделали, то при клике на заголовок Главная спрятался бы соседний пункт меню Новости.

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

Пора демонстрировать работу начальству (какой из вариантов представить - дело вкуса). Шеф остается доволен, но выдвигает идею - было бы неплохо, что бы при клике по следующему пункту меню, предыдущий закрывался и пункты, в которых присутствует вложенность, имели какую то метку (например, стрелочку), показывающую, что внутри них прячется еще что то.

Без проблем, мы чувствуем в себе силы и готовы исполнить эти капризы... в следующей статье добавим к аккордеону все, что просит руководство.

Исходный код примера, если потребуется, качаем по ссылке ниже.