Два года назад местный автор методом "научного тыка" совершенно случайно наткнулся на грязный css hack для IE8, который до сих пор в исключительных случаях приносит неоценимую пользу.

Напомню:

.XXX {color:#a00\0/;}

Указанный цвет увидит только IE8.

А вот с hack'ом для IE7 забавная история приключилась. Хак известный:

*+html.XXX {color:#a00;}

Был по запарке записан так:

*+*.XXX {color:#a00;}

Понятно, разбор полетов ошибку выявил, но стало интересно...

Тупой перебор доступных с клавиатуры знаков привел к такому:

*+*.XXX {color:#a00;}
*~*.XXX {color:#a00;}

IE6, как и полагается сказал "привет" и все поигнорировал :)

Все остальные браузеры последних версий, включая IE7(8,9), скушали предлагаемое на ура.

Введение дополнительного пробела после второй звездочки приводит их в чувство.

Но важно совершенно другое.

Имеем два абсолютно идентичных блока:

html

<div class="hackcss">
 ...
</div>

<div class="hackcss">
 ...
</div>

css к ним

.hackcss {
  border:#00a 1px solid;color:#00a;
  margin:10px auto;padding:7px;width:400px;
}
*+*.hackcss {border:#a00 1px solid;color:#a00;}

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

Как говориться не верь глазам своим...

Продолжаем мини-сериал посвященный псевдоклассу :focus. В первой части рассмотрен частный случай - вывод графики во всплывающем слое при клике на преьюшку.

Воспользуемся описанным там приемом.

html

Вариант для выделенного слова или фразы:

<div class="cliktxt">
Текст...
  <span tabindex="1" title="">слово</span>
Много текста...
  <dl>
    <dt></dt>
    <dd>
      <img src="ХХХ.xxx">
      <p>Поясняющий текст</p>
    </dd>
  </dl>
</div>

Вариант для сноски:

<div class="cliktxt">
Текст...
  <sup tabindex="1" title="">[1]</sup>
Много текста...
  <dl>
    <dt></dt>
    <dd>
      <img src="ХХХ.xxx">
      <p>Поясняющий текст</p>
    </dd>
  </dl>
</div>

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

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

Одной из причин исключение тега <a> из html, является помощь поисковикам, которые любят добиться во все ссылки, даже с пустым url, находящиеся на web-странице, мы же не даем им ни единого шанса куда-то там уйти и возможно уже никогда не вернуться. Не стоит забывать и о странностях "Хитрых контор" :)

css

.cliktxt {margin:15px 25px 15px 20px;padding:0px 0;}
.cliktxt span,.cliktxt sup {color:#a00;cursor:pointer;outline:0;}
.cliktxt span:hover,.cliktxt sup:hover {color:#00a;}
.cliktxt dl {margin:0;padding:0;display:none;}
.cliktxt dl dd {
  background:#ddd;border:#000 1px solid;
  margin:0;padding:7px 4px;width:300px;
  position:fixed;top:1%;left:18%;z-index:100;
}
.cliktxt dl img {
  border:#000 1px solid;float:left;
  margin:7px 8px 0;width:140px;height:auto;
}
.cliktxt dt {
  background:#ccc;border:#000 1px solid;
  opacity:0.2;filter:alpha(opacity=20);z-index:100;
  position:fixed;top:0;right:17%;bottom:0;left:17%;
}
.cliktxt :focus + dl {display:block;}
.cliktxt dd p {font:11px/1.2 arial;margin:0 10px;padding:4px 0;}

В стилях нет ничего особенного, все легко настраивается, плюс полная независимость предлагаемого от любых движков, простейшая интеграция в любой текст, любой web-страницы. Стили загоняются в основной файл css, html хранится под рукой и по мере необходимости выбранный вариант вставляется в тело поста, далее по образцу и подобию в соответствующие места добавляется текст, прописывается путь к графике, если она будет использована, в противном случае удаляется тег <img> и все.

Пример использования со словом находится в третьем абзаце.

Тест страница.

Может быть, это первый и единственный раз в жизни, когда автор 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 с Яндекс'ом показали ему комбинацию из трех пальцев, ничего и близко не предложив по тем ТТХ, которые были озвучены выше, так что "хотелка" его, временно отдыхает :=(