Меню аккордеон для сайта с нумерацией с помощью CSS3

В этом уроке мы создадим один из вариантов вертикального меню аккордеона, сделанного с помощью CSS3. У каждого пункта меню будет числовое обозначение, сколько подпунктов содержится в конкретном пункте. 

Для начала вам необходимо скачать исходник к данной навигации.

Шаг 1. HTML

Во-первых подключим к HTML странице таблицу стилей CSS и необходимый плагин JavaScript с фреймворки (наборы библиотек) между тегами :

<link rel="stylesheet" type="text/css" href="css/style.css"> <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>
Теперь нам следует разметить HTML страницу под наше меню, разметка достаточно простая и не должна составить для вас большого труда. Иконки к каждому пункту меню будут содержаться в закрывающемся теге  и они будут располагаться в определенной последовательности:
<!-- Неупорядоченный список с пунктами меню --> <ul> <!-- Первый элемент с пунктом меню --> <li> <!-- Ссылка в первом пункте меню --> <a href="#"><i></i>Все друзья</a> <!-- Подпункты первого пункта меню --> <ul class="closed"> <li>Одноклассники</li> ... </ul> </li> <li> ... </li> ... </ul>

Шаг 2. CSS

Теперь мы настроим вид нашего меню с помощью таблицы стилей CSS. Для начала зададим нашему меню отдельный шрифт Didact Gothic, также с помощью CSS мы установим счетчик подпунктов в каждом пункте, который автоматически будет пронумеровывать графы, также с помощью добавленных классов .active и .closed мы сможем изменять цвет фона у ктивных пунктов и с помощью класса .closed мы сможем разворачивать и закрывать подпункты меню:

@import url(http://fonts.googleapis.com/css?family=Didact+Gothic&subset=latin,cyrillic); body{ max-width: 240px; margin: 100px auto 50px auto; background: #000000; 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:#FF9900; 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:#ed8f01; 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:#ed8f01; 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:#ed8f01; text-indent:0; text-align:center; font-size:14px; line-height:2.5; border-top:1px solid #DDD; height:38px; width:48px; } /*Изменяет цвет у активного пункта меню*/ .active{ background:#ed8f01; } /*Позволяет открывать и закрывать пункты меню*/ .closed{ height:0; }

Шаг 3. jQuery

Настало время анимировать все задуманное с помощью jQuery, для этого мы будем использовать следующую функцию, прописанную в подключенном плагине functions.js:

$(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); }); }); });
На этом все, более подробно разобрать данное меню можно в исходнике.
демо
скачать
источник