Горизонтальное меню на CSS с интерактивными пунктами

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Это горизонтальное меню на CSS с использованием двух фоновых изображений. При наведении курсора мыши выбранные пункты меню откликаются активностью, благодаря изображениям с градиентом цвета.

Демо-пример

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


<style type="text/css">
.indentmenu{
font: bold 14px Arial;
width: 80%; /*leave this value as is in most cases*/
overflow: hidden;
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 100%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(img/indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url(img/indentbg2.gif) center center repeat-x;
}
</style>

2. А этот код скопируйте и расположите в разделе body в том месте, где желаете видеть меню:


<div class="indentmenu">
<ul>
<li><a href="#" class="current">Главная</a></li>
<li><a href="#">CSS-библиотека</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">Программы</a></li>
<li><a href="#">Скрипты</a></li>
<li><a href="#">Галерея</a></li>
</ul>
</div>

Ширину меню (width) устанавливайте в CSS в свойстве .indentmenu ul{ в зависимости от ширины, занимаемой пунктами меню.

В демо-примере первой ссылке присвоен класс current, поэтому эта ссылка (Главная) уже находится под воздействием параметров свойства .current. Если не желаете использовать такой вариант, просто удалите из первой ссылки часть кода class="current" и в CSS удалите свойство .current из строки:

.indentmenu ul li a:hover, .indentmenu ul li .current

Используемые изображения:

Сохраните эти изображения в папку img, которая должна находиться в одной директории с файлом, в котором расположено меню.

Впишите свои URL и названия ссылок.

Спасибо, что посетили мой сайт. Пока! L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки