Красивое вертикальное меню «Дамское»

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

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

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

1. Скопировать и вставить код со стилями в файл стилей сайта или в раздел head своего сайта:

<style type="text/css">
.slidedoormenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* width of menu (don't forget to add border with below!) */
border-left: 8px solid #ffa1a3; /* thick left border of menu */
text-align: left;
}

.slidedoormenu li{
border-bottom: 1px solid #885b5c; /* Gray border beneath each menu item */
}

.slidedoormenu li a{
background: white url(img/vstrip.gif) repeat-y left top; /* Background image positioned to the left(v) top(h) corner initially */
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: black;
width: auto;
border-bottom: 1px solid white; /* White border beneath each menu item link, to add depth */
padding: 7px 0; /* Vertical (top/bottom) padding for each menu link */
padding-left: 7px; 
text-indent: 8px;
text-decoration: none;
}

.slidedoormenu li a:visited, .slidedoormenu li a:active{
color: black;
}

.slidedoormenu li a:hover{
background-position: -387px 0; /* Shift background image horizontally 387px, or the start of the 2nd background image */
color: black;
}

.slidedoormenu li.lastitem, .slidedoormenu li.lastitem a{
border-bottom-width: 0; /* For last menu item within menu, remove bottom border */
}

.slidedoormenu li.lastitem a{
padding: 8px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
padding-left: 7px;
}

</style>

<!--[if IE]>
<style type="text/css">
.slidedoormenu li a{ /* Menu link width value for IE */
width: 100%;
}
</style>
<![endif]-->

2. Этот участок кода скопируйте и вставьте в раздел body своего сайта, где будет находиться меню:

<ul class="slidedoormenu">
<li><a href="#">Главная</a></li>
<li><a href="#">Программы</a></li>
<li><a href="#">Проекты</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">CSS-практика</a></li>
<li class="lastitem"><a href="#">Контакты</a></li>		
</ul>

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

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

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

Последней строке меню присвоен класс lastitem. Можно регулировать ширину этой строки в файле CSS, изменяя значение padding в строке .slidedoormenu li.lastitem a.

Спасибо за внимание. Удачи! L.M.