Вертикальное меню на CSS3


Вертикальное меню на CSS3

2830
8.4 из 10
Проголосовало: 5




  • Скачать с сервера
  • Скачать
  • Смотреть демо


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

Протестировано в Firefox 4, Safari 4, Chrome 13, Opera 10 и IE 8.

Установка:

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

Code
<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:

Code
[class*="icon-"] {  
  display: block;  
  width: 20px;  
  height: 20px;  
  background-image: url("../img/icons.png");  
  background-repeat: no-repeat;  
  background-color: transparent;  
  border: 0;  
  color: transparent;  
  font: 0/0 a;  
  text-shadow: none;  
  }  

  .icon-friends {  
  background-position: 0 0;  
  }  

  .icon-video {  
  background-position: -20px 0;  
  }  

  .icon-photo {  
  background-position: -40px 0;  
  }  

  .icon-podcast {  
  background-position: -60px 0;  
  }  

  .vnav {  
  width: 200px;  
  overflow: hidden;  
  background: #fff;  
  border: 1px solid #1d1f22;  
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);  
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);  
  }  
  .vnav a {  
  display: block;  
  line-height: 34px;  
  text-decoration: none;  
  }  
  .vnav li:last-child .vnav-item {  
  border-bottom-color: #50575f;  
  }  
  .vnav li:last-child .vnav-subnav {  
  border-bottom-color: #fff;  
  }  

  .vnav-item {  
  position: relative;  
  padding: 0 12px 0 37px;  
  color: #fff;  
  font-size: 13px;  
  text-shadow: 0 1px rgba(0, 0, 0, 0.35);  
  border-top: 1px solid #878e96;  
  border-bottom: 1px solid #333740;  
  background-color: #505968;  
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #707a84), color-stop(100%, #505968));  
  background-image: -webkit-linear-gradient(top, #707a84, #505968);  
  background-image: -moz-linear-gradient(top, #707a84, #505968);  
  background-image: -ms-linear-gradient(top, #707a84, #505968);  
  background-image: -o-linear-gradient(top, #707a84, #505968);  
  background-image: linear-gradient(top, #707a84, #505968);  
  -webkit-transition: opacity 0.15s;  
  -moz-transition: opacity 0.15s;  
  -ms-transition: opacity 0.15s;  
  -o-transition: opacity 0.15s;  
  transition: opacity 0.15s;  
  }  
  .vnav-item:hover {  
  opacity: .95;  
  }  
  .active .vnav-item, .vnav-item:active {  
  opacity: 1;  
  border-top-color: #6ad2ef;  
  border-bottom-color: #1c638f;  
  -webkit-box-shadow: 0 1px #bbbbbb, 0 2px #e9ebe8;  
  box-shadow: 0 1px #bbbbbb, 0 2px #e9ebe8;  
  background-color: #259bdb;  
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #44c5ec), color-stop(100%, #259bdb));  
  background-image: -webkit-linear-gradient(top, #44c5ec, #259bdb);  
  background-image: -moz-linear-gradient(top, #44c5ec, #259bdb);  
  background-image: -ms-linear-gradient(top, #44c5ec, #259bdb);  
  background-image: -o-linear-gradient(top, #44c5ec, #259bdb);  
  background-image: linear-gradient(top, #44c5ec, #259bdb);  
  }  
  .active .vnav-item .vnav-counter, .vnav-item:active .vnav-counter {  
  background: #2471a9;  
  }  
  .vnav-item i {  
  position: absolute;  
  top: 7px;  
  left: 9px;  
  }  

  .vnav-counter {  
  float: right;  
  margin-top: 8px;  
  padding: 0 6px;  
  line-height: 18px;  
  font-size: 11px;  
  background: #464e59;  
  border-radius: 9px;  
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);  
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);  
  }  

  .vnav-subnav {  
  display: none;  
  border-bottom: 1px solid #404348;  
  }  
  .active .vnav-subnav {  
  display: block;  
  }  
  .vnav-subnav a {  
  padding: 0 12px 0 16px;  
  font-size: 12px;  
  color: #838a90;  
  border-bottom: 1px solid #eee;  
  }  
  .vnav-subnav a:before {  
  content: '';  
  display: inline-block;  
  width: 0;  
  height: 0;  
  margin-right: 8px;  
  border: 4px outset transparent;  
  border-left: 4px solid #bbb;  
  }  
  .vnav-subnav a:hover {  
  background: #f8f9fb;  
  }  
  .vnav-subnav .vnav-counter {  
  color: #999;  
  background: #fcfcfc;  
  -webkit-box-shadow: inset 0 0 0 1px #dcdcdc;  
  box-shadow: inset 0 0 0 1px #dcdcdc;  
  }  
  .vnav-subnav li:last-child a {  
  border-bottom-color: #fff;  
  }
Автор публикации: Загрузка
Загрузка
k43, это его n материал
Источник: http://yraaa.ru/
  • Всего комментариев: 7

rehito
0
rehito написал: Написано 26 Декабря 2012 в 22:07
Комментарий №7
отличное меню...

Kopkan
-5
Kopkan написал: Написано 22 Августа 2012 в 18:59
Комментарий №4
Херня, такое любой школьник сделать может

NiKiT0S
+2
NiKiT0S написал: Написано 22 Августа 2012 в 19:38
Комментарий №5
Раз ты такой умный, то давай, блистни своими знаниями! Сделай лучше! Ты ведь учился в школе?! dry

Вовчик
+2
Вовчик написал: Написано 22 Августа 2012 в 19:44
Комментарий №6
не сделает, да и ты навряд ли...

BLAzER
0
BLAzER написал: Написано 07 Августа 2012 в 13:50
Комментарий №3
Воры!

S@Nek
0
S@Nek написал: Написано 19 Июля 2012 в 14:08
Комментарий №1
Прикольно)

BLAzER
0
BLAzER написал: Написано 19 Июля 2012 в 14:45
Комментарий №2
ага, для соц. сети подойдет

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    203
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 2
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: