Горизонтальное меню в стиле в контакте - Меню - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 7
Гостей: 7
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Меню


Думаю очень не плохое меню которое построена на стилях а точнее сказать горизонтальное в стиле контакта CSS3. Для светлого сайта по дизайну эта навигация отлично подойдет по дизайну. Если вы сможете перестроить клик то можно и поставить на темный портал.
Так как при нажатие на любой раздел он темнеет, вот почему он не может подойти на остальные темные интернет ресурсы.
Но как говорил меню построено на CSS что означает любой цвет оттенка можно настроить и не нужно не каких картинок менять а тем более перекрашивать.

По своему оно уникальное и оригинальное и на портале думаю смотреться будет отлично на тез где основном углы сайта закругленные по дизайну, так как здесь они так идут.
На сайт который содержит такой же оттенок цвета то скрипт реально предназначен для него. Полностью рабочие что прилагалась кнопка демо и можно было посмотреть в работе его.

Установка:

Там где нужно ставить, а точнее под шапкой сайта.
Код
<div id="nav">  
  <ul>  
  <li><a href="">Главная</a></li>  
  <li><a href="">Форум</a></li>  
  <li><a href="">Файлы</a></li>  
  <li><a href="">Статьи</a></li>  
  <li><a href="">Контакты</a></li>  
  <li><a href="">uSite</a></li>  
  </ul>  
  </div>


И стили к нему в CSS
Код
ul, li{margin:0; padding:0; list-style:none; float:left;}  
   
  #nav{height:40px; display:table;}  
  #nav ul li{background: -moz-linear-gradient(top, rgba(83,107,146,1) 0%, rgba(69,88,120,1) 100%); background: -webkit-linear-gradient(top, rgba(83,107,146,1) 0%,rgba(69,88,120,1) 100%); background: -o-linear-gradient(top, rgba(83,107,146,1) 0%,rgba(69,88,120,1) 100%); box-shadow:inset 0 -2px 0 rgba(0,0,0,0.2);}  
  #nav ul li:hover{background:rgba(64,64,64,1);}  
  #nav ul li:first-child{border-top-left-radius:2px; border-bottom-left-radius:2px;}  
  #nav ul li:last-child{border-top-right-radius:2px; border-bottom-right-radius:2px;}  
  #nav ul li a{line-height:40px; display:block; padding:0 25px; text-decoration:none; text-transform:uppercase; font-weight:bold; color:rgba(255,255,255,1); text-shadow:0 1px 0 rgba(0,0,0,0.2);}

Важно!

При копировании материала указывать ссылку на источник.

- 396
- 28-Декабря-2016
- 0
Материал разместил:

Похожий материал
Статьи сайта