» »

Красивое 3D меню горизонтальное для сайта ucoz


Красивое 3D меню горизонтальное для сайта ucoz

Это тот материал скрипта Красивое 3D меню горизонтальное для сайта ucoz, где стили являются основным, так как при нажатие раздел который вы написали двигается. Есть которые при клике, когда наведешь, здесь когда только хочешь перейти. Как видите оно не сильно темное, и что характерно, подойдет на антологичный оттенок и на светлом, также смотреться будет красиво. Немного код поправил и теперь где картинка домик, написано главная страница. Когда кто то зайдет на сайт, то один раздел будет уже включен, это можно написать самый основной. И так он будет всегда, даже если вы будете клик делать на другой.

Одно только не разобрал, это когда добавляешь другие рубрики, то оно становиться в 2 ряда. Это означает, вы можете только назначенное количество написать на нем. Также присутствует зеленый цвет на буквах, что можно поменять.

Установка:

Код:

Код
<section class="container">  
  <nav>  
  <ul class="nav">  
  <li><a href="http://zornet.ru" 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="#" title="О нас">О нас</a></li>  
  <li><a href="#" title="Блог">Блог</a></li>  
  <li><a href="#" title="Контакты">Контакты</a></li>  
  </ul>  
  </nav>  
</section>


CSS:

Код
.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: #ccc;
  text-shadow: 0 1px rgba(0, 0, 0, 0.9);
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid #232428;
  border-bottom-color: #1f2326;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px #1f2326, 0 4px 3px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px #1f2326, 0 4px 3px rgba(0, 0, 0, 0.2);
}
.nav > li:hover {
  color: #b0d157;
  text-shadow: 0 1px black, 0 0 20px rgba(255, 255, 255, 0.5);
}
.nav > li.active,
.nav > .active:active,
.nav > li:active {
  z-index: 2;
  margin: 4px 0 0;
  height: 43px;
  color: #aaa;
  text-shadow: 0 1px black;
  background-color: rgba(255, 255, 255, 0.03);
  border-color: #212425;
  border-width: 1px 0;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.05);
}
.nav > li:active {
  z-index: 3;
}
.nav > li:first-child {
  border-left-width: 1px !important;
  border-left-color: #212425;
  border-radius: 5px 0 0 5px;
}
.nav > li:last-child {
  border-right-width: 1px !important;
  border-right-color: #212425;
  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;
  line-height: 44px;
  padding: 0 20px;
  font-size: 12px;
  font-weight: bold;
  color: inherit;
  text-decoration: none;
  outline: 0;
}
.nav .nav-icon {
  padding: 0 15px;
}

[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;
}


08.04.2015 Просмотров: 716 Комментарий: (4)

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

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

Комментарий: 4
Kosten
Kosten 08.04.2015 18:521
0
Как добавить разделы, чтобы не Сломалась само меню?
Dimstrik
Dimstrik 09.04.2015 02:302
0
Для начало добавь вот это в стили

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


Там была указана ширина 720px вот и естественно новый раздел съезжал в низ .
Нужно указать ширину 100% и меню будет резиновое и добавляй разделов сколько тебе хочется.
Kosten
Kosten 09.04.2015 02:563
0
Dimstrik, спасибо, пусть будет в комментариях, чтоб знали.
Kosten
Kosten 09.04.2015 03:094
0
Все исправил, теперь можно добавлять категорий, сколько вам нужно.
avatar