Ролловер меню на CSS

17.12
2007

Данная статья уже была размещена на моем блоге Вебмастеринг. Здесь я немного сократил описательный текст и еще кое-чего подправил. Также по теме предлагаю ознакомиться с очень интересным способом оформления меню — “раздвижные двери”, часть 1 и часть 2.

Вот такое симпатичное меню мы сейчас станем делать. Если вы уже пытались что-то подобное изобразить в визуальном редакторе вроде Дримвьювера от Макромедии, то заметили, что там все построено на заковыристом Java-скрипте и в коде выглядит просто устрашающе. Мы же используем всего парочку картинок-заготовок, обычный немаркированный список и немножко css.

Для начала нарисуем две картинки:

Это две части одной закладки меню. Правая делается такой длины, чтобы при выбранном размере шрифта, на картинке помещалось самое длинное слово из всего списка разделов. Ну, например, “супермегакулфорумблинваще!”. Каждая из картинок состоит из двух частей, одна под другой. Верхняя часть — исходное состояние, нижняя — при наведении мышки. Принцип довольно простой и изячный: в листе стилей мы зададим разным состояниям различные координаты отображения. То есть, картинка загружается вся целиком, но на странице мы изначально видим только верхнюю чать. Когда мы подводим к кнопке мышку, то как бы “выскакивает” нижняя часть.

Итак, картинки готовы. В листе стилей запишем следующий код:

#menu {
width: 860px;
height: 39px;
margin: 0 auto;
background: #69c;
font: 90% “Comic Sans MS”, Verdana, Arial, sans-serif;
line-height: 1.8em;
clear: both;
}

#menu ul {
padding: 5px 10px 0 30px;
list-style: none;
}

#menu li {
display:inline;
}

#menu a {
float: left;
background: url(images/tableft.gif) no-repeat left top;
padding: 0 0 0 4px;
}

#menu a span {
float: left;
background: url(images/tabright.gif) no-repeat right top;
padding: 4px 20px 5px 10px;
color: #fff;
}

#menu a:hover span {
color: #FF9834;
}

#menu a:hover {
background-position: 0% -42px;
}

#menu a:hover span {
background-position: 100% -42px;
}

#menu li.active {
float: left;
color: #FF9834;
background: url(images/tableft.gif) no-repeat left top;
background-position: 0% -42px;
padding: 0 0 0 4px;
}

#menu li.active span {
float: left;
background: url(images/tabright.gif) no-repeat right top;
padding: 4px 20px 5px 10px;
background-position: 100% -42px;
}

Разберем запись подробно. Ширина блока меню 860 пикселей, высота 39px, автовыравнивание по центру монитора, синий фон, семейство шрифтов, и очистка с обоих сторон, чтобы ни справа, ни слева больше ничего лишнего не повылезало.
Дальше зададим списку ul поля и запретим отображение маркеров. Поэтому список у нас и называется немаркированным.

Далее мы укажем пунктам списка li расположение “в линию”, иначе по-умолчанию браузеры всегда складывают их в столбик.

А вот следующие два правила весьма интересны. В обоих указаны стили для отображения ссылок a, но во втором появилось странное слово span. Зачем это? Дело в том, что нам нужно привязать наши изображения кнопок к тэгам в виде фона. В данном случае тэг у нас один — <a>. Привязывать фон можно только к стартовому тэгу. К </a> уже ничего не привяжешь. Поэтому мы и ввели дополнительный тэг span. Его еще называют нейтральным, потому как он может быть использован везде и сам по себе не несет какой либо значимой нагрузки.

Таким образом, мы привязали первую картинку (как фон) к тэгу a, а вторую к span. Причем для первой указали расположение слева вверху и запретили ей повторяться, а второй — справа вверху, и тоже без повтора. Поля тоже заданы не абы как. Сначала мы показали левой картинке отступить от левого края на 4 пиксела, то есть как раз на ширину картинки. Если этого не сделать, то правая картинка, которая заведомо шире, просто “съест” левую, потому что названия разделов у нас все-таки не очень длинные. Что касается полей для правой картинки, то мы их задали такими, чтобы справа от имени раздела оставалось столько же пространства, сколько и слева (а иначе браузер “подожмет” слово под обрез). Вобщем экспериментируйте и увидите.

Для ссылок задали белый цвет (белый на зеленом — абажаю просто!). А для активных — оранжевый на белом.

Следующие два правила как раз приказывают нашим картинкам спрятать верх и показать низ при наведении на них мышкой. Для левой картинки мы указали позицию в 0% (то есть крайнее левое положение) и минус 42 пикселя. То есть мы просто “отняли” у нее верхнюю часть. А так как картинка изначально загружена на страницу полностью, то она и покажет нам нижнюю часть. Для правой картинки мы указали, соответственно, 100% позицию (крайнюю справа) и тоже минус 42 пиксела.
Возникает вопрос: почему мы сразу не видим на странице целые картинки? А потому, что в самом начале для нашего блока менюшек мы задали высоту всего в 39 пикселей (можно и 42, но так как браузеры по разному считают отступы, то мы чуток перестраховались). Что-то вроде окошка. Помните фильмы про Шерлока Холмса? Там в самом начале идут хитроумные титры в виде целого поля букавак? На них наводится черный трафарет с прорезями, и получаются осмысленные слова. Вот примерно на таком же принципе сделано и наше меню. Все просто!

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

Не забываем везде указывать обтекание слева — (float: left;). Иначе глюки неизбежны.

Вот вроде бы и все. Но IE все-таки браузер с характером, и наше красивое меню, как-то некрасиво искажает. В данном уроке не видно, но вот на собранной целиком странице получалась эдакая щелка между меню и основным блоком. Это как раз происходит потому, что IE (в отличие от других браузеров) по-своему высчитывает размеры полей и отступов. На такое безобразие хитрые верстальщеги придумали не менее хитрый болт, называемый хаком. То есть спецом для IE в листе стилей делается приписка (зачастую с указанием версии IE): “…сему поганцу показывать мою гениальную менюху вот так: (и тут дополнительное правило)…”.

Такой хак можно вписать в основной лист стилей, а можно пристегнуть отдельным листом, дав на него соответствующую ссылку. Мы так и поступим, и пристегнем к странице еще один css, обозвав его просто ie.css. В нем мы запишем следующее:

#menu a span {
padding: 4px 20px 4px 10px;
}

#menu li.active span {
padding: 4px 20px 4px 10px;
}

Как видите, в отличие от основного листа, здесь мы указали нижнее поле на один пиксель меньше (4 вместо 5). Вот и вся трабла.

Ну и наконец код самой страницы (тут только менюха, все остальные, положенные для страницы тэги, опущены):

<div id=”tabs”>
<ul>
<li><a href=”#” title=”Главная”>Главная</a></li>
<li><a href=”#” title=”Факты”>Факты</a></li>
<li><a href=”#” title=”Байки”>Байки</a></li>
<li><a href=”#” title=”Классика”>Классика</a></li>
<li><a href=”#” title=”О летучести”>О летучести</a></li>
</ul>
</div>

Действующее меню можно посмотреть здесь: Pigfly - Сайт о Счастье, Удаче и Богатстве и Немного о Дзэн.

Enjoy!

Akuji 21.03.2008 11:21

Что сделать что бы кнопки были одинакового размера, а не в зависимости от текста?
Akuji 21.03.2008 11:29

И про ie.css - как его подключить (если то - тогда то) что то я не нашел?
Kventor 21.03.2008 11:41

2Akuji: Для этого проще всего воспользоваться менюшками-картинками. То есть уже с нарисованным текстом разделов. Вот два примера с кодами как можно это реализовать:

1. http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/

2. http://www.nundroo.com/navigation/

А про вставку хака к IE что-то и правда я упустил Нужно между тэгами <head></head> вставить вот такой кусок кода: