Аккордеон в стиле 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);
		});
	});
}); 

Готово!


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/b3DGZyanvu4/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Аккордеон в стиле Metro | | 2013-02-13 00:09:52 | | Статьи Web-мастеру | | В данном уроке мы сделаем аккордеон в стиле Metro. Меню будет использовать jQuery и jQueryUI.Разметка HTMLСтруктура меню достаточно простая. Мы используем только элементы ul и li для построения | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: