» »

Синее горизонтальное меню в формате 3D для uCoz


Синее горизонтальное меню в формате 3D для uCoz

Когда на сайте есть в функциональности красивый эффект, как скрипт Горизонтальное меню в формате 3D для uCoz, то безусловно сам ресурс приобретает другое значение. Здесь сам дизайн был переделан, что потом будет показано ниже. Делать клик не нудно, только наводим и тема красиво изменяется, и сразу видно куда вы хотите перейти. Можно заметить что в самом низу проходит полоса, так как будто немного вперед нагнуто, если ставить на светлый фон, то ярче по этому будет обзор. Но вы можете сами и цвет выбрать и сам прогиб какой будет в гамме.

За это отвечает:

Код
background: linear-gradient(to bottom, #2690E8 0%,#1F3A5A 100%);
  box-shadow: 0 4px 0 0 #152941;


Меняем цветовую систему какую вам нужно и прописываем в стилях. Но теперь сама установка.

Каркас:

Код
<nav>
<ul class="uMenuRoot">
<li class=""><a href="http://zornet.ru/"><span>Главная страница</span></a></li>
<li class=""><a href="/forum"><span>Форум</span></a></li>
<li class=""><a href="/photo/"><span>ZORNET.RU</span></a></li>
<li class=""><a href="/blog/"><span>Блог</span></a></li>
<li class=""><a href="/load/"><span>Каталог файлов</span></a></li>
<li class=""><a href="/publ/"><span>Каталог статей</span></a></li>
<li class=""><a href="/shop"><span>Интернет-магазин</span></a></li></ul>
  </nav>


CSS:

Код
nav {
  height: 41px;
  background: #006aee;
  background: -moz-linear-gradient(top, #006aee 0%, #07499b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#006aee), color-stop(100%,#07499b));
  background: -webkit-linear-gradient(top, #006aee 0%,#07499b 100%);
  background: -o-linear-gradient(top, #006aee 0%,#07499b 100%);
  background: -ms-linear-gradient(top, #006aee 0%,#07499b 100%);

  background: linear-gradient(to bottom, #3172A9 0%,#1F3A5A 100%);
  box-shadow: 0 4px 0 0 #152941;

  border-radius: 5px;
  font-family: 'Arial Narrow', Arial, sans-serif; font-stretch: condensed;
  font-size: 12px;
  color: #e1e9f2 !important;
  text-transform: uppercase;
  position: relative;
  z-index: 99;
}

nav ul, nav ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  line-height: 41px;
  position: relative;
}
nav ul li {
  float: left;
  height: 40px;
  border-left: 1px solid #1f1f1f;
}
nav ul li:first-child {
  border: none;
}
nav ul li a {
  display: block;
  height: 41px;
  padding: 0 15px;
  text-decoration: none !important;
  color: #e1e9f2 !important;
}
nav ul li a:hover, nav > ul > li.active > a {
  background: #263B8C;
  box-shadow: 0 3px 0 0 #121212;
  border-top: 1px solid #1f1f1f;
}


23.05.2015 Просмотров: 552 Комментарий: (2)

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

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

Комментарий: 2
kredit-oformi
kredit-oformi 26.05.2015 22:321
0
Спасибо добавил и изменил цвет как указал Kosten

Kosten
Kosten 26.05.2015 23:322
0
kredit-oformi, по мне отлично получилось, CSS рулит.
avatar