ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Синее горизонтальное меню в формате 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/">Главная страница</a></li>
<li class=""><a href="/forum">Форум</a></li>
<li class=""><a href="/photo/">ZORNET.RU</a></li>
<li class=""><a href="/blog/">Блог</a></li>
<li class=""><a href="/load/">Каталог файлов</a></li>
<li class=""><a href="/publ/">Каталог статей</a></li>
<li class=""><a href="/shop">Интернет-магазин</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 Мая 2015 Просмотров: 1618 Комментариев: (2)

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

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

Kosten

Комментарии: 2
Порядок вывода комментариев: kredit-oformi 26 Мая 2015 22:32¹ 0 Спасибо добавил и изменил цвет как указал Kosten Kosten 26 Мая 2015 23:32² 0 kredit-oformi, по мне отлично получилось, CSS рулит.