Оформление заголовков web-меню в частности древо меню, не самый простой вопрос, как это может показаться на первый взгляд. Многие верстальщики не уделяют этому моменту должного внимания, в полной мере это относится к многочисленным и разнообразным меню с вложениями.

В старые добрые времена, простое линейное web-меню по html-коду могло выглядеть приблизительно так:

<ul>
  <li>Раздел 1</li>
  <li><a href="#">Ссылка 1</a></li>
  ...
  <li><a href="#">Ссылка N</a></li>
  <li>Раздел 2</li>
  <li><a href="#">Ссылка 1</a></li>
  ...
  <li><a href="#">Ссылка N</a></li>
</ul>

Стилями выделяем заголовки и ссылки:

li {font:bold XXpx Arial;}
a {font:XXpx Verdana;}

Ничем не сложнее все и для древо-меню:

<ul>
  <li>Раздел 1</li>
  <li><a href="#">Ссылка 1</a>
    <ul>
      <li>Раздел 1.1</li>
      <li><a href="#">Ссылка 1</a></li>
      ...
      <li><a href="#">Ссылка N</a></li>
    </ul>
  </li>
  <li><a href="#">Ссылка N</a></li>
  <li>Раздел 2</li>
  <li><a href="#">Ссылка 1</a></li>
  ...
  <li><a href="#">Ссылка N</a></li>
</ul>

При помощи наследования можно задать разный стиль для раздела и подраздела:

