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



Разработчик: неизвестен

Очень простое и в тоже время очень оригинальное исполнение меню для сайтов системы uCoz. Плюсы данного меню в том, что его можно использовать как в горизонтальном виде, так и в вертикальном виде (установить в блок как обычное меню). Такого рода меню очень стильно и ненавязчиво смотрится, плюс оно легко устанавливается и так же легко редактируется. Такое меню не обязательно устанавливать на темные шаблоны, оно так же хорошо смотрится и на светлых шаблонах (все благодаря тому, что кнопки не прямоугольные, а имеют закругленные углы).

Установка:
1) Копируем первый код (CSS) и вставляем его в CSS своего сайта
2) Копируем второй код (КОД) и вставляем его в то место где хотим видеть горизонтальное меню или активируем конструктор сайта > создаем новый блок > вставляем в него КОД

В CSS:
Code
#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://pontov.ucoz.net/Raboti/Chornoe_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://pontov.ucoz.net/Raboti/Chornoe_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://pontov.ucoz.net/Raboti/Chornoe_menu/menu_left_h6.png) no-repeat left;  
  height:50px;  
}  

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


КОД:
Code
<div id="menu">  
  <ul>  
  <li><a href=" http://pontov.ucoz.net "><span>Главная</span></a></li>  
  <li><a href=" http://pontov.ucoz.net"><span>Поиск</span></a></li>  
  <li><a href=" http://pontov.ucoz.net"><span>мой сайт </span></a></li>  
  <li><a href=" http://pontov.ucoz.net"><span>Карта сайта</span></a></li>  
  <li><a href=" http://pontov.ucoz.net"><span>О сайте</span></a></li>  
  </ul>  
  </div>



Категория: Скрипты меню | Добавил: GaV | Теги: черное вертикальное меню, Черное горизонтальное меню, статья установки кнопок, скрипты, uCoz, кнопки
Просмотров: 1853 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]