Вертикальное меню на CSS – – простое

Меню

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

просмотр горизонтального меню (пример)просмотр вертикального меню (пример)скачать исходник меню для CSSскачать исходник  меню для CSS

Для начала я вам напомню, что файл HTML нужно объединить вместе с CSS. Создать файл style.css в корне сайта и в head пропишите:

<link rel=”stylesheet” type=”text/css” href=”style.css” />

Cоздайте конструкцию меню в HTML

<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; /*Цвет текста при наведении курсора*/
}

Читайте также:  Красивые меню для сайта ucoz: вертикальное меню для сайта ucoz. Новое CSS меню для uCoz
Оцените статью
ЗАРАБОТОК В СЕТИ
Добавить комментарий