Пополнить WebMoney
Вывод WebMoney
Обмен WebMoney
Кредит WebMoney

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



на главную nocrisise.ruназ к меню на CSS


скачать сборник меню для 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; /*Цвет текста при наведении курсора*/
}


По теме:

CSS

меню для сайтов ucoz

 

 

 




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


Понравилась статья? - добавь ее себе!


 





сайт-визитка / шаблон сайта / обработка фотографий / дизайн афиши, обложки книг, журнал, флаеры и т.д.
 
 
Подробней





nocrisise.ru © 2009-2012