Вертикальное меню с закруглением правого края

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

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

Демо-пример

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

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

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


<style type="text/css">
.panels
{
list-style-type: none;
margin: 0;
padding: 0;
width: 220px; /* width of menu */
}

.panels li
{
border-bottom: 1px solid white; /* white border beneath each menu item */
}

.panels li a
{
background: #00008B url(img/panelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 18px;
text-decoration: none;
border-bottom: 1px solid blue; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
text-align: left;
}

.panels li a:visited, .panels li a:active
{
color: white;
}

.panels li a:hover
{
background-color: blue; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid blue; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/
}

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

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

<ul class="panels">
<li><a href="#">Главная</a></li>
<li><a href="#">CSS-практика</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Форум</a></li>		
</ul>

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

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

Желаю счастья! L.M.

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

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