Вертикальное меню для синих шаблонов uCoz

Вертикальное меню для синих шаблонов uCoz

Меню для синих шаблонов uCoz

Дизайн сайтов должен быть разработан до мелочей. Вот и этот стиль синего меню с оранжевой подсветкой, поможет приукрасить сайт практически любой темы.

Особенность этого меню в том, что нет подключенных js и jquery.

Меню использует графику прописанные в css стилях. Меню подойдет как для светлых дизайнов, так и для темных.

Установка:

Пропишем эффект для нашего меню в css стилях:

ul#menu{
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://seo-monetizator.ru/wp-content/uploads/2014/05/menu.gif);
padding: 8px 0 0 35px;
}

#menu li a:hover {
color: #FFF;
background: url (http://seo-monetizator.ru/wp-content/uploads/2014/05/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; }

Далее по месту, ставим нтмл код вертикального меню.

<div id=»menu">
<ul>
<li><a href="http://seo-monetizator.ru/">скрипты и шаблоны</a></li>
<li><a href="#">скрипты и шаблоны</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="seo-monetizator.ru">Ссылка</a>
</span>
</li>
</ul>
</div>

Если возникли вопросы, то задаем в комментариях.