» »

Светлое горизонтальное меню VARGET для ucoz


На сайте я уже залил такое же горизонтальное меню, только в темных тонах. Теперь очередь дошла до светлого тона, что также характерно и красиво будет смотреться на любом ресурсе и тематика здесь очень большая. Сами стили немного переделал, так как оно было по размерам фиксированное и лишний раздел съезжал вниз. Теперь вы можете прописывать сколько угодно категорий, и все будет отлично. Главная страница, уже будет нажата и всегда в таком положение будет. Вы когда произведете клик, то увидите красивый эффект прогибающие, что можете посмотреть.

Установка:

Код
<section class="container">
<nav>
  <ul class="nav">
  <li><a href="#" class="nav-icon" title="Главная"><span class="icon-home"></span> Главная</a></li>
  <li class="active"><a href="#" title="Продукты">ZORNET.RU</a></li>
  <li><a href="#" title="Поддержка">Поддержка</a></li>
  <li><a href="#" title="Обучение">Обучение</a></li>
  <li><a href="http://zornet.ru/load/skripty/skripty_dlja_ucoz/81" title="Скрипты">Скрипты для ucoz</a></li>
  <li><a href="http://zornet.ru/load/skripty/skripty_dlja_ucoz/81" title="О нас">Скрипты для ucoz</a></li>
  <li><a href="#" title="Контакты">Контакты</a></li>
  </ul>
  </nav>
</section>


CSS:

Код
ol, ul {  
  list-style: none;  
}  

.container {  
  margin: 100px auto;  
width: 100%;  
  text-align: center;  
}  

.nav {  
  height: 48px;  
  display: inline-block;  
}  
.nav > li, .nav:active > .active {  
  float: left;  
  position: relative;  
  margin: 0 0 4px;  
  height: 44px;  
  color: #000000;  
  text-shadow: 0 1px white;  
  background-color: rgba(0, 0, 0, 0.05);  
  border: 1px solid;  
  border-color: #cfcfcf #d6d6d6 #c8c8c8;  
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25));  
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25));  
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25));  
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25));  
  -webkit-box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1);  
  box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1);  
}  
.nav > li:hover {  
  color: #539f07;  
  text-shadow: 0 1px white, 0 0 20px white;  
}  
.nav > li.active,  
.nav > .active:active,  
.nav > li:active {  
  z-index: 2;  
  margin: 4px 0 0;  
  height: 43px;  
  color: #404040;  
  background: transparent;  
  border-color: #ccc;  
  border-width: 1px 0;  
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));  
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));  
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));  
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));  
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.4);  
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.4);  
}  
.nav > li:active {  
  z-index: 3;  
}  
.nav > li:first-child {  
  border-left-width: 1px !important;  
  border-left-color: #c6c6c6;  
  border-radius: 5px 0 0 5px;  
}  
.nav > li:last-child {  
  border-right-width: 1px !important;  
  border-right-color: #c6c6c6;  
  border-radius: 0 5px 5px 0;  
}  
.nav > li + li, .nav:active > .active + li, .nav:active > li + .active {  
  border-left-width: 0;  
}  
.nav > .active + li,  
.nav > .active:active + li,  
.nav > li:active + li,  
.nav > li:active + .active {  
  border-left-width: 1px;  
}  
.nav > li > a {  
  display: block;  
  position: relative;  
  line-height: 44px;  
  padding: 0 20px;  
  font-size: 12px;  
  font-weight: bold;  
  color: inherit;  
  text-decoration: none;  
  outline: 0;  
}  
.nav > li > a:before {  
  content: attr(title);  
  position: absolute;  
  top: 1px;  
  left: 20px;  
  color: rgba(255, 255, 255, 0.4);  
  text-shadow: none;  
}  
.nav .nav-icon {  
  padding: 0 15px;  
}  
.nav .nav-icon:before {  
  display: none;  
}  

[class*="icon-"] {  
  display: inline-block;  
  width: 16px;  
  height: 16px;  
  vertical-align: text-top;  
  background-image: url("http://zornet.ru/CSS-ZORNET/gerav/refad/faren/icons.png");  
  background-repeat: no-repeat;  
  background-color: transparent;  
  font: 0/0 serif;  
  text-shadow: none;  
  color: transparent;  
}  

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


09.04.2015 Просмотров: 469 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Dimstrik
Dimstrik 09.04.2015 18:201
0
Убери со стилей этот код

Код
body{  
  font-family: tahoma;  
  background:url(http://zornet.ru/CSS-ZORNET/gerav/refad/faren/bgnoise_lg.png);  
  font-weight: 400;  
  font-size: 15px;  
  color: #3a2127;  
  overflow-y: scroll;  
}


А то если стили вставят в сайт то у них может перекость .
Dimstrik
Dimstrik 09.04.2015 18:212
0
Он не относится к меню
Kosten
Kosten 09.04.2015 18:333
0
Dimstrik, забыл, это идет на DEMO фон. Спасибо.
Kosten
Kosten 09.04.2015 18:364
0
Исправил, теперь чистое меню 3D.
Dimstrik
Dimstrik 09.04.2015 18:395
0
Kosten, Это хорошо smile
avatar