» »

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


Чем хороший этот скрипт, у него нет не одной ссылки и тем прекрасно Красивое горизонтальное меню RaVenta для ucoz перед другие. Начал его проверять и стилями поигрался и можно с одного кода сделать 2 совершенно разных по дизайну, но с оттенками цвета навигацию. Но с начало давайте разберем основное, которое идет по умолчанию. Все просто, с начало копируем сам код и потом CSS загоняем. Как можно заметить, что по верх и низ идет светлый тон и только при клике, становиться полностью темно синим.

Код:

Код
<ul class="gradient-menu blue">
  <li><a href="http://zornet.ru/">Главная</a></li>
  <li><a href="/">Каталог файлов</a></li>
  <li><a href="/">ZORNET.RU</a></li>
  <li><a href="/">Скрипты для сайта</a></li>
  <li><a href="/">Шаблоны для сайта</a></li>
<li><a href="/">Обратная связь</a></li>
  <li><a href="/">О нас</a></li>
</ul>


CSS:

Код
ul.gradient-menu {
  padding: 0;
  margin: 0 auto;
  list-style: none;
  display: inline-block;
  font-family: arial, sans-serif;
  font-size: 13px;
  height: 54px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
  -o-box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
  box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
}
ul.gradient-menu {
*display:inline;
}
ul.gradient-menu li {
  display: inline;
}
ul.blue li a {
  background-color: #024;
  border: 1px solid #012;
}

ul.gradient-menu li a {
  display: block;
  padding: 0 25px;
  height: 52px;
  line-height: 50px;
  text-decoration: none;
  color: #fff;
  float: left;
  margin-right: -1px;
  text-align: center;
  height: 52px;
  font-weight: normal;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-box-shadow: inset -1px 0 1px rgba(255, 255, 255, 0.4), inset 1px 0 1px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.4);
  -moz-box-shadow: inset -1px 0 1px rgba(255, 255, 255, 0.4), inset 1px 0 1px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.4);
  box-shadow: inset -1px 0 1px rgba(255, 255, 255, 0.4), inset 1px 0 1px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.4);
  text-shadow: 1px -1px 1px #000;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
ul.gradient-menu li:first-child a {
  -moz-border-radius: 10px 0 0 10px;
  border-radius: 10px 0 0 10px;
}
ul.gradient-menu li:last-child a {
  -moz-border-radius: 0 10px 10px 0;
  border-radius: 0 10px 10px 0;
}
ul.gradient-menu li a:hover {
  line-height: 52px;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.2)));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 50%, transparent 50%, rgba(255, 255, 255, 0.2) 100%);
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 50%, transparent 50%, rgba(255, 255, 255, 0.2) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 50%, transparent 50%, rgba(255, 255, 255, 0.2) 100%);
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 50%, transparent 50%, rgba(255, 255, 255, 0.2) 100%);
  -webkit-box-shadow: inset -1px 0 1px rgba(0, 0, 0, 0.4), inset 1px 0 1px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset -1px 0 1px rgba(0, 0, 0, 0.4), inset 1px 0 1px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.4);
  box-shadow: inset -1px 0 1px rgba(0, 0, 0, 0.4), inset 1px 0 1px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.4);
}
ul.blue li a:active {
  background-color: #012;
}
ul.gradient-menu li a:active {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.8);
}




И теперь давайте рассмотрим второй вариант.



Просто с css нужно убрать c CSS найти не сложно.

Код
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));


По мне так второй вариант больше нравиться.

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

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

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

Комментарий: 4
Kosten
Kosten 10.04.2015 00:031
0
Как вам второй вариант горизонтального меню?
Dimstrik
Dimstrik 10.04.2015 01:502
0
Kosten, Оба интересные менюшки, как первый вариант так и второй !
kredit-oformi
kredit-oformi 10.04.2015 21:193
0
Красивое меню мне нравится такие
Kosten
Kosten 10.04.2015 21:264
0
kredit-oformi, главное еще он не сложные.
avatar