Горизонтальное меню в стиле в контакте
 | |
| Думаю очень не плохое меню которое построена на стилях а точнее сказать горизонтальное в стиле контакта 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);} | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |