« prev | all

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:

31 декабря 2003

Ссылки по теме:

« prev | all