» »

Черное горизонтальное меню FRENYR для ucoz


Черное горизонтальное меню FRENYR для ucoz

Здесь вам хочется все по полочкам разложить как из Черное горизонтальное меню FRENYR для ucoz сделать тот оттенок цвета, который вам нужен. А этот скрипт возьмем за основу, с которым и будем разбираться. Вообщем у него по умолчанию совершенно другой дизайн был, но почему то я посчитал, что так красивей будет и работать на нем нужно. И другое, не нужно все скрипты на эти стили заливать, так как всего поменять нужно две строки и будет совершенна другая гамма, та которая вам нужна.

Сам каркас:

Код
<ul class="gradient-menu black">
  <li><a href="http://zornet.ru/">Главная</a></li>
  <li><a href="http://zornet.ru/">Скрипты для сайта</a></li>
  <li><a href="http://zornet.ru/">Коды для сайта</a></li>
  <li><a href="http://zornet.ru/">Шаблоны для сайта</a></li>
  <li><a href="http://zornet.ru/">Обратная связь</a></li>
  <li><a href="http://zornet.ru/">Связь с Амином</a></li>
  <li><a href="http://zornet.ru/">Форум ресурса</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.black li a {
  background-color: #181818;
  border: 1px solid #474747;

}

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: -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.black li a:active {
  background-color: #111;
}
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);
}


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

Код
ul.black li a {
  background-color: #181818;
  border: 1px solid #474747;

}


Также можете поменять, светлые оттенки, которые разделяют категорий, но они стоят по умолчанию и по мне очень здорово.



10.04.2015 Просмотров: 574 Комментарий: (3)

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

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

Комментарий: 3
Kosten
Kosten 10.04.2015 20:501
0
Меню было темное с светлым оттенком, сделал чисто черным, вы можете другой цвет подобрать.
kredit-oformi
kredit-oformi 10.04.2015 21:272
0
Kosten, очень интересное меню, а главное что можно цвет поменять
Kosten
Kosten 10.04.2015 21:493
0
kredit-oformi, как и цвет, так и оттенки светлые, можно сделать другими или убрать, которые разделяют рубрики.
avatar