Вертикальное меню на CSS3
Вертикальное меню на CSS3, оформленное в стиле аккордеона. В меню присутствуют счетчики. Каждый пункт имеет иконки, что делает меню более выделяющимся. Меню подойдет для любого блога или сайта новостей. При наведении на ссылки в меню, они подсвечиваются, эффект выглядит плавным. Выделенный пункт выделяется ярко-голубым цветом. Элементы, которые принадлежат активному пункту, дочернее меню имеет свой стиль, этот стиль более светлый и простой. <nav class="vnav">
Протестировано в Firefox 4, Safari 4, Chrome 13, Opera 10 и IE 8.
Установка
1 шаг. Это ставим в нужное место:
<ul class="vnav-menu">
<li>
<a href="index.html" class="vnav-item">
<i class="icon-friends"></i>
Друзья
<span class="vnav-counter">4</span>
</a>
</li>
<li>
<a href="index.html" class="vnav-item">
<i class="icon-video"></i>
Видео
<span class="vnav-counter">8</span>
</a>
</li>
<li class="active">
<a href="index.html" class="vnav-item">
<i class="icon-photo"></i>
Фото
<span class="vnav-counter">39</span>
</a>
<ul class="vnav-subnav">
<li><a href="index.html">Семья <span class="vnav-counter">16</span></a></li>
<li><a href="index.html">Отпуск <span class="vnav-counter">23</span></a></li>
</ul>
</li>
<li>
<a href="index.html" class="vnav-item">
<i class="icon-podcast"></i>
Публикации
<span class="vnav-counter">42</span>
</a>
</li>
</ul>
</nav>
2 шаг. Установка CSS-стилей. К сожалению, код слишком громоздок, поэтому вместо того, чтобы предоставить его ниже, я рекомендую вам скачать архив, в котором есть текстовой файл со стилями, а также необходимые картинки, демо-страница, которая наглядно ознакомит вас с меню!
Случайные материалы
Компания HTC собирается представить свой новый флагман - ONE M10... | Очень оригинальный шрифт от Giang Nguyen... | Шрифт Zaguatica от израильского дизайнера Арнольда Хупкера ... | Красивый и современный калькулятор, построенный полностью на JavaScript и CSS... |