ЭЙ, Стой!!! Вертикальное меню на CSS – – простое

Автор: | 14.01.2020

на главную 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

Читайте также:  ЭЙ, Стой!!! Красивые меню для сайта ucoz- вертикальное меню для сайта ucoz. Новое CSS меню для uCoz

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *