Вертикальное меню на CSS3, оформленное в стиле аккордеона. В меню присутствуют счетчики. Каждый пункт имеет иконки, что делает меню более выделяющимся. Меню подойдет для любого блога или сайта новостей. При наведении на ссылки в меню, они подсвечиваются, эффект выглядит плавным. Выделенный пункт выделяется ярко-голубым цветом. Элементы, которые принадлежат активному пункту, дочернее меню имеет свой стиль, этот стиль более светлый и простой. 
Протестировано в Firefox 4, Safari 4, Chrome 13, Opera 10 и IE 8. 

Установка
1 шаг. Это ставим в нужное место: 

<nav class="vnav">  
  <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-стилей. К сожалению, код слишком громоздок, поэтому вместо того, чтобы предоставить его ниже, я рекомендую вам скачать архив, в котором есть текстовой файл со стилями, а также необходимые картинки, демо-страница, которая наглядно ознакомит вас с меню!

---

вертикальное, на, CSS3, скрипты, меню 24.04.2016 в 12:46

---

Случайные материалы

Терри Майерсон: "Компания продолжит развивать свое мобильное направление".... Microsoft продолжит развивать Windows 10 Mobile

Не так давно команда uCoz объявила о запуске нового конструктора кнопок социальных сетей “Поделиться” для сайта — uSocial.pro, который пришелся по вкусу многим пользователям... Лайки для сайта и не только!

Генеральный директор Google вел переговоры с Павлом Дуровым по поводу поглощения его популярного мессенджера... Google хотела купить Telegram за $1 млрд

Циклический шрифт в стиле модерн от Leon Hulst... Ponsi Rounded Slab Regular