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

50

У черговий раз хочу звернути вашу не затуманений погляд на цікавий спосіб створення меню навігації в стилі «акордеон». Цей стиль навігаційного меню досить популярний і широко використовується в організації структури сайтів. В першу чергу «акордеон» привабливий своєю компактністю, що дозволяє з легкістю вмонтувати блок меню в бічну панель і прописати стільки пунктів, скільки душі завгодно. Використовуючи різноманітні функції і нові стандарти CSS3 в зв’язці з бібліотекою javascript, jQuery, можна досягти приголомшливих результатів як в оформленні, так і в розширення функціоналу меню навігації.

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

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

Відразу хочу попередити, що гарантується коректна робота меню у всіх сучасних браузерах, а ось оформлення, гаряче мною не улюблений Internet Explorer, вносить свої корективи і без підключення спеціальних фільтрів CSS, ні в яку не хоче відображати градієнт фону пунктів меню. Так що якщо ви не занадто стурбовані впливом ІЕшки на вигляд вашого сайту, давайте докладно розглянемо, як за допомогою зв’язки 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>
  • Рубрики50

    • 01Рубрика10
    • 02Рубрика15
    • 03Рубрика25
  • Архіви36

    • 01Январь5
    • 02Февраль12
    • 03Март9
    • 04Апрель10
  • Мітки30

    • 01Метка3
    • 02Метка10
    • 03Метка8
    • 04Метка9
  • Посилання

    • 01Ссылка
    • 02Ссылка
    • 03Ссылка
    • 04Ссылка
  • Управління

    • 01Войти
    • 02Регистрация
    • 03Контакты
    • 04О Сайті

Всю конструкцію упакував в блоковий елемент 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: 1px 0px 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 1px 0px 0px 0px rgba(255,255,255, .1), 1px 0px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 1px 0px 0px 0px rgba(255,255,255, .1), 1px 0px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 1px 0px 0px 0px rgba(255,255,255, .1), 1px 0px 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: 1px 0px 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 1px 0px 0px 0px rgba(255,255,255, .1), 1px 0px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 1px 0px 0px 0px rgba(255,255,255, .1), 1px 0px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 1px 0px 0px 0px rgba(255,255,255, .1), 1px 0px 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;
}

#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: 1px 0px 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 1px 0px 0px 0px rgba(255,255,255, .1), 1px 0px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 1px 0px 0px 0px rgba(255,255,255, .1), 1px 0px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 1px 0px 0px 0px rgba(255,255,255, .1), 1px 0px 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: 1px 0px 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 1px 0px 0px 0px rgba(255,255,255, .1), 1px 0px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 1px 0px 0px 0px rgba(255,255,255, .1), 1px 0px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 1px 0px 0px 0px rgba(255,255,255, .1), 1px 0px 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 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');
}
});
});

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

Для більшої ясності, прописав деякі пояснення, так що думаю більш менш зрозуміло що, куди і навіщо ))) І на цьому мабуть все! Наше чудове меню в популярному стилі «Акордеон» повністю готове до роботи. Сподіваюся, що комусь з вас, шановні читачі цього блогу, стане в нагоді на практиці даний спосіб. Ще раз дивимося приклад і якщо кому «нуна», сміливо забираємо исходники:

ДемоСкачать

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: