Створюємо блок навігації в стилі Акордеон

36

Создаем блок навигации в стиле Аккордеон

Сьогодні розповім і покажу як зробити простий і красивий, а головне функціональний блок навігації в стилі «Акордеон». З різними видами і формами таких навігаційних панелей, напевно стикався кожен блукаючи по просторах Інтернету. Все більшу популярність знаходить цей стиль в середовищі блогерів, з підвищенням інформативності блогів, гостро постає питання вільного простору на сторінках щоденників та інших ресурсів. «Акордеон» дозволяє розвантажити часом через чур захаращений сайд-бар і вивільнити місце під рекламу або додаткові блоки з контентом. Широко використовує «Акордеон» у своїх роботах над шаблонами для WordPress, всім відомий Goodwin.

Уявляю вашій увазі невеликий урок по створенню якісного, з невеликою кількістю HTML, CSS, JavaScript коду і звичайно з красивим інтерфейсом, блоку навігації в стилі «Акордеон».

Блок навигации в стиле Аккордеон

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

ДемоСкачать

І так, для роботи нам знадобитися насамперед правильна розмітка HTML-сторінки, підключений JavaScript, і для формування зовнішнього вигляду трохи магії CSS.

1. HTML

Для формування структури панелей ми використовуємо ненумерованний список, розміщений всередині блочних елементів divз певним класом і ідентифікатором. У загальному і цілому, на сторінці HTML весь наш блок навігації буде виглядати наступним чином:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div id="right">
<div class="over">
<p class="slide2"><a href="#" class="btn-slide2">без Рубрики</a></p>
<div id="panel2">
<div class="block">
<ul>
</ul><ul class="aleft"><li> <a href="#" title="Переглянути всі записи у рубриці Вибране">Вибране</a></li><li>
<a href="#" title="Переглянути всі записи у рубриці Новини">Новини</a></li><li>
<a href="#" title="Переглянути всі записи у рубриці Стилі CSS">CSS</a></li></ul>
<ul class="aright"><li>
<a href="#" title="Переглянути всі записи у рубриці Рубрика 2">Рубрика 2</a></li><li>
<a href="#" title="Переглянути всі записи у рубриці Рубрика 3">Рубрика 3</a></li><li>
<a href="#" title="Переглянути всі записи у рубриці Рубрика 4">Рубрика 4</a></li></ul>
<div style="clear:both;"></div>
</div>
</div>
<p class="slide3"><a href="#" class="btn-slide3">Архів</a></p>
<div id="panel3">
<div class="block">
<li class="arsip clearfix">
<ul>
<li><a href='#' title='Вересень 2010'>Вересень 2010</a></li>
<li><a href='#' title='Серпень 2010'>Серпень 2010</a></li>
<li><a href='#' title='Липень 2010'>Липень 2010</a></li>
<li><a href='#' title='Червень 2010'>Червень 2010</a></li>
<li><a href='#' title='Травень 2010'>Травень 2010</a></li>
<li><a href='#' title='Квітень 2010'>Квітень 2010</a></li>
<li><a href='#' title='Березень 2010'>Березень 2010</a></li>
<li><a href='#' title='Лютий 2010'>Лютий 2010</a></li>
<li><a href='#' title='Січень 2010'>Січень 2010</a></li>
<li><a href='#' title='Грудень 2009'>Грудень 2009</a></li>
</ul>
<br class="clear" />
</li>
</div>
</div>
<p class="slide4"><a href="#" class="btn-slide4">Теги</a></p>
<div id="panel4">
<div class="block">
<ul>
<a href='#'>Мітка 1</a>
<a href='#'>Мітка 2</a>
<a href='#'>Мітка 3</a>
<a href='#'>Мітка 4</a>
<a href='#'>Мітка 5</a>
<a href='#'>Підказки</a>
<a href='#'>цікаво</a>
<a href='#'>Програми</a>
<a href='#'>jQuery</a>
</ul>
</div>
</div>
<p class="slide"><a href="#" class="btn-slide">Блок на Ваш вибір</a></p>
<div id="panel">
<div class="block">
Наповніть цей блок будь-яким вмістом
</div>
</div>
</div></div>

Це те, що стосується розмітки, а тепер про деяких параметрах трохи докладніше. Зокрема зверніть увагу на id=”right” основного елемента div. Я встановив висновок блоку шириною 290px в правій частині сторінки, такий розклад найчастіше використовується на сторінках сайтів. Якщо вам знадобитися відображення «акордеона» в лівій колонці, то ви завжди зможете внести зміни в таблиці стилів, як визначитеся з шириною так і за місцем розташування блоку.

Ось так не вимушено ми підійшли безпосередньо до формування зовнішнього вигляду нашого «акордеона» за допомогою CSS. На перший погляд, код CSS може здатися важким, але воно того варто і труднощів у роботі зі стилями, думаю труднощів не виникне.

2. CSS

Для оформлення блоку можна звичайно використовувати тільки властивості CSS3, але як ми знаємо, ще не всі браузери однаково добре підтримують ці самі властивості. Так що наприклад, для заголовків ми використовуємо невелике зображення в якості фонової картинки:

