Меню раздвижные двери или sliding door

Дата: 09.09.2009 | Автор: Игорь Квентор | Рубрика: Верстка |

Тэги: , , ,

slidingdoor1.png

Как-то давно я рассказывал о том, как создать ролловер меню средствами css. Там был использован симметричный (относительно вертикали) двойной фон, который менял свое положение при наведении мыши на пункт меню. Тогда же в комментах прозвучало любопытное название — “раздвижные двери” или иначе — sliding door. В принципе способ построения “дверей” схож: в коде для пунктов списка меню мы добавляем вспомогательный тэг <span></span>, которому приписываем некоторый набор правил. Однако на этот раз акцент будет сделан не на изменении цвета или картинки фона, а на изменении длины кнопки, в зависимости от размера текста самой ссылки.

Рассмотрим подробнее. Пункты меню могут иметь различную длину. Слово “Главная” заметно короче, нежели “Наши горячо любимые клиенты”. Как сделать так, чтобы оба этих пункта меню использовали одну и ту же картинку в качестве фона? Ведь если заранее нарисовать достаточно длинную картинку кнопки, то для пункта “Главная” она будет явно чрезмерной. Вот как раз для таких случаев и был придуман своеобразный финт, названный раздвижными дверями. Картинка кнопки на самом деле рисуется настолько длинной, чтобы ее хватило на любой размер пункта меню (в разумных пределах, конечно же). Затем картинку разрезают на две неравные части. Одна — самая длинная — будет содержать в себе непосредственно ссылку, а вторая — короткий хвостик — будет изображать некую “закрывашку”.

slidingdoor2.png

Чтобы задать в качестве фона для одного пункта меню эти две разные картинки, и предназначен вспомогательный тэг span. Рассмотрим код меню:

<ul>
<li><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>Наши горячо любимые клиенты</span></a></li>
<li><a href="#"><span>:)</span></a></li>
</ul>

Вы видите, что сами наименования пунктов взяты в тэги <span>. Теперь рассмотрим лист стилей CSS:

ul {
list-style: none;
}
li {
float: left;
}
li a {
background: url("menu-right.png") no-repeat top right;
display: block;
float: left;
height: 27px;
margin-right: 5px;
padding-right: 20px;
text-decoration: none;
color: #fff;
font-family: Arial, sans-serif;
font-size: 1em;
font-weight: normal;
}
li a span {
background: url("menu-left.png") no-repeat;
display: block;
line-height: 27px;
padding-left: 20px;
}

Для тэга <a> мы в качестве фона прописали правую, короткую картинку. Для <span>, соответственно, левую длинную. Обратите внимание, у тэга <a> в наборе правил задана высота в 27 пикселей, которая равняется высоте фоновой картинке, а также задано правое поле (padding-right) в 20 пикселей, которое равно ширине короткой картинки фона. Соответственно, подставляете сюда свои размеры используемых картинок.

У тэга <span>, наоборот, задано левое поле на те же 20 пикселей. Чтобы текст ссылки имел по краям одинаковые поля с фоном.

rss Подпишитесь на RSS

Или получайте новости на ваш e-mail:

Один комментарий на запись “Меню раздвижные двери или sliding door”

  1. websova 29.09.2009 18:14

    Спасибо! Очень быстрый и полезный приём )

Трэкбеки

Оставить комментарий