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

08 февраля 2013, 14:20

Новости

13/09/2024 Samsung Galaxy S23 Ultra - флагман с высокими амбициями

13/09/2024 Полиграфическое оборудование для офиса

03/09/2024 Полиграфическое оборудование для офиса

В данном уроке мы сделаем аккордеон в стиле 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);
		});
	});
});