Кожна панель в таблиці стилів пронумерована slide, slide2, slide3 і т. д. Експериментуючи з параметрами, змінюючи колір і розмір шрифту, висоту і ширину контейнера заголовка, замінивши фонову картинку, можна досягти приголомшливих результатів.
У файлі стилів .css, чи безпосередньо на сторінці html слід прописати наступний код:

#right {
float:right;
width:290px;
margin:23px 75px 0 0;
padding:0;
}
#panel, #panel2, #panel3, #panel4 {
 display: none;
}
.slide, .slide2, .slide3, .slide4{
margin: 0px 0px 5px 0px;
padding: 0;
background: url(images/sl.gif) no-repeat center top;
}
.btn-slide, .btn-slide2, .btn-slide3, .btn-slide4 {
width: 290px;
висота: 25px;
padding-top: 4px;
margin: 0 auto;
display: block;
font-family: Arial, Tahoma, Trebuchet MS;
text-shadow: 0 1px 0 #000;
 font-size: 11px;
color: #f6f6f8 !important;
 text-decoration: none;
text-transform:uppercase;
padding-left:20px;
font-weight:bold;
}
.over {
margin:5px 0 20px 0;
padding:0;
}
/* оформлення блоку з вмістом */
.block{
margin:0 0 20px 0;
padding:12px;
background: #D8D8D8 url(images/sidebg.png);
 border:1px solid #aaa;
}
.aleft {
float:left;
width:120px;
}
.aright {
float:left;
width:120px;
}
br.clear {
clear: both;
}
.arsip li {
float: left;
width: 120px;
}
.clearfix {
display: inline-block;
}
ul{
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
ul li{
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
}
a {
color: #024153;
 text-decoration:none
}
a:hover, a:active {
color: #576C72;
 text-decoration:none;
}

#right {
float:right;
width:290px;
margin:23px 75px 0 0;
padding:0;
}
#panel, #panel2, #panel3, #panel4 {
display: none;
}
.slide, .slide2, .slide3, .slide4{
margin: 0px 0px 5px 0px;
padding: 0;
background: url(images/sl.gif) no-repeat center top;
}
.btn-slide, .btn-slide2, .btn-slide3, .btn-slide4 {
width: 290px;
висота: 25px;
padding-top: 4px;
margin: 0 auto;
display: block;
font-family: Arial, Tahoma, Trebuchet MS;
text-shadow: 0 1px 0 #000;
font-size: 11px;
color: #f6f6f8 !important;
text-decoration: none;
text-transform:uppercase;
padding-left:20px;
font-weight:bold;}
.over {
margin:5px 0 0 20px;
padding:0;
}
/* оформлення блоку з вмістом */
.block{
margin:0 0 0 20px;
padding:12px;
background: #D8D8D8 url(images/sidebg.png);
border:1px solid #aaa;
}
.aleft {
float:left;
width:120px;
}
.aright {
float:left;
width:120px;
}
br.clear {
clear: both;
}
.arsip li {
float: left;
width: 120px;
}.clearfix {
display: inline-block;
}ul{
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
ul li{
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
}
a {
color: #024153;
text-decoration:none
}
a:hover, a:active {
color: #576C72;
text-decoration:none;
}

Для прикладу і щоб переконатися в тому що все легко видозмінюється, візьміть будь-який графічний редактор і тупо инвертируйте кольору фонового зображення заголовка панелей, зберегти під тим же іменем, і Ви отримаєте блок зовсім іншого виду.

jQuery

З розміткою і стилями ми розібралися, для того щоб все запрацювало необхідно два останніх штриха, ми повинні «прикрутити» до нашого документа jQuery:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'>
<script src="js/slider.js" type="text/javascript">

Безпосередньо в підключеному до документа javascriptslider.js) ми встановили функцію .click, для активації блоків з вмістом по кліку на заголовках панелей. Ви можете змінити це значення на .mouseover і тоді вміст панелей меню буде з’являтися відразу після наведення вказівника миші на заголовок.

$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
});
});
$(document).ready(function(){
$(".btn-slide2").click(function(){
$("#panel2").slideToggle("slow");
});
});
$(document).ready(function(){
$(".btn-slide3").click(function(){
$("#panel3").slideToggle("slow");
});
});
$(document).ready(function(){
$(".btn-slide4").click(function(){
$("#panel4").slideToggle("slow");
});
});

$(document).ready(function(){
$(“.btn-slide”).click(function(){
$(“#panel”).slideToggle(“slow”);
});
});
$(document).ready(function(){
$(“.btn-slide2”).click(function(){
$(“#panel2”).slideToggle(“slow”);
});
});
$(document).ready(function(){
$(“.btn-slide3”).click(function(){
$(“#panel3”).slideToggle(“slow”);
});
});$(document).ready(function(){
$(“.btn-slide4”).click(function(){
$(“#panel4”).slideToggle(“slow”);
});
});

Варіантів формування розкриття меню «акордеон» за допомогою JavaScript дуже багато і це напевно самий простий з них.

От і все! Наш чудовий блок навігації в стилі «Акордеон» повністю готовий до роботи. Шлях був не дуже довгим і складним, хоча хто його знає, якщо раптом хто-небудь що-небудь не зрозумів, обов’язково відповім на всі ваші запитання в коментарях до даного уроку.

До нових зустрічей, друзі!

З щирою повагою: shurawi.

Брехня — це вигадка, вигадка – це мистецтво, значить, все мистецтво – брехня.