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

Домашняя страничка хомячка или сайт-визитка, в принципе избавлены от этой проблемы. Десять, двадцать страниц не требуют развитой навигации. Меню, расположенное в предназначенных ему колонках состоящее из 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 и в другие движки.

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

Может быть, это первый и единственный раз в жизни, когда автор Trifler.ru сожалеет о том, что он не является программистом и никогда им уже не станет...

Как-то на досуге, сочинилось вертикальное меню с вложениями, собственно говоря, никаких новшеств в нем нет...

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

html-код без особых излишеств, только то, что необходимо:

<ul class="navphp">
  <li>
   <a href="#" onclick="showPanel('item1'); return false;">
    <em></em>Main </a>
     <ul id="item1">
      <li><a href="#"><em></em>Latest site news </a></li>
      <li><a href="#"><em></em>Home Page </a></li>
     </ul>
  </li>
  <li>
   <a href="#" onclick="showPanel('item2'); return false;">
    <em></em>Computing projects </a>
     <ul id="item2">
      <li><a href="#"><em></em>iTunes server </a></li>
      <li><a href="#"><em></em>Silent Web Server </a></li>
      <li><a href="#"><em></em>Home Theatre PC </a></li>
      <li><a href="#"><em></em>1TB File Server </a></li>
     </ul>
  </li>
  <li>
   <a href="#" onclick="showPanel('item3'); return false;">
    <em></em>CSS </a>
     <ul id="item3">
      <li><a href="#"><em></em>Tables using CSS </a></li>
      <li><a href="#"><em></em>Rounded Corners </a></li>
     </ul>
  </li>
  <li>
   <a href="#" onclick="showPanel('item4'); return false;">
    <em></em>JavaScript </a>
     <ul id="item4">
      <li><a href="#"><em></em>Dynamic expanding menu </a></li>
      <li><a href="#"><em></em>Strict doctype compliance </a></li>
      <li><a href="#"><em></em>Fading slide show </a></li>;
      <li><a href="#"><em></em>Scrolling slide show </a></li>
     </ul>
  </li>
</ul>

Тег <em></em> перед текстом ссылки нужен для прорисовки плюсов/минусов, которые будут дополнительно показывать, что меню свернуто, и его можно развернуть.

Стили:

.navphp {
  border:#000 1px solid;margin:10px auto;
  padding:5px;list-style-type:none;width:200px;
}
.navphp li {margin:3px;}
.navphp a {color:#00f;text-decoration:none;outline:0;}
.navphp a:hover {color:#f00;}
.navphp ul {margin:3px 10px;list-style-type:none;}
.navphp a em {
  border:#00f 1px solid;font-size:9px;
  padding:0 2px;margin-right:5px;
}
.navphp a em:hover {border:#f00 1px solid;}
.navphp a.selected,
.navphp a.selected:hover {color:purple;cursor:text;}
.navphp a.selected em,
.navphp a.selected:hover em {
  border:purple 1px solid;font-size:10px;padding:0 3px;
}
.navphp a em:after {content:'+';}
.navphp a.selected em:after {content:'-';}
#item1,#item2,#item3,#item4 {display:none;}

Класс "selected" при клике на любую ссылку меню, будь то заголовок раздела или ссылка в открытом разделе должен попадать в тег <a> после перезагрузки страницы, он сигнализирует о том, что открыт тот или иной раздел или открылась страница по ссылке в открытом разделе.

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

Строки в таблице стилей выделенные зеленым цветом, подставляют в соответствии с алгоритмом работы меню, плюс или минус в тег <em></em>. Этот трюк не работает в IE6(7), но им следует отдельно прописать соответствующий background-color и задать ширину и высоту для <em></em>.

Понятно, что дело не ограничивается только подстановкой плюсов-минусов, тут есть простор и для иных извращений :)

JavaScript:

function showPanel(id) {
   for (i=1; i < 4+1; i++)
   document.getElementById("item"+i).style.display='none';
   document.getElementById(id).style.display='block';
}

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

Рассмотрим требуемый алгоритм работы меню, скриншоты возможных состояний меню будут хорошей иллюстрацией.

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

Нахождение курсора мыши на любом из них дает понять, что клик по ссылке заголовка к чему-нибудь, да приведет :)

Клик по заголовку любого раздела в нашем случае это раздел "Main", приводит к перезагрузке страницы, подстановке класса "selected" в ссылку и открытию соответствующего раздела меню.

Иллюстрация выше сказанного в предыдущем абзаце.

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

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

Таков вкратце алгоритм работы меню.

Пример им не обладает, да и смешно от столь простого скрипта требовать полноценного функционала.

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

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

Соображение под № 2 особенно важно так, как меню, функционал которого выполнен на JavaScript, обладает существенным недостатком, а именно - для сворачивания разделов меню в таблице стилей практически всегда указан стиль display:none; в нашем случае отмеченное красным цветом в листинге css.

Это-то и препятствует полному разворачиванию меню при отключенном JS, что делает нормальную навигацию по сайту в принципе невозможной.

Может быть, именно поэтому автор ратует за то, что подобного рода меню должно быть выполнено на PHP.

Просуммируем, какими тактико-техническими данными, должно обладать меню в конечном итоге:

• Алгоритмом работы, описанном и проиллюстрированном выше
• Скрипт должен запоминать состояние меню при переходе с одной страницы на другую, показывая пользователю, где и на какой странице тот находится
• Все находится в одном файле - сам скрипт и html-код меню
• Никакого обращения к базам данных любого вида и типа
• Полный листинг меню, а не меню составленное из кусков, подставляемых в нужное время и нужное место, что очень важно для поисковых ботов
• Желательно в html-коде, который будет редактироваться подстановкой необходимых url'ов и прочих атрибутов ручками и только ими, без всякой автоматики, неуместной в данном конкретном случае
• Естественно, должна быть предусмотрена возможность разбивки меню на части, которые можно было бы располагать в разных колонках навигации
• Простая, на уровне "чайника", интеграция в любой php-движок

Вот, собственно и все...

А где практическая реализация меню с указанными характеристиками, спросите вы?

Внимательно читаем первый абзац поста и стало быть, грустим и печалимся вместе :)

* * * * * *

P.S. Мастер Горди, ну очень сильно желал поиметь вот такое меню - игрушку, но знаний и опыта в области программирования у него "полное" отсутствие, а Google с Яндекс'ом показали ему комбинацию из трех пальцев, ничего и близко не предложив по тем ТТХ, которые были озвучены выше, так что "хотелка" его, временно отдыхает :=(

В свое время мной была опубликована разметка центральной части web-страницы с колонками равной высоты.

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

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

В данном случае была предпринята попытка решить проблему 100% высоты предлагаемой разметки, но…

Строка стилевых правил:

  .wrap:after {content:'';clear:both;display:block;}

позволяющая корректно отображать колонки равной высоты в современных браузерах – FireFox, OPERA, Google Chrome и даже в IE7(8), а вот с IE6 нет никаких проблем, препятствует растяжению колонок по высоте.

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

  margin-bottom:-32767px;padding-bottom:32767px;

не представляется возможным.

Что еще можно сделать слегка по извращавшись :)

В представленном примере все колонки оснащены, индивидуальны цветным border’ом. О том, что для этого необходимо, нет смысла расписывать от и до.

С одноцветной окантовкой все несколько упрощается, пример приводиться не будет, это для любителей по практиковаться в тонкостях html и css.