Ролловер меню на CSS
Вот такое симпатичное ролловер-меню мы сейчас станем делать.
Если вы уже пытались что-то подобное изобразить в визуальном редакторе вроде Дримвьювера от Макромедии, то заметили, что там все построено на заковыристом 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 пикселей, высота 39 пикселей, авто-выравнивание по центру монитора, синий фон и очистка с обоих сторон, чтобы ни справа, ни слева больше ничего лишнего не вылезло.
Дальше зададим списку ul поля и запретим отображение маркеров.
Далее мы укажем пунктам списка li расположение «в линию», иначе по-умолчанию браузеры всегда складывают их в столбик.
А вот следующие два правила весьма интересны. В обоих указаны стили для отображения ссылок, но во втором появилось странное слово span. Зачем это?
Дело в том, что нам нужно привязать наши изображения кнопок к тэгам в виде фона. В данном случае тэг у нас один — <a>.
Привязывать фон можно только к стартовому тэгу. К </a> уже ничего не привяжешь.
Поэтому мы и ввели дополнительный тэг span. Его еще называют нейтральным, потому как он может быть использован везде и сам по себе не несет какой либо значимой нагрузки.
Замечу также, что этот тег не является блочным элементом. Не пытайтесь заменить им тэг div.
Таким образом, мы привязали первую картинку (как фон) к тэгу 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="Главная"><span>Главная</span></a></li>
<li><a href="#" title="Факты"><span>Факты</span></a></li>
<li><a href="#" title="Байки"><span>Байки</span></a></li>
<li><a href="#" title="Классика"><span>Классика</span></a></li>
<li><a href="#" title="О летучести"><span>О летучести</span></a></li>
</ul>
</div>
Enjoy! :)
UPD от 24.09.2018: Так как статья была написана в дремучем (по меркам Интернета) 2007 году, то по-сути стала уже неактуальна.
С тех пор многое изменилось. Уже никто не делает такие извращения с картинками и пр. Сейчас используют новое правило из арсенала CSS3 под названием border-radius:. Достаточно прописать вот такую простую строчку:
border-radius: 5px 5px 0 0;
чтобы задать скругленные уголки сверху плашки меню и оставить прямыми внизу.
