Вы можете использовать простое CSS – меню без вмешательства графики. Да, меню простое, но красиво смотрится и загружается намного быстрее, чем графическое меню.
Для примера вы можете посмотреть в демо – кода меню на CSS и убедиться в том, что действительно меню красивое.
— просмотр вертикального меню (пример)
— скачать исходник меню для CSS
Для начала я вам напомню, что файл HTML нужно объединить вместе с CSS. Создать файл style.css в корне сайта и в head пропишите:
<link rel=»stylesheet» type=»text/css» href=»style.css» />
<div id=»menu»>
<ul>
<li> <a href=»#» class=»current»> <span>Домой</span></a></li>
<li><a href=»#»><span>о нас</span></a></li> <li>
<a href=»#»><span>работы</span></a></li> <li>
<a href=»#»><span>партнёры</span></a></li> <li>
<a href=»#»><span>Контакты</span></a></li>
</ul>
</div>
В CSS файле пишем.
#coolmenu{
border: 1px solid gray; /*Стиль рамки */
border-bottom-width: 0;
width: 92%; /*Ширина меню */
background-color: #f6f6f6; /*Фоновый цвет ячейки*/
margin:8px; /*Ширина отступов*/
}
#coolmenu a{
font: bold 13px Verdana; /*Шрифт текста*/
padding: 2px; /*Внутренний отсутп текста ссылки от краев ячейки*/
padding-left: 4px;/*Внутренний отсутп текста ссылки от левого края ячейки*/
display: block;
width: 100%; /*Ширина ячейки*/
color: #000000; /*Цвет текста*/
text-decoration: none; /*Подчеркивание у ссылок — нет*/
border-bottom: 1px solid gray;
}
#coolmenu a:hover{
background-color: #96CCFF; /*Фоновый цвет ячейки при наведение курсора*/
color: #000000; /*Цвет текста при наведении курсора*/
}
