Меню раздвижные двери или sliding door
Как-то давно я рассказывал о том, как создать ролловер меню средствами css. Там был использован симметричный (относительно вертикали) двойной фон, который менял свое положение при наведении мыши на пункт меню.
Тогда же в комментариях прозвучало любопытное название — «раздвижные двери» или иначе — sliding door. В принципе способ построения «дверей» схож: в коде для пунктов списка меню мы добавляем вспомогательный тэг <span></span>, которому приписываем некоторый набор правил.
Однако на этот раз акцент будет сделан не на изменении цвета или картинки фона, а на изменении длины кнопки, в зависимости от размера текста самой ссылки.
Рассмотрим подробнее.
Пункты меню могут иметь различную длину. На примере ниже вы можете видеть, что слово «Главная» заметно короче, нежели «Наши горячо любимые клиенты».
Как сделать так, чтобы оба этих пункта меню использовали одну и ту же картинку в качестве фона? Ведь если заранее нарисовать достаточно длинную картинку кнопки, то для пункта «Главная» она будет явно чрезмерной.
Вот как раз для таких случаев и был придуман своеобразный финт, названный раздвижными дверями. Картинка кнопки на самом деле рисуется настолько длинной, чтобы ее хватило на любой размер пункта меню (в разумных пределах, конечно же).
Затем картинку разрезают на две неравные части. Одна — самая длинная — будет содержать в себе непосредственно ссылку, а вторая (короткая) будет изображать некую «закрывашку».
Чтобы задать в качестве фона для одного пункта меню эти две разные картинки используем вспомогательный тэг 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 пикселей. Чтобы текст ссылки имел по краям одинаковые поля с фоном.
Вот так просто. Enjoy!
UPD от 27.10.2018: прошло 9 лет с момента написания статьи, много воды утекло с тех пор. Сегодня уже никто не заморачивается подобными штуками с картинками, все делается элементарно на чистом CSS3 при помощи свойства border-radius. Однако статью не удаляю. Пусть остается как музейный экспонат :)
