Синее меню для сайта ucoz

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

Навигация на сайте должна быть красивой и удобной, именно эти функции выполняет данное вертикальное меню для uCoz. Цветовая гамма меню выполнена в 2 тонах: синий и оранжевый, которые менются при наведении на ссылку меню. Скрипт меню ucoz не содержит тяжелых для сайта js и jquery.

Шаг-1 Установка CSS

Заходим в П.У - Дизайн - Упр. Дизайном(CSS) и в самый низ вставляем:

Код

ul {
  list-style: none;
  margin: 0;
  padding: 0;}

img {border: none;}
#menu {width: 200px; margin: 10px;}

#menu li a {
  height: 32px;
  voice-family: "\"}\"";
  voice-family: inherit;
  height: 24px;
  text-decoration: none;}

#menu li a:link, #menu li a:visited {
  color: #FFF;
  display: block;
  background: url(http://wallaby.ucoz.ru/demo/img/menu.gif);
  padding: 8px 0 0 35px;}

#menu li a:hover {
  color: #FFF;
  background: url(http://wallaby.ucoz.ru/demo/img/menu.gif) 0 -32px;
  padding: 8px 0 0 35px;}

#menu li span {
  position: absolute;
  left: 12em;
  margin-top: -1.4em;
  width: 10em;
  display: none;}

#menu li:hover span { display: block;}
#menu li span a { display: inline; }

Шаг-2 Установка HTML
Вставляем в нужное на сайте место, обычно это Верхняя часть сайта:

Код

<div id="menu">
 <ul>
 <li><a href="http://wallaby.ucoz.ru">CSS Главная</a></li>
 <li><a href="#">CSS Меню</a>
 
 <a href="#">1Ссылка</a>
 <a href="#">Ссылка</a>
 <a href="#">Ссылка</a>
 
 </li>
 <li><a href="#">CSS Меню</a>
 
 <a href="#">2Ссылка</a>
 <a href="#">Ссылка</a>
 <a href="#">Ссылка</a>
 
 </li>
 <li><a href="#">CSS Меню</a>
 
 <a href="#">3Ссылка</a>
 <a href="#">Ссылка</a>
 <a href="#">Ссылка</a>
 
 </li>
 <li><a href="#">CSS Меню</a>
 
 <a href="#">4Ссылка</a>
 <a href="#">Ссылка</a>
 <a href="#">Ссылка</a>
 
 </li>
 <li><a href="#">CSS Меню</a>
 
 <a href="#">5Ссылка</a>
 <a href="#">Ссылка</a>
 <a href="#">Ссылка</a>
 
 </li>
 <li><a href="#">CSS Меню</a>
 
 <a href="#">6Ссылка</a>
 <a href="#">Ссылка</a>
 <a href="#">Ссылка</a>
 
 </li>
 </ul>
<a href="http://fullweb.ucoz.ru/" style="display: none;">Ссылка</a>
</div>

Теги: меню для сайта, меню для ucoz, для сайта, Синее меню, для uCoz, Синее меню для сайта ucoz

Похожие материалы