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