Разнообразие меню и блоков навигаций на сайтах это самая главная и неотъемлемая часть ресурса, которая своей индивидуальность и подчеркиванием выделяет функциональность и удобство для пользователя, как правило этот блок и ссылки в нем должны быть яркими и видными с полным отличием от основного контента страницы, многие пытаются скрывать меню или смешивать с рекламными блоками что бы иметь как можно больше кликом в по рекламе соответственно и заработок он неё.
Меню простое по исполнению в котором включено только 1 графическое изображения фона и значка который весит очень мало что дает возможность меню работать быстро и без глюков не нагружая страницы ресурса лишним. Цвет что бы изменить необходимо редактировать графический файл в формате gif далее отталкиваясь от фона меню изменить в стиле можно сам цвет шрифта и ссылки.
Установка 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://ucozon.ru/_dr/66/08198499.gif);
padding: 8px 0 0 35px;
}
#menu li a:hover {
color: #FFF;
background: url(http://ucozon.ru/_dr/66/08198499.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; }
Далее Устанавливаем HTML код
Устанавливаем ссылки меню в блок меню самостоятельный или в другой вариации, обычно это Глобальные блоки: Верхняя часть сайта.
Код
<div id="menu">
<ul>
<li><a href="http://ucozon.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>
</ul>
</div>
Меню сайта
Меню сайта