a {font:XXpx Verdana;}
li {color:#XXX;font:bold XXpx Arial;}
li li {color:#YYY;font:bold XXpx Arial;}

В более сложном случае:

отказ от графики, требует введения дополнительного html-кода.

С другой стороны в меню представленном на скриншоте четко прослеживается иерархия заголовков разделов и подразделов, а перевод простого древо меню в меню с вложениями на JavaScript, избавляет от необходимости использовать для этих целей классы, которым надо выдумывать имена.

Ограничения

Так, как структура меню круто замешана на относительном позиционировании, то это накладывает несколько ограничений:

• В любом разделе или подразделе последней должна стоять простая ссылка
• Не допустим перенос на вторую строку

Скриншот демострирует к чему может привести невыполнение этих условий:

Выделение цветом уровней вложений меню и соответствующих линий в реальном проекте, может оказаться излишним, сделано с целью показать, что это возможно и помогает на стадии тестирования.

Пример

В современном web-дизайне без графики обойтись практически невозможно, можно спорить лишь о том, в каких количествах и насколько оправданно ее наличие или отсутствие в пределах того или иного ресурса.

Многие web-мастера загоняют мелкие графические элементы в один графический файл - так называемый спрайт и далее позиционируют его в нужное место, тем самым, уменьшая количество запросов к серверу, что положительно сказывается на скорости загрузки web-страницы.

Рассмотрим частный случай на конкретном примере.

Имеем 14 картинок каждая, из которых в реальном проекте является кликабельной и ведет по прописанному ей линку в соответствующее место.

Если пойти стандартным путем, то html-код и стили могут выглядеть примерно так:

<div class="zzz">
  <a href="#" class="x"></a>
  ...
  <a href="#" class="xn"></a> 
</div>

.x {background:url(...) no-repeat YYpx XXpx;}
...
.xn {background:url(...) no-repeat YYpx XXpx;}

Как мы видим, чтобы отпозиционировать часть спрайта в нужное место необходимо указать не только класс ссылке, но и в стилях прописывать этому классу, помимо всего прочего, позицию нужной картинке, к тому же подбор сдвига по горизонтали, дело весьма утомительное.

Но можно обойтись более простым способом.

html-код практически остается без изменений, следует только удалить из тегов «a» ставшие абсолютно не нужными классы.

Стили тогда приобретут следующий вид:

.zzz {
  background:url(...) no-repeat YYpx XXpx;
  margin:5px auto;width:XXpx;height:XXpx;
}
.zzz a {
  margin-left:XXpx;position:relative;
  top:XXpx;width:XXpx;height:XXpx;
}

Для смещения ссылки по горизонтали и вертикали достаточно использовать margin-left и отностильное позиционирование, нужные параметры выделены цветом.

Чтобы добиться максимальной точности совпадения кликабельной области ссылки и индивидуальной картинки, временно добавляем в стили для ссылки верхний и нижий border.

При сравнении двух вариантов, второй выглядит более предпочтительным, что и было использовано в очередном апгрейде Lasto Blog для переводчика Google и «Хомячкового рая».

Присутствие графики на сайте, на взгляд автора, должно быть минимальным. Вне всякого сомнения, графическое оформление ресурса несет в себе определенную задачу, но оно не должно преобладать и становиться главным, где контенту невольно отводится второстепенная роль.

Не являются исключением и элементы навигации по сайту.

Для многостраничных ресурсов необходима тщательно проработанная и структурированная система навигации, часто для этих целей используется так называемое древо меню.

ScreenShot

HTML

CSS

CSS IE6(7)

<ul class="menu">
 <li><em>+</em>...
  <ul>
   <li><a href="#"><em>+</em>... </a></li>
   <li class="top"><span><span><em>+</em>...</span></span>
    <ul>
     <li><a href="#"><em>+</em>... </a></li>
     <li class="top"><span><span><em>+</em>...</span></span>
      <ul>
       <li><a href="#"><em>+</em>... </a></li>
       <li><a href="#"><em>+</em>... </a></li>
       <li><a href="#"><em>+</em>... </a></li>
      </ul>
     </li>
     <li><a href="#"><em>+</em>... </a></li>
    </ul>
   </li>
   <li><a href="#"><em>+</em>... </a></li>
   <li><a href="#"><em>+</em>... </a></li>
  </ul>
 </li>
 <li><a href="#"><em>+</em>... </a></li>
 <li><a href="#"><em>+</em>... </a></li>
</ul>

.menu {
  border:#000 1px solid;margin:5px auto;
  padding:5px;overflow:hidden;width:200px;
}
.menu a {
  background:#fff;color:#000;display:block;
  font:11px Verdana;text-decoration:none;
}
.menu li {
  color:#905;cursor:pointer;font:11px Verdana;
  margin:1px 0 0;padding:1px 0 0;list-style:none;
}
.menu li a {position:relative;top:0;left:0;}
.menu li ul {
  border-left:#000 1px solid;margin:0 0 4px;padding:0;
  position:relative;top:-3px;left:6px;
}
.menu ul li {border-bottom:#000 1px solid;}
.menu ul li span {
  border-bottom:#000 1px solid;
  display:block;position:relative;left:-5px;
}
.menu ul li span span {
  background:#fff;border:none;color:#559;
  display:block;position:relative;top:6px;left:5px;
}
.menu ul ul li span span {color:#0aa;}
.menu .top {border:none;position:relative;left:5px;}
.menu li ul ul {margin:0 0 4px;position:relative;top:2px;left:6px;}
.menu ul a {background:#fff;position:relative;top:6px;left:5px;}
.menu a:hover {color:#00f;}
.menu em {
  background:#fff;border:#000 1px solid;color:#000;
  font:normal 9px Verdana;margin-right:3px;
  padding:0 2px;position:relative;z-index:10;
}
.menu ul a em {border:#000 1px solid;}
.menu ul a:hover em {border:#00f 1px solid;color:#00f;}

*html .menu a {zoom:1;}
*html .menu li {margin:-3px 0 0;padding:0;}
*html .menu li ul {margin-bottom:4px;width:180px;}
*html .menu li ul ul {margin-bottom:10px;top:5px;width:160px;}
*html .menu ul a {margin:3px 0 0;}
*html .menu ul li span {margin:2px 0 0;}
*html .menu ul li span span {top:7px;}
*html .menu ul em,*html .menu ul ul em {zoom:1;}
*+html .menu a {zoom:1;}
*+html .menu li {margin:-3px 0 0;padding:0;}
*+html .menu li ul {margin-bottom:4px;width:180px;}
*+html .menu li ul ul {margin-bottom:10px;top:5px;width:160px;}
*+html .menu ul a {margin:3px 0 0;}
*+html .menu ul li span {margin:2px 0 0;}
*+html .menu ul li span span {top:7px;}
*+html .menu ul em,*+html .menu ul ul em {zoom:1;}

Подобного рода меню с элементами графики имеют два бросающихся в глаза недостатка:

• Для разных ресурсов требуется полная переработка графики или хотя бы изменение цвета в соответствующем редакторе, на что уходит дополнительное время, а иной размер оной приводит к редактированию стилей
• При отключенной графике, что бывает довольно часто, вся красота, заложенная в меню, исчезает безвозвратно

Меню на чистом html и css в этом смысле более лояльно - минимальная правка стилей связанная с заменой одного цвета на другой не должна вызывать не преодолимых проблем.

Естественно, для реализации поставленных задач требуется введение дополнительного html-кода.

Смена плюса на минус при наведении курсора мыши на заголовок раздела или текст ссылки и другие прибамбасы, как это сделано, к примеру, в вертикальном меню блога, не представляет никаких трудностей, в продолжении, которое надеюсь, не заставит себя долго ждать, этому будет уделено соответствующее внимание.

Перевод древо меню в меню с вложениями на JavaScript, в рамках данного поста, не рассматривается, эта тема достойна отдельной публикации.

Не без ложки дегтя :(

Текст заголовков разделов и ссылок не должен иметь переноса, другими словами, все только в одну строку.

Стили для IE6(7) дублируют друг друга, возможно, в этом случае где-то, что-то можно подсократить и вынести их в условные комментарии для пущей важности, а можно оставить, так как есть :)