вРазные полезности

Горизонтальное меню 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;

источник: zornet.ru

Похожие посты