SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

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

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

Разметим страницу. На сей раз мы обернем весь контент, относящийся к навигации, в общий блок и зададим ему класс 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. Если бы мы этого не сделали, то при клике на заголовок Главная спрятался бы соседний пункт меню Новости.

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

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

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

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

Скачать готовый код

Автор: Super User

Комментарии  

 
0 # Николай 04.01.2013 16:21
Полагаю, метод next() в третьем варианте не совсем уместен. Нажатие на пункт "Главная" вызывает функцию slideDown(), визуальное воздействие которой в данном случае незаметно. Последующее нажатие на тот же пункт при помощи slideUp() свернет ближайшего соседа, то есть раздел "Новости".
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Админ 25.03.2013 12:26
Спасибо за Ваш комментарий. Третий пример на данный момент было вообще нельзя использовать. Полностью переработал статью, оставил лишь один метод с помощью animate() - все остальное было лишним и только запутывало.
Еще раз спасибо.
Ответить | Ответить с цитатой | Цитировать