При разработке любого сайта очень важно грамотно расположить и организовать контент. Необходимо сделать так, чтобы посетители не были нагружены большим количеством информации сразу.
Для этого вебмастера должны уметь использовать разные техники для группировки контента и показывать его только при заинтересованости посетителя в этом.
Сегодня мы создадим простой, но очень заметный "аккордеон" с помощью CSS, jQuery и плагина easing для классных эффектов.
Шаг №1 - XHTML
Как могли увидеть в демо версии, наш "аккордеон" (в дальнейшем акк. :)) разделен на 4 части. Каждая часть определена с помощью элемента LI с классом menu. Они позиционированы внутри главного неупорядоченного списка ul.container.
demo.html
<li class="menu">
<ul>
<li class="button"><a href="#" class="green">Kiwis <span></span></a></li>
<li class="dropdown">
<ul> <!-- Этот список содержит опции, которые выпадают с помощью jQuery -->
<!-- Каждая опция в своем LI -->
<li><a href="http://en.wikipedia.org/wiki/Kiwifruit">Read on Wikipedia</a></li>
<li><a href="http://www.flickr.com/search/?w=all&q=kiwi&m=text">Flickr
Stream</a></li>
</ul>
</li>
</ul>
</li>
Каждый элемент LI содержит UL, который формирует площадь для названия (li.button) и площадь для контента (li.dropdown).
Также у нас элемент якоря находится внутри li.button (кнопка с классом). Эта ссылка позднее будет привязана к специальному событию в jQuery, которое будет открывать секцию со списком при нажатии на ссылку.
Также важно заметить, что элементы списка dropdown спрятаны по умолчанию с помощью свойства CSS display:none.
Шаг №2 - CSS
demo.css
body{
/* Задаем цвет по умолчанию, фон и шрифт */
color:#cccccc;
font-size:13px;
background: #302b23;
font-family:Arial, Helvetica, sans-serif;
}
ul{
margin:0;
padding:0;
}
ul.container{
/* главный UL */
width:240px;
margin:0 auto;
padding:50px;
}
li{
list-style:none;
text-align:left;
}
li.menu{
/* Главные элементы списка */
padding:5px 0;
width:100%;
}
li.button a{
display:block;
font-family:BPreplay,Arial,Helvetica,sans-serif;
font-size:21px;
height:34px;
overflow:hidden;
padding:10px 20px 0;
position:relative;
width:200px;
}
li.button a:hover{
/* Removing the inherited underline from the titles */
text-decoration:none;
}
li.button a span{
/* Этот span играет как правая часть фона секции */
height:44px;
position:absolute;
right:0;
top:0;
width:4px;
display:block;
}
/* Разные цветовые схемы для разных отделов */
li.button a.blue{background:url(img/blue.png) repeat-x top left; color:#074384;}
li.button a.blue span{ background:url(img/blue.png) repeat-x top right;}
li.button a.green{background:url(img/green.png) repeat-x top left; color:#436800;}
li.button a.green span{ background:url(img/green.png) repeat-x top right;}
li.button a.orange{background:url(img/orange.png) repeat-x top left; color:#882e02;}
li.button a.orange span{ background:url(img/orange.png) repeat-x top right;}
li.button a.red{background:url(img/red.png) repeat-x top left; color:#641603;}
li.button a.red span{ background:url(img/red.png) repeat-x top right;}
/* Эффекты при наведении */
li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}
.dropdown{
/* Расширяющиеся списки */
display:none;
padding-top:5px;
width:100%;
}
.dropdown li{
/* Каждый элемент в таких списках */
background-color:#373128;
border:1px solid #40392C;
color:#CCCCCC;
margin:5px 0;
padding:4px 18px;
}
Шаг №3 - jQuery
Для начала подключаем все необходимые скрипты в шапке документа:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="script.js"></script>
Как Вы могли заметить в демо панель выезжает не плавно а с прыжками. Это достигается с помощью плагина easing. Плагин имеет множество разных эффектов, и Вы сможете экспериментировать с ними.
script.js
$(document).ready(function(){
/* Скрипт будет выполнен после загрузки страницы */
/* Смена эффекта для плагина easing */
$.easing.def = "easeOutBounce";
$('li.button a').click(function(e){
/* Находим соответствующий текущей секции список */
var dropDown = $(this).parent().next();
/* Закрываем все другие списки, кроме текущего */
$('.dropdown').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});
Для начала мы задаем метод для плагина easing, который будет использоваться для эффектов slideUp/slideDown. Далее привязываем специальную функцию к кнопке, которая будет запускать процесс при нажатии.
Я также использую метод jQuery slideToggle для проверки видимости элемента на странице, и решения показывать его или прятать. Таким образом, при клике на открытую секцию, она будет сворачиваться, а не оставаться на месте.
После этого мы используем функцию e.preventDefault() для того, чтобы браузер не переходил на другую страницу после клика.
Вот и все готово! Наслаждайтесь!