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

7525 просмотров Alan_Writer 25.05.2013

Демо ▶️

Классическое горизонтальное меню для ucoz черного цвета с глянцевым эффектом. Простой каркас, и немного стилей, и в результате имеем отличное темное меню.

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

Копируем код и вставляем в CSS:
Код
#menu {width:100%; margin:0; padding:0;}  
#menu ul {list-style:none;}  
#menu li {list-style:none; display:block; float:left;}  

#menu li a {  
  font-family:sans-serif;  
  display:block;  
  float:left;  
  height:50px;  
  color:#F4F4F4;  
  font-size:18px;  
  font-weight:bold;  
  background:url(http://wallaby.ucoz.ru/menu/menu_left6.png) no-repeat left;  
  line-height:49px;  
  padding:0 0 0 20px;  
  text-decoration:none;}  

#menu li a span {  
  display:block;  
  float:left;  
  background:url(http://wallaby.ucoz.ru/menu/menu_right6.png) no-repeat right;  
  height:50px;  
  color:#F4F4F4;  
  line-height:49px;  
  padding:0 20px 0 0;}  

#menu li a:hover {  
  display:block;  
  float:left;  
  background:url(http://wallaby.ucoz.ru/menu/menu_left_h6.png) no-repeat left;  
  height:50px;}  

#menu li a:hover span {  
  display:block;  
  float:left;  
  background:url(http://wallaby.ucoz.ru/menu/menu_right_h6.png) no-repeat right;  
  color:#fff;  
  height:50px;}

Вставляем туда, где хотим видеть меню:
Код
<div id="menu">
<ul>  
<li><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>Поиск</span></a></li>
<li><a href="#"><span>Регистрация</span></a></li>
<li><a href="#"><span>Карта сайта</span></a></li>
<li><a href="#"><span>О сайте</span></a></li>
<a href="http://fullweb.ucoz.ru/" style="display: none;"></a>
</ul>  
</div>

Все готово!

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