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

6175 просмотров 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>  
  <span>  
  <a href="#">1Ссылка</a>  
  <a href="#">Ссылка</a>  
  <a href="#">Ссылка</a>  
  </span>  
  </li>  
  <li><a href="#">CSS Меню</a>  
  <span>  
  <a href="#">2Ссылка</a>  
  <a href="#">Ссылка</a>  
  <a href="#">Ссылка</a>  
  </span>  
  </li>  
  <li><a href="#">CSS Меню</a>  
  <span>  
  <a href="#">3Ссылка</a>  
  <a href="#">Ссылка</a>  
  <a href="#">Ссылка</a>  
  </span>  
  </li>  
  <li><a href="#">CSS Меню</a>  
  <span>  
  <a href="#">4Ссылка</a>  
  <a href="#">Ссылка</a>  
  <a href="#">Ссылка</a>  
  </span>  
  </li>  
  <li><a href="#">CSS Меню</a>  
  <span>  
  <a href="#">5Ссылка</a>  
  <a href="#">Ссылка</a>  
  <a href="#">Ссылка</a>  
  </span>  
  </li>  
  <li><a href="#">CSS Меню</a>  
  <span>  
  <a href="#">6Ссылка</a>  
  <a href="#">Ссылка</a>  
  <a href="#">Ссылка</a>  
  </span>  
  </li>  
  </ul>  
<a href="http://fullweb.ucoz.ru/" style="display: none;">Ссылка</a>
</div>


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