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

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

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

Есть и другие соображения на этот счет.

Автором trifler.ru этот вопрос затрагивался в публикации "Web-меню на PHP с вложениями", а также в "Клик меню – проблемы и возможные пути решения".

В первом случае, всегда будут присутствовать проблемы интеграции php-меню в конкретный движок и сложности с его настройкой, как минимум придется ставить локальный web-сервер (Denwer), во втором отключенный Java Script делающий навигацию по ресурсы невозможной или затруднительной.

Все выше изложенное и привело к созданию клик-меню на html и css без Java Script.

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

html-код хрестоматийный:

<ul class="nav">
  <li><a href="#" tabindex="1"><em></em>... </a>
    <ul>
      <li><a href="#"><em></em>... </a></li>
      <li><a href="#"><em></em>... </a></li>
    </ul>
  </li>
  <li><a href="#" tabindex="1"><em></em>... </a>
    <ul>
      <li><a href="#"><em></em>... </a></li>
      <li><a href="#"><em></em>... </a></li>
    </ul>
  </li>
</ul>

Скриншоты иллюстрирующие функционал меню:

Стили и пример будут рассмотрены чуть позже.

Интеграция предложенного меню в скрипты Мастера Lasto - nano-CMS и Lasto Blog, возможна, собственно говоря, для них оно и разрабатывалось, что не исключает встраивания клик-меню с вложениями без Java Script и в другие движки.

Этому будет посвящена отдельная статья.