Аккордеон в стиле Metro

Аккордеон в стиле Metro


В данном уроке мы сделаем аккордеон в стиле Metro. Меню будет использовать jQuery и jQueryUI.

Разметка HTML
Структура меню достаточно простая. Мы используем только элементы ul и li для построения аккордеона и тег ссылки после каждого элемента li первого уровня.

Также мы установили класс .close для каждого элемента ul первого уровня, а также используем тег i для установки иконки для каждой категории. В конце импортируется минимизированные варианты jQuery и jQueryUI, а также наш скрипт.
<ul>
<li>
<a href="#"><i></i>Друзья</a>
<ul class="closed">
<li>Петя Мешкофф</li>
<li>Инна Выкрутасова</li>
<li>Моня Фельдман</li>
<li>Иван Балан</li>
<li>Грицько Забейкопыто</li>
<li>Марио Итальянцев</li>
</ul>
</li>
<li>
<a href="#"><i></i>Видео</a>
<ul class="closed">
<li>Рай</li>
<li>Время пришло</li>
<li>Оторвусь!</li>
<li>Зажигаем!</li>
<li>Первый раз...</li>
<li>Мимоходом</li>
<li>Баллады коричневых куч</li>
<li>Как молоды мы были</li>
</ul>
</li>
<li>
<a href="#"><i></i>Галерии</a>
<ul class="closed">
<li>Манга</li>
<li>Аниме</li>
<li>Скайрим</li>
</ul>
</li>
<li>
<a href="#"><i></i>Подкасты</a>
<ul class="closed">
<li>То, что нужно знать</li>
<li>За пределами</li>
<li>Глупости</li>
<li>Текила</li>
</ul>
</li>
<li>
<a href="#"><i></i>Супер</a>
<ul class="closed">
<li>Супер_1</li>
<li>Супер_2</li>
<li>Последний супер</li>
</ul>
</li>
</ul>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="js/functions.js"></script>

CSS
Большинство строк использует оператор >. Например, когда встречается такой код body > ul > li, то он означает элемент li, который является потомком элемента ul, являющегося потомком элемента body .

Мы импортируем шрифт Didact Gothic из коллекции Google Fonts.

Для указания категорий используется метод nth-child(*) для установки соответствующих иконок ( body > ul > li:nth-child(*) > a > i). Для подсчета элементов используются счетчики CSS.

Также у нас есть два класса: .active и .closed. Данные классы используются для реализации функционала аккордеона. Класс .active формирует цвет фона активной категории, а класс .closed помогает организовать открытие и закрытие категорий. Высота устанавливается равной 0px, что сворачивает панель во время закрытия.
@import url(http://fonts.googleapis.com/css?family=Didact+Gothic&subset=latin,cyrillic);

body{
max-width: 240px;
margin: 100px auto 50px auto;
background: #1f1f1f;
text-align: center;
}
ul{
list-style:none;
margin:0;
padding:0;
text-align:left;
font-family: Helvetica;
}
body > ul{
margin-bottom:200px;
border:1px solid #222;
}
body > ul > li{
position:relative;
}
body > ul > li > a{
display:block;
outline:0;
height:20px;
padding:10px;
text-decoration:none;
color:#fff;
background:#ea2d49;
border-bottom:1px solid #222;
font-family:'Didact Gothic';
font-weight:300;
-webkit-font-smoothing:antialiased;
text-transform:uppercase;
font-size:14px;
}
body > ul > li > a > i{
display:block;
width:45px;
height:30px;
float:left;
}
body > ul > li:nth-child(1) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_friend.png)no-repeat top left;
-webkit-background-size:50%;
-moz-background-size:50%;
-o-background-size:50%;
background-size:50%;
background-position:5px 3px;
}
body > ul > li:nth-child(2) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_video.png)no-repeat top left;
-webkit-background-size:45%;
-moz-background-size:45%;
-o-background-size:45%;
background-size:45%;
background-position:5px 3px;
}
body > ul > li:nth-child(3) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_gallery.png)no-repeat top left;
-webkit-background-size:45%;
-moz-background-size:45%;
-o-background-size:45%;
background-size:45%;
background-position:5px 3px;
}
body > ul > li:nth-child(4) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_podcast.png)no-repeat top left;
-webkit-background-size:45%;
-moz-background-size:45%;
-o-background-size:45%;
background-size:45%;
background-position:5px 3px;
}
body > ul > li:nth-child(5) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_bolt.png)no-repeat top left;
-webkit-background-size:25%;
-moz-background-size:25%;
-o-background-size:25%;
background-size:25%;
background-position:10px 0px;
}
body > ul > li > ul{
counter-reset:items;
height:auto;
overflow:hidden;
background:#fff;
color:#ec2b48;
width:100%;
}
body > ul > li > ul > li{
counter-increment:items;
padding:1em 1.3em;
border-bottom:1px solid #DDD;
font-size:12px;
cursor:pointer;
}
body > ul > li > ul > li:hover{
background:#f4F4F4;
}
body > ul > li:after{
content:counter(items);
font-size:14px;
position:absolute;
right:10px;
top:15px;
background:#c0273c;
height:30px;
padding:5px 20px;
margin:-15px -10px;
color:white;
text-indent:0;
text-align:center;
line-height:2;
-webkit-box-shadow:inset 4px 0 8px rgba();
-moz-box-shadow:inset 4px 0 8px rgba();
box-shadow:inset 4px 0 8px rgba();
}
body > ul > li > ul > li:after{
content:counter(items);
font-size:0.857em;
background:#f4f5f4;
height:100%;
margin:-27px 174px;
display:block;
float:left;
color:#c0273c;
text-indent:0;
text-align:center;
font-size:14px;
line-height:2.5;
border-top:1px solid #DDD;
height:38px;
width:48px;
}
.active{
background:#c0273c;
}
.closed{
height:0;
}

javascript
javascript реализует весь функционал нашего аккордеона.

У нас есть функция, которая при нажатии на тег a добавляет к нему класс .toggleClass(), за чем следует установка цвета фона с задержкой _this.toggleClass('active', 5);.

Затем мы удаляем класс .close, чтобы открыть панель с задержкой. А остальные панели закрываем.
$(function() {
$("a").bind('click',function() {
var _this = $(this);

// Раскрываем текущую ссылку
_this.toggleClass('active', 5);
_this.next().toggleClass('closed', 500);
// Проходим по другим ссылкам и выключаем активное состояние
$("a").not(_this).each(function() {
$(this).next().addClass('closed', 500);
$(this).removeClass('active', 5);
});
});
});

Добавить комментарий

Нам важно знать ваше мнение. Оставьте свой отзыв или ответ

Комментариев 0

Обновления на форуме