Горизонтальное глянцевое меню для сайта

7628 просмотров Alan_Writer 26.05.2013

Демо ▶️

Меню для ucoz - Горизонтальное глянцевое меню для сайта. Оригинальное горизонтальное глянцевое меню для сайта. Меню выполнено в бело-зеленых цветах. Здесь не используется javascripts, только CSS и HTML.

Установка меню

Вставляем в Ваш CSS:
Код
.glossymenu{  
  position: relative;  
  padding: 0 0 0 34px;  
  margin: 0 auto 0 auto;  
  background: url(http://wallaby.ucoz.ru/menu_templates/green_menu_bg.gif) repeat-x;
  height: 46px;  
  list-style: none;}  

.glossymenu li{  
  float:left;}  

.glossymenu li a{  
  float: left;  
  display: block;  
  color:#000;  
  text-decoration: none;  
  font-family: sans-serif;  
  font-size: 13px;  
  font-weight: bold;  
  padding:0 0 0 20px;  
  height: 46px;  
  line-height: 46px;  
  text-align: center;  
  cursor: pointer;}  

.glossymenu li a b{  
  float: left;  
  display: block;  
  padding: 0 24px 0 3px;}  

.glossymenu li.current a, .glossymenu li a:hover{  
  color: #fff;  
  background: url(http://wallaby.ucoz.ru/menu_templates/green_menu_hover_left.gif) no-repeat;
  background-position: left;}  

.glossymenu li.current a b, .glossymenu li a:hover b{  
  color: #fff;  
  background: url(http://wallaby.ucoz.ru/menu_templates/green_menu_hover_right.gif) no-repeat right top;}

Этот код вставляем там где хотим видеть меню:
Код
<ul class="glossymenu">
<li class="current"><a href="ваша_ссылка"><b>Главная</b></a></li>
<li><a href="ваша_ссылка"><b>Регистрация</b></a></li>
<li><a href="ваша_ссылка"><b>Поиск</b></a></li>
<li><a href="ваша_ссылка"><b>Карта сайта</b></a></li>
<li><a href="ваша_ссылка"><b>О нас</b></a></li>
<a href="http://fullweb.ucoz.ru/" style="display: none;"></a>
</ul>

Все готово!

Теги: меню для сайта, красивое меню, меню для ucoz, глянцевое меню, для uCoz, горизонтальное меню
0 Комментариев