вРазные полезности

Красивое 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;

источник: zornet.ru

Похожие посты