Закругленные углы меню CSS Drupal 6

Дата публикации: 25 05 2012 Автор: PazitiFF

 

Недавно озадачился закруглением подсветки меню при верстке сайта на drupal 6 (линк на сайт будет позже), нашел замечательную статью, описывающую хороший кроссбраузерный способ и немного переработав под drupal, решил продублировать этот способ у себя в блоге. Оригинал статьи находится здесь

Есть масса способов реализовать пункты меню с закругленными углами. Но в этой статье пойдет речь о том как это сделать без использования скриптов, но с использованием картинок (от них никуда не деться). Думаю следует в самом начале рассказать принцип, чтобы в дальнейшем было понятно что мы будем реализовывать. В данном примере будет рассмотрено горизонтальное меню при наведении на один из пунктов, которого будет появляться фон с закругленными краями. С первого взгляда кажется ничего сложно, просто подкладываем под пункт меню нужную картинку с помощью свойства 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>
 
Как сделать так, чтобы drupal генерировал тег <span>, читайте тут:

CSS код:

ul li { 

display: block;
font-size:125%;
float:left;
}
ul li a, ul li a span {
color: #ED1E79;
display: block;
text-decoration: none;
background: url(img/knopa.png) no-repeat 0 -30px;
padding:0px;
}
ul li a span {
margin:5px 0px 5px 15px;
padding:2px 15px 6px 0px;
}
ul li a:hover, ul li a:hover span {
background-color:#000;
}
ul li a:hover {
background-position: top left;
cursor:pointer;
ul li a:hover span {
background-position: top right;
cursor:pointer;
color: #fff;
}
 

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Вы можете использовать подсветку исходного кода следующими тегами: <code>, <blockcode>, <apache>, <bash>, <css>, <drupal6>, <html5>, <javascript>, <mysql>, <php>.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.