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

Так вот...

Был откопан и вытащен из не бытия на свет божий, старенький скрипт клик-меню с cookie на один уровень вложения, настолько древний, что куки не работают в Google Chrome и OPERA, которых видимо тогда и в проекте еще не было. За давностью времен первоисточник безвозвратно утерян, но по большому счету это не так уж и не важно, для экспериментов с визуальным оформлением меню он подходит не хуже монстров на jQuery.

Дело в другом.

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

Для начала азы:

• a:link – не посещенная ссылка
• a:hover - ссылка при наведении курсора мыши
• a:active - ссылка, на которой сделан клик
• a:visited - посещенная ссылка

Порядок действия над ссылкой следующий:

• сначала ссылка не посещенная – link
• затем мышь наводится на ссылку – hover
• далее производится клик на ссылку – active
• теперь ссылка посещенная – visited

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

Стоит отметить, что ссылка является объектом одного из псевдоклассов и при последовательном исполнении запоминается последнее значение, т.е. в случае если последним указан a:visited, то посещенная ссылка будет иметь оформление оного и уже не сможет получить значение a:hover и a:active.

Но это не главное...

В традиционном меню имеющем html-код:

<ul class="menu">
  <li><a href="#">Пункт № 1 </a></li>
  <li><a href="#">Пункт № 2 </a></li>
  <li><a href="#">Пункт № 3 </a></li>
</ul>

и не менее стандартные стили:

.menu a {color:#000;text-decoration:none;outline:0;}
.menu a:hover {color:#00f;}

оказывается, можно вполне обойтись без, казалось бы, обязательного упоминания а:

.menu a {color:#000;text-decoration:none;outline:0;}
.menu :hover {color:#00f;}

Само собой последние стили работают только во вменяемых браузерах начиная с IE8+.

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

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

Оформление заголовков 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 и «Хомячкового рая».