cssor.ru - Сайт о CSS и верстке сайтов, в помощь веб разаботчикам.

Закругленные углы у пунктов меню на CSS

Дата: 19.10.2008
Закругленные углы у пунктов меню на CSS

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

Контакты и реклама

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

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

HTML код:

<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 код:

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”) и этому классу соответствующие стили, пример приводить не буду, думаю разберетесь.

26.10.2008

Этот трюк называется "Методом раздвижных дверей". Интересный блог, добавил себе в ридер).

22.11.2008

Как раз по теме видеоурок "Создание меню с помощью графических кнопок на CSS" - http://www.shaybakova.com/lessons/menu_button.php

22.11.2008

Интересное решение, спасибо. Вот тут еще много интересного есть: "38 статей о создании закругленных углов на сайтах" http://habrahabr.ru/blogs/webdev/30019/

25.11.2008
Хотя в XHTML тег a не допускает вложенных тегов, тег является исключением
Любой строчный тег подойдет.

30.11.2008

Все таки считаю что jquery для этой цели лучше, тк картинки отключают чаще чем скрипты.

07.12.2008

нам не подходит. мы начали "играть" с относительными высотами шрифтов. :)
посему такие простые пути мы не используем.

Еще:
Введение в CSS - в 6ом осле курсор мыши остается текстовым указателем над текстом.
Надо в CSS указать стиль курсора для span вложенного в a

07.12.2008

черт. еще раз :)
<a href="# "><span>Введение в CSS</span></a>
я про такую вещь

05.01.2009

Лучше бы вы написали active как дополнение у меня чет не выходит, и еще пришлось усложнить конструкцию поместив все в каждый tr чтобы сделать вертикальное меню, иначе все пишется в одну строчку.

13.01.2009

Люди! А у мянефига! Мож там надо ссылку на новую страницу поставить? Я просто код капиранул в блокно и все! Что там?

23.01.2009

отличное решение, все просто и понятно, спасибо, то что нужно

28.01.2009

Доброго здравия!
подскажите, в чем ошибка. при наведении мышки выходит прямогулоный фон, нет скруглений. (рисунок делал разным размером)???

06.02.2009

Классная статья!

11.02.2009

а как такиж сделать чтобы меню было вертикальное, не используя tr ?

13.02.2009

float:left; из css уберите.

12.03.2009

спасибо. раньше на джекввери делал

16.04.2009

Спасибо огромное!

21.04.2009

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

22.04.2009

Гость
Извините не телепат, поэтому не знаю что вы не так делаете.
Вот рабочий пример http://cssor.ru/examples/krygmenu/krygmenu.htm, посмотрите его код.

22.04.2009

спасибо! а можно еще css код этого рабочего примера пожалуйста

22.04.2009

Гость
Нет конечно, я храню его подальше о посторонних глаз.

А если серьезно, то вы наверно большой лентяй. Его код представлен в этом посте (немного полосу прокрутки браузера придется подвигать наверх). Полностью весь HTML и CSS код можно посмотреть в рабочем примере который я указал выше, посмотрев исходный код (в опере и фаерфоксе это можно сделать нажав CTR+U), в интернет експловере во вкладке "страница" есть пункт соответсвующий. В исходном коде подключаются стили, их содержимое можно посмотреть по ссылке http://cssor.ru/examples/krygmenu/CSS.css

23.04.2009

спасибо за Ваши замечания! просто не могла найти ошибку, что ж так сразу... а Ваши уроки я достаточно внимательно читаю и не ленивая несколько, просто опыта мало =(

03.05.2009

а как чтоб закруглить только один угол?

07.05.2009

jukka! Чтоб один угол закруглить нарисуй картинку с одним закругленным углом=)

07.05.2009

этот пример не будет работать для пунктов меню в две строки, нет универсальности....

07.05.2009

супер! как раз возникла необходимость сделать такое! но.... есть как всегда одно но ))
нужно , чтобы неактивный элемент меню тоже отображался с фоном... в моем случае - возле элемента меню должен находиться пустой кружочек... а при наведении курсора - кружочек должен быть закрашен цветом и должна появляться рамка вокруг текста (фон естественно в данном случае - прозрачный гиф или пнг) ... но что-то не допираю... как в данном коде сделать этот фон для неактивного элемента? :)

надеюсь, подскажете решение )) заранее спасибо

з.ы. хороший сайт! буду регулярно к вам забегать ))

07.05.2009

Евгуний
Я вообще расчитывал на то, что это просто пример. На практике задачи обычно бывают сложнее, но если не знать самого простого, то и к сложному подойти будет очень сложно.

Diablo
Неактивному элементу присваиваете класс, и прописывайте стили для этого класса.

07.05.2009

к сожалению... я пока что не силен в ксс... но сделать нужно именно так... не могли бы вы на примере данного кода показать... что где дописать, чтобы был фон для неактивного элемента... и менялся при наведении курсора?

08.05.2009

Катенька,мне надо не рисованный(((((

29.06.2009

еще можно сделать по другому. Вместо длинной картинки взять картинку высотой в 2 раза больше, и шириной в закругленный уголок. вверху один угол, а вниз картинки второй угол, и позиционированием их менять. а центральную часть - цветом залить. Получится небольшой спрайт. Картинка весит поменьше.

01.07.2009

Хорошее решение.. смотрю что то блог заброшен.. а зря

23.07.2009

Способ неподходит если каждый пункт меню разного цвета. Може твсетак и есть способ менять не картинку а менять цвет бэкграунда, с учетом того что меню расположено на цветной картинке?

25.07.2009

Да щас заказчк пошел - подавай аякс да жава навороты, а сам сидит с IE6 и обновить неможет и хочет все чтобы в нем типо топ было.

10.08.2009

Да уж. Заказчик теперь не хлеб с медом. Начитаются всякого, а потом требуют. А что для нормальной работы нужно - ни в зуб ногой. Вот и мучаемся...

08.09.2009

Если вы дизайните сайты постоянно, то вам не составит труда один раз сделать картинки всех нужных цветов. ;)

06.11.2009

Материал на пять с плюсом. Но есть и минус! У меня скорость интернета 56кб/сек. Страница грузилась около 40 секунд.

03.12.2009

Спасибо большое! 3 дня думал, перепробовал кучу способов. Решился было на дополнительные скрипты, чтоб закруглить эти углы наконец. И при поиске скрипта в яндексе нашел эту статью.
Кстати, кнопки разных цветов и дополнительные картинки тоже легко получаются, просто вниз беграунда дорисовываем и сдвигаем на нужную высоту. А span лучше двигать по горизонтали, чтоб не мешал фонам.

15.01.2010

А если фон сайта сделан картинкой, а у гифа нет прозрачности....???

21.01.2010

Статья хорошая, но для тех, у кого отключены картинки этот способ мертвый

09.02.2010

Павел, но по-моему сейчас каждый включает картинки.
Супер! Творить такое в css - это класс)

20.02.2010

Скажите, пожалуйста, а вот эта гостевая книга у Вас на сайте как называется? Чтобы сверху был текст какой-нибудь, а внизу можно было бы оставить сообщение и другие тоже смогли бы его прочитать прямо на странице, как здесь?

21.03.2010

а нельзя вообще без использования картинок?

01.06.2010

Можно без картинок

07.06.2010

Рекомендую пользоваться генераторами по типу http://border-radius.narod.ru и других, пора уже отказаться от web1.0-льных костылей

14.11.2010

border-radius: 12px;
-moz-border-radius: 12px;

первая строка не работает в фаерфоксе, а использование только второй, дает правильный результат только в ФФ а в Опере слишком сильно закругляет. А если написать обе строки сразу, то в обеих браузерах отображает правильно. И лишь интернет эксплорер курит в сторонке. пример можно посмотреть на http://carkam.ru/ я себе так сделал!

23.12.2010

Добрый день! как можно сделать выпадающее меню как на этом шаблоне http://www.yootheme.com/demo/themes/joomla/2010/expo/
Заранее спасибо!

Так-то закруглёнка, конешно, тематично и красиво выглядит. Однако ж, зараза, код она очень сильно перегружает. А это завсегда зло, я полагаю.

15.04.2011

Помогите разобраться - в чем проблема. У меня или левая сторона закругляется или правая - почему обе стороны не закругляются? Весь инет уже облазил.

01.07.2011

прием конечно хороший, но он замудренный вариант. можно просто написать <a href="" ></a><span></span> и присвоить обоим свойство display:inline-block и беграунды (одной слева, другой справа) и все.

21.09.2011

Это техника работает во всех браузерах, но не считается самой лучшей из-за допольнительного элемента "span", хоть и является самой надёжной.

05.10.2011

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

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

Заранее спасибо.

Спасибо большое, буду юзать.

24.10.2011

при изменении фонового цвета появляются квадраты. как исправить?

24.10.2011

при изменении фонового цвета появляются квадраты. как исправить?

13.11.2011

Метод - ужасен! И весь ужас заключается в

ul li a:hover, ul li a:hover span {
background-color:#DBDBDB;
}

- который, собственно, никогда не позволит использовать прозрачные углы для неоднородного фона.

19.12.2011

Код еще не использовал, но сразу увидел эффектное решение — использовать внутри ссылки. И главное - все сделано лаконично! Ведь вариантов можно кучу использовать, а тут ни дать ни взять — педантичный код. Большое спасибо! Блог в закладки!

Иван.

19.12.2011

......(внутри ссылки)

19.12.2011

...<спан>... (вот же!)