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

1 ответ(ов) в теме
moto
не в сети 8 часов
На сайте с 12.03.2017
Администратор
Тем 3410
Сообщения 13604
0
18:19

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

Также мы установили класс .close для каждого элемента ul первого уровня, а также используем тег i для установки иконки для каждой категории. В конце импортируется минимизированные варианты jQuery и jQueryUI, а также наш скрипт.

DEMO: ссылка

Разметка HTML

<ul><br> <li><br> <a href="#"><i></i>Друзья</a><br> <ul class="closed"><br> <li>Петя Мешкофф</li><br> <li>Инна Выкрутасова</li><br> <li>Моня Фельдман</li><br> <li>Иван Балан</li><br> <li>Грицько Забейкопыто</li><br> <li>Марио Итальянцев</li><br> </ul><br> </li><br> <li><br> <a href="#"><i></i>Видео</a><br> <ul class="closed"><br> <li>Рай</li><br> <li>Время пришло</li><br> <li>Оторвусь!</li><br> <li>Зажигаем!</li><br> <li>Первый раз...</li><br> <li>Мимоходом</li><br> <li>Баллады коричневых куч</li><br> <li>Как молоды мы были</li><br> </ul><br> </li><br> <li><br> <a href="#"><i></i>Галерии</a><br> <ul class="closed"><br> <li>Манга</li><br> <li>Аниме</li><br> <li>Скайрим</li><br> </ul><br> </li><br> <li><br> <a href="#"><i></i>Подкасты</a><br> <ul class="closed"><br> <li>То, что нужно знать</li><br> <li>За пределами</li><br> <li>Глупости</li><br> <li>Текила</li><br> </ul><br> </li><br> <li><br> <a href="#"><i></i>Супер</a> <br> <ul class="closed"><br> <li>Супер_1</li><br> <li>Супер_2</li><br> <li>Последний супер</li><br> </ul><br> </li><br></ul><br><br><script src="http://code.jquery.com/jquery-latest.min.js"></script><br><script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script><br><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);<br><br>body{<br>max-width: 240px;<br> margin: 100px auto 50px auto;<br> background: #1f1f1f;<br> text-align: center;<br>}<br>ul{<br>list-style:none;<br>margin:0;<br>padding:0;<br>text-align:left;<br>font-family: Helvetica;<br>}<br>body > ul{<br>margin-bottom:200px;<br>border:1px solid #222;<br>}<br>body > ul > li{<br>position:relative;<br>}<br>body > ul > li > a{<br>display:block;<br>outline:0;<br>height:20px;<br>padding:10px;<br>text-decoration:none;<br>color:#fff;<br>background:#ea2d49;<br>border-bottom:1px solid #222;<br>font-family:'Didact Gothic';<br>font-weight:300;<br>-webkit-font-smoothing:antialiased;<br>text-transform:uppercase;<br>font-size:14px;<br>}<br>body > ul > li > a > i{<br>display:block;<br>width:45px;<br>height:30px;<br>float:left;<br>}<br>body > ul > li:nth-child(1) > a > i{<br>background:url(http://web-gate.fr/images/republicof3/icon_friend.png)no-repeat top left;<br>-webkit-background-size:50%;<br> -moz-background-size:50%;<br> -o-background-size:50%;<br> background-size:50%;<br>background-position:5px 3px;<br>}<br>body > ul > li:nth-child(2) > a > i{<br>background:url(http://web-gate.fr/images/republicof3/icon_video.png)no-repeat top left;<br>-webkit-background-size:45%;<br> -moz-background-size:45%;<br> -o-background-size:45%;<br> background-size:45%;<br>background-position:5px 3px;<br>}<br>body > ul > li:nth-child(3) > a > i{<br>background:url(http://web-gate.fr/images/republicof3/icon_gallery.png)no-repeat top left;<br>-webkit-background-size:45%;<br> -moz-background-size:45%;<br> -o-background-size:45%;<br> background-size:45%;<br>background-position:5px 3px;<br>}<br>body > ul > li:nth-child(4) > a > i{<br>background:url(http://web-gate.fr/images/republicof3/icon_podcast.png)no-repeat top left;<br>-webkit-background-size:45%;<br> -moz-background-size:45%;<br> -o-background-size:45%;<br> background-size:45%;<br>background-position:5px 3px;<br>}<br>body > ul > li:nth-child(5) > a > i{<br>background:url(http://web-gate.fr/images/republicof3/icon_bolt.png)no-repeat top left;<br>-webkit-background-size:25%;<br> -moz-background-size:25%;<br> -o-background-size:25%;<br> background-size:25%;<br>background-position:10px 0px;<br>}<br>body > ul > li > ul{<br>counter-reset:items;<br>height:auto;<br>overflow:hidden;<br>background:#fff;<br>color:#ec2b48;<br>width:100%;<br>}<br>body > ul > li > ul > li{<br>counter-increment:items;<br>padding:1em 1.3em;<br>border-bottom:1px solid #DDD;<br>font-size:12px;<br>cursor:pointer;<br>}<br>body > ul > li > ul > li:hover{<br>background:#f4F4F4;<br>}<br>body > ul > li:after{<br>content:counter(items);<br>font-size:14px;<br>position:absolute;<br>right:10px;<br>top:15px;<br>background:#c0273c;<br>height:30px;<br>padding:5px 20px;<br>margin:-15px -10px;<br>color:white;<br>text-indent:0;<br>text-align:center;<br>line-height:2;<br>-webkit-box-shadow:inset 4px 0 8px rgba();<br> -moz-box-shadow:inset 4px 0 8px rgba();<br> box-shadow:inset 4px 0 8px rgba();<br>}<br>body > ul > li > ul > li:after{<br>content:counter(items);<br>font-size:0.857em;<br>background:#f4f5f4;<br>height:100%;<br>margin:-27px 174px;<br>display:block;<br>float:left;<br>color:#c0273c;<br>text-indent:0;<br>text-align:center;<br>font-size:14px;<br>line-height:2.5;<br>border-top:1px solid #DDD;<br>height:38px;<br>width:48px;<br>}<br>.active{<br>background:#c0273c;<br>}<br>.closed{<br>height:0;<br>}<br>

JavaScript

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

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

Затем мы удаляем класс .close, чтобы открыть панель с задержкой. А остальные панели закрываем.

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

Исходники

источник

Редакции сообщения
0

Ваше имя *

Ваш E-mail *

не публикуется

Текст сообщения *