Главная » jQuery » Меню навигации в стиле "Аккордеон" (CSS3 + jQuery)

Меню навигации в стиле «Аккордеон» (CSS3 + jQuery)

В очередной раз, хочу обратить ваш не затуманенный взор на интересный способ создания навигации в стиле «». Этот стиль навигационного довольно популярен и широко используется в организации структуры сайтов. В первую очередь «аккордеон» привлекателен своей компактностью, что позволяет с легкостью встроить блок в боковую панель и прописать столько пунктов, сколько душе угодно. Используя всевозможные функции и новые стандарты в связке с библиотекой javascript , можно добиться потрясающих результатов как в оформлении, так и в расширении функционала навигации.

В разработке меню -"аккордеон" можно обойтись и без использования javascript, опираясь только на возможности CSS3, пример создания такого меню подробно расписан в статье Меню «Аккордеон» без javascript и изображений, но сегодня мы рассмотрим технику исполнения меню в стиле «аккордеон» с подключением jQuery плагина к работе.

 

Меню в стиле аккордеон

 

Сразу хочу предупредить, что гарантируется корректная работа меню во всех современных браузерах, а вот в оформление, горячо мною не любимый Internet Explorer, вносит свои коррективы и без подключения специальных фильтров в CSS, ни в какую не хочет отображать градиент фона пунктов меню. Так что если вы не слишком озабочены влиянием IEшки на облик вашего сайта, давайте подробным образом рассмотрим, как с помощью связки CSS3 + jQuery создать замечательный навигационный блок в стиле «Аккордеон», а для начала посмотрите пример работы меню.

HTML Разметка

Вся разметка нашего меню в Html, это вложенный неупорядоченный список, в котором мы будем отображать все ссылки основных пунктов и раскрывающихся пунктов подменю. Всему списку присвоен конкретный класс, не стал мудрить и обозвал его «accordion», что само по себе логично и прочно свяжет меню с CSS. Каждому пункту присваиваем свой индефикатор и привязываем к нему ссылку этого самого пункта. Ну и не забываем прописать подпунктам нашего меню соответствующий класс, в нашем случае это class="sub-menu". Все эти не хитрые телодвижения делаем для дальнейшей работы со стилями CSS.

<div id="wrapper-250">
<ul class="accordion">
    <li id="one">
        <a href="#one">Рубрики<span>50</span></a>
        <ul class="sub-menu">
            <li><a href="#"><em>01</em>Рубрика<span>10</span></a></li>
			<li><a href="#"><em>02</em>Рубрика<span>15</span></a></li>
			<li><a href="#"><em>03</em>Рубрика<span>25</span></a></li>
        </ul>
    </li>
    <li id="two">
        <a href="#two">Архивы<span>36</span></a>
        <ul class="sub-menu">
            <li><a href="#"><em>01</em>Январь<span>5</span></a></li>
			<li><a href="#"><em>02</em>Февраль<span>12</span></a></li>
			<li><a href="#"><em>03</em>Март<span>9</span></a></li>
			<li><a href="#"><em>04</em>Апрель<span>10</span></a></li>
        </ul>
    </li>
    <li id="three">
        <a href="#three">Метки<span>30</span></a>
        <ul class="sub-menu">
            <li><a href="#"><em>01</em>Метка<span>3</span></a></li>
			<li><a href="#"><em>02</em>Метка<span>10</span></a></li>
			<li><a href="#"><em>03</em>Метка<span>8</span></a></li>
			<li><a href="#"><em>04</em>Метка<span>9</span></a></li>
        </ul>
    </li>
    <li id="four">
        <a href="#four">Ссылки</a>
        <ul class="sub-menu">
            <li><a href="#"><em>01</em>Ссылка</a></li>
			<li><a href="#"><em>02</em>Ссылка</a></li>
			<li><a href="#"><em>03</em>Ссылка</a></li>
			<li><a href="#"><em>04</em>Ссылка</a></li>
        </ul>
    </li>
	<li id="five">
        <a href="#five">Управление</a>
        <ul class="sub-menu">
            <li><a href="#"><em>01</em>Войти</a></li>
			<li><a href="#"><em>02</em>Регистрация</a></li>
			<li><a href="#"><em>03</em>Контакты</a></li>
			<li><a href="#"><em>04</em>О Сайте</a></li>
        </ul>
    </li>
</ul>
</div>

Всю конструкцию упаковал в блочный элемент div с определенным индификотором id="wrapper-250", для более удобного редактирования размеров нашего меню через CSS. В принципе там и регулировать то нечего, в данном примере выставляется только ширина навигационного блока в пределах 250px и все.

 

CSS Стили

Редакция кода CSS выглядит очень простой, все по накатанной используя базовые настройки и немного магии CSS3 в виде добавления функций линейного градиента в оформление пунктов меню. Единственное на что стоит обратить внимание, это добавленный класс “active” ссылкам пунктов меню, который будет использоваться в jQury коде, тем самым обеспечивая прочную связку CSS+jQuery.

#wrapper-250 {
width:250px;
margin:0 auto;
}
.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}
.accordion li {
	list-style: none;
}
/* Макет и Стиль */
.accordion li > a {
	display: block;
	position: relative;
	min-width: 110px;
	padding: 0 10px 0 30px;
	height: 32px;
    color: #fdfdfd;
	font: bold 12px/32px Arial, sans-serif;
	text-decoration: none;
	text-shadow: 0px 1px 0px rgba(0,0,0, .35);
    background: #6c6e74;
	background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
	background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.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: #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 > a span {
    display: block;
    position: absolute;
    top: 7px;
    right: 0;
    padding: 0 10px;
    margin-right: 10px;
    font: normal bold 12px/18px Arial, sans-serif;
    background: #404247;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
    box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.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;
}
/* Подменю */
.sub-menu li a {
    color: #797979;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    background: #e5e5e5;
    border-bottom: 1px solid #c9c9c9;
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.sub-menu li:hover a { background: #efefef; }
.sub-menu li:last-child a { border: none; }
.sub-menu li > a span {
    color: #797979;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    background: transparent;
    border: 1px solid #c9c9c9;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.sub-menu em {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 14px;
    color: #a6a6a6;
    font: normal 10px/32px Arial, sans-serif;
}
/* функциональность */
 
.accordion li > .sub-menu {
    display: none;
}
.accordion li:target > .sub-menu {
    display: block;
}

 

jQuery

Для того чтобы завести наше меню, сделать его полностью работоспособным, необходимо подключить последнюю версию библиотеки jQuery от Google, хотя никто не мешает вам разместить jQuery плагин у себя на сервере, выбирать вам. Затем непосредственно на странице HTML, лучше в нижней ее части, добавить следующий код исполняющего javascript:

<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');
			}
 
		});
 
	});
 
</script>

Для большей ясности, прописал некоторые пояснения, так что думаю более менее-понятно что, куда и зачем ))) И на этом пожалуй все! Наше замечательное меню в популярном стиле «Аккордеон» полностью готово к работе. Надеюсь, что кому то из вас, уважаемые читатели этого блога, пригодится на практике данный способ. Еще раз смотрим пример и если кому «нуна», смело забираем исходники:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

25 комментариев
  1. DmIgn says:

    По поводу того что бы на каждом разделе открывался нужный пункт:

    У меня статика все HTML и без аякса, добавил на нужный пункт class="active", соответственно на нужной странице и в скрипте просто:

    active = $('.active')

    заменил это

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

    на это

    active.next ().slideDown ('normal');

    может кому поможет.

    Ответить
  2. Руслан says:

    Я из этого меню убрал подпункты из каждого раздела, т.е. оставил только главные категории. Подставил ссылки, но при клике на них естественно ничего не открывается. Я так понимаю нужно изменять в джава ?

    $(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');

    }

    });

    });

    Ответить
«12
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru