CSS: more accessible graphic menu // Mash
Четвёртые пни и дохлые двойки, выделенные линии и GPRS, мониторы за два десятка дюймов и экраны наладонников… Трудно угодить всем сразу, но пытаться сделать это не только можно, но и нужно.
Вот достаточно неплохое навигационное меню:

То, что вы видите — просто ссылки списка разделов сайта, стилизованные под кнопки. Никакой графики.
Пользователи браузеров без поддержки CSS или до которых файл стилей в силу каких-либо обстоятельств не дошёл по сети, увидят список в «академическом дизайне» (например так, как показано на рисунке). Контент доступен, посетитель не потеряется в структуре сайта.
А теперь включим графику и посмотрим на то же меню (based on original):
Opera, Mozilla, IE5+. Исходник можно скачать по ссылке внизу страницы, я лишь скажу пару слов о принципе.
HTML-код в данном примере выглядит так:
HTML:
<ul>
<li id="bu1" class="here">
<a href="#"><span>homepage</span><em><!-- --></em></a>
</li>
<li id="bu2">
<a href="#"><span>business</span><em><!-- --></em></a>
</li>
.. .. ..
</ul>
Вертикальное/горизонтальное расположение пунктов навигационного меню, жёсткая привязка, поплавки — всё это не имеет значения. Суть сводится к абсолютному позиционированию двух инлайн-элементов (span, em, nevermind) внутри ссылки, позиционированной относительно, и скрытии одного такого элемента (span) за графическим фоном другого (em):
CSS:
li a {
position: relative;
display: block;
width: ..;
height: ..;
overflow: hidden;
;}
li a span, li a em {
position: absolute;
left: 0;
display: block;
width: ..;
height: ..;
}
li a span {
/* <span> width, height < height, width <em> */
width: ..;
height: ..;
}
#bu1 a em { background: url('bu1.gif') 0 0 no-repeat; }
#bu2 a em { background: url('bu2.gif') 0 0 no-repeat; }
.. .. ..
#bu1 a:hover em { background-position: .. ..; }
#bu2 a:hover em { background-position: .. ..; }
.. .. ..
Следует отметить плохую отработку :hover в IE, вплоть до отказа менять фон. Единственное, что остаётся — экспериментировать со свойствами ссылок (color, border, etc.)
Также для IE придётся использовать cursor:default или нестандартный cursor:hand.
Ещё один недостаток — пиксельные шрифты, но есть вероятность, что когда-нибудь нам разрешат использовать вектор в background-image и «здесь будет город-сад»:
CSS:
li a {
.. .. ..
font-size: ..em;
width: ..em;
height: ..em;
}
.. .. ..
#bu1 a em { background-image: url('bu1.svg'); }
.. .. ..
PS. Приверженцам семантики и валидности посвящается:
HTML:
<ul>
<li id="bu1" class="here"><a href="#">homepage</a></li>
<li id="bu2"><a href="#">business</a></li>
.. .. ..
</ul>
CSS:
li a:before { .. }
li a { .. }
li a:after { .. }
Исходник в архиве, смотреть Оперой.
Download:
- accmenu.zip, 22 kb
31 декабря 2003
Ссылки по теме:
- Didier Hilhorst: The Art of Navigation
- Douglas Bowman: Making the Absolute, Relative
- Petr Stanicek: Fast rollovers, no preload needed
- W3C, CSS 2.1 Specification: Generated content, automatic numbering, and lists