» »

Горизонтальное меню 3 оттенок цвета для ucoz


Горизонтальное меню 3 оттенок цвета для ucoz

Не стал раскидывать по материалам Горизонтальное меню 3 оттенок цвета для ucoz и все сделал в одной теме, чтоб было удобней выбрать. Здесь для вас предлагается выбрать тот скрипт с той гаммой цвета, которое по вашему мнению подойдет к вашему сайту. Это зеленое, также синее и желтое, дизайн у всех одинаковый. Видно что есть небольшие полоски и с ними идут стили, что делает его красивым. Когда вы наводите клик, то категория будет прогибаться. Также CSS подогнал под каждое, и вы можете посмотреть, так как будет предоставлена демонстрация.

Желтое меню:



Код:

Код
<div id="styleone">
  <ul>
  <li><a href="http://zornet.ru/" class="current">Главная</a></li>
  <li><a href="http://zornet.ru/">Шаблоны для ucoz</a></li>
  <li><a href="http://zornet.ru/">Скрипты для ucoz</a></li>
  <li><a href="http://zornet.ru/">Иконки</a></li>
<li><a href="http://zornet.ru/">ZORNET.Ru для ucoz</a></li>
  <li><a href="http://zornet.ru/">Иконки</a></li>
  </ul>
</div>


CSS:

Код
#styleone{
  display:block;
  height:50px;
  font-size:10pt;
  font-family:Verdana;
  font-weight:bold;
  background:transparent url(http://zornet.ru/CSS-ZORNET/gerav/refad/010791484.gif) repeat-x top left;
  border-bottom:1px solid #BF7500;
}

#styleone ul{
  margin:0px;
  padding:0;
  list-style-type:none;
  width:auto;
  }

#styleone ul li a{
  display:block;
  float:left;
  color:#FFFFFF;
  padding:17px 20px 17px 20px;
  text-decoration:none;
  border-right:1px solid #F39500;
  text-shadow:1px 1px 1px #C4841F;
}

#styleone ul li a:hover, #styleone ul li a.current{
  display:block;
  float:left;
  color:#FFF2DD;
  padding:17px 20px 17px 20px;
  text-decoration:none;
  background:transparent url(http://zornet.ru/CSS-ZORNET/gerav/refad/0929497.gif) repeat-x top left;
}




Синее меню:



Код:

Код
<div id="styleone">
  <ul>
  <li><a href="http://zornet.ru/" class="current">Главная</a></li>
  <li><a href="/">Шаблоны для ucoz</a></li>
  <li><a href="/">Скрипты для ucoz</a></li>
  <li><a href="/">Иконки</a></li>
<li><a href="/">ZORNET.Ru для ucoz</a></li>
  <li><a href="/">Иконки</a></li>
  </ul>
</div>


CSS:

Код
#styleone{
  display:block;
  height:50px;
  font-size:10pt;
  font-family:Verdana;
  font-weight:bold;
  background:transparent url(http://zornet.ru/CSS-ZORNET/gerav/refad/70791484.gif) repeat-x top left;
border-bottom: 1px solid #050505;
}

#styleone ul{
  margin:0px;
  padding:0;
  list-style-type:none;
  width:auto;
  }

#styleone ul li a{
  display:block;
  float:left;
  color:#FFFFFF;
  padding:17px 20px 17px 20px;
  text-decoration:none;
  border-right: 1px solid #235393;
  text-shadow: 1px 1px 1px #000;
}

#styleone ul li a:hover, #styleone ul li a.current{
  display:block;
  float:left;
  color:#FFF2DD;
  padding:17px 20px 17px 20px;
  text-decoration:none;
  background:transparent url(http://zornet.ru/CSS-ZORNET/gerav/refad/62929497.gif) repeat-x top left;
}




Зеленое меню:



Код:

Код
<div id="styleone">
  <ul>
  <li><a href="http://zornet.ru/" class="current">Главная</a></li>
  <li><a href="http://zornet.ru/">Шаблоны для ucoz</a></li>
  <li><a href="http://zornet.ru/">Скрипты для ucoz</a></li>
  <li><a href="http://zornet.ru/">Иконки</a></li>
<li><a href="http://zornet.ru/">ZORNET.Ru для ucoz</a></li>
  <li><a href="http://zornet.ru/">Иконки</a></li>
  </ul>
</div>


CSS:

Код
#styleone{
  display:block;
  height:50px;
  font-size:10pt;
  font-family:Verdana;
  font-weight:bold;
  background:transparent url(http://zornet.ru/CSS-ZORNET/gerav/refad/55391484.gif) repeat-x top left;
border-bottom: 1px solid #0F0F0F;
}

#styleone ul{
  margin:0px;
  padding:0;
  list-style-type:none;
  width:auto;
  }

#styleone ul li a{
  display:block;
  float:left;
  color:#FFFFFF;
  padding:17px 20px 17px 20px;
  text-decoration:none;
  border-right: 1px solid #3AB327;
  text-shadow: 1px 1px 1px #000;
}

#styleone ul li a:hover, #styleone ul li a.current{
  display:block;
  float:left;
  color:#FFF2DD;
  padding:17px 20px 17px 20px;
  text-decoration:none;
  background:transparent url(http://zornet.ru/CSS-ZORNET/gerav/refad/4459497.gif) repeat-x top left;
}


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

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

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

Комментарий: 7
Kosten
Kosten 09.04.2015 03:111
0
Все меню, подойдут отлично на светлый сайт, если есть элементы дизайна под оттенок, то вообще будет как надо.
Kurben
Kurben 26.09.2015 08:462
0
А меню как у вас на сайте есть такое где нибудь?
Kurben
Kurben 26.09.2015 09:013
0
Имеется введу, которое меню категорий с права
Kosten
Kosten 26.09.2015 09:144
0
Kurben, были файла от него, но по запаре скинул их.
Kurben
Kurben 26.09.2015 09:165
0
Уже не вернуть ни как?
Kosten
Kosten 26.09.2015 09:176
0
Надо у модератора DALMATIN спросить, у него может остались.
Kurben
Kurben 26.09.2015 09:207
0
Спасибо!
avatar