Опять коснемся темы меню, название статьи говорит само за себя о чем пойдет сегодня речь. Есть масса способов реализовать пункты меню с закругленными углами. Но в этой статье пойдет речь о том как это сделать без использования скриптов, но с использованием картинок (от них никуда не деться). Думаю следует в самом начале рассказать принцип, чтобы в дальнейшем было понятно что мы будем реализовывать. В данном примере будет рассмотрено горизонтальное меню при наведении на один из пунктов, которого будет появляться фон с закругленными краями. Вот пример. С первого взгляда кажется ничего сложно, просто подкладываем под пункт меню нужную картинку с помощью свойства background и все. В принципе да, но большинство верстальщиков впадают в ступор, когда количество символов в пунктах меню значительно отличаются. И как сделать так чтобы левый и правый отступы от краев подкладываемой картинки были одинаковы при различной длине. Сперва приходит мысль о том чтобы подкладывать под каждый пункт меню отдельную картинку, но это дополнительные картинки, дополнительный код и что очень печально совсем не динамическое решение. Решение есть и довольно простое. И что самое приятное, нам потребуется всего одна картинка. И так… Картинка должна иметь следующий вид:

[показать]

Да, именно такая длинная, возможно вам и подлиннее потребуется.

Меню будет представлено горизонтальным списком (ul), и в пункты-ссылки нашего меню мы добавим один небольшой тег <span>

HTML код:

code:
<ul>

   <li><a href="#"><span>Псевдоэлементы и псевдоклассы</span></a></li>

   <li><a href="#"><span>CSS</span></a></li>

   <li><a href="#"><span>Выпадающее меню на css</span></a></li>

   <li><a href="#"><span>Введение в CSS</span></a></li>

</ul>

Хотя в XHTML тег <a> не допускает вложенных тегов, тег <span> является исключением. Вы можете смело его вставлять в тег <a>, результат окажется валидным и пройдет валидацию.

CSS код:

code:
ul li {

display: block;

font-size:15px;

margin-right: 30px;

float:left;

}

ul li a, ul li a span {

color: #000000;

display: block;

text-decoration: none;

background: url(over.gif) no-repeat 0 -30px;

padding:0px;

}

ul li a span {

margin:5px 0px 5px 15px;

padding:4px 15px 6px 0px;

}

ul li a:hover, ul li a:hover span {

background-color:#DBDBDB;

}

ul li a:hover {

background-position: top left;

cursor:pointer;

}

ul li a:hover span {

background-position: top right;

cursor:pointer;

}

over.gif является нашей длинной картинкой. Код является полностью валидным, соответствующие значки прилагаются. Вот так просто и без всяких JS решается проблема с закругленными углами у пунктов меню.

Таким же образом можно выделять активные пункты меню. Присваиваете активной ссылке класс (например class=”active”) и этому классу соответствующие стили, пример приводить не буду, думаю разберетесь.