Динамическое выпадающие меню для IE без использования скриптов JavaScript

Введение

Слышали ли вы когда либо такое утверждение, что "нельзя сделать динамическое выпадающее меню исключительно на CSS для IE"? Уверен, что да. И что, вы-таки верите этому? Правильно, лучше не верьте.

Цель, которой мы хотим достичь в этой статье

Цель данной статьи - сделать выпадающее меню для IE, сделанное исключительно на CSS. Начав с этой постановки, я расширил задачу до того, чтобы заставить работать такое меню в других наиболее известных браузерах (прим. пер.: из комментариев выясняется, что этими браузерами являются Opera 7.x и последние версии Firefox).

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

Каким мы представляем уровень читателя.

Вообще-то я думал о том, чтобы пометить эту статью как для "углубленного изучения (advanced)". Но я уверен, что даже не самые опытные разработчики хорошо поймут то, что написано в статье. Короче, читатель просто обязан знать основы CSS и HTML.

Чем это меню отличается от всех других?

Я долго искал в сети меню, которые были бы сделаны на CSS, но не нашел ни одного решения, которое бы работало без глюков в IE. Однако же я нашел много интересных идей, которые и привели меня к тому результату, который будет здесь описан. Да, мой код тоже не совершенен, но у меня попросту нет времени, чтобы выправить все ошибки. Самое интересное альтернативное решение из всех, что я видел (которые используют CSS), основано на использовании псевдокласса hover для элементов LI. А я-то никогда и не думал, что такое возможно, впрочем, как и не думал о том, что вообще возможно сделать выпадающее меню для IE без скриптов...

Основным отличием между моим и другими меню является то, что мое работает в IE. Все решения, которые я видел, используют элемент LI как основной элемент для псевдокласса :hover, однако Microsoft решила, что этот псевдокласс может быть использован только для элемента A. Большинство сайтов делают оговорку, что их меню работают только в браузерах Opera 7.x или Mozilla. Но ведь эти браузеры используются только пятью процентами пользователей! Да, такие меню хороши в этих браузерах, но к сожалению не могут быть видны в большинстве самых распространенных браузеров. Сейчас мы исправим это недоразумение.

Что же, начнем, что ли...

Что такое меню на CSS?

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

Что такое меню, сделанное с помощью только CSS?

Это динамическое меню, для создания которого используется только CSS, и не используются скрипты (например, написанные на JavaScript).

Что, не верится?

Давайте рассмотрим код:

<STYLE type=text/css id="default" title="default" name="default">

*::-moz-any-link br,*:-moz-any-link br { 
/*a workarround for mozilla*/
display:none;
}
div#menu * {
  cursor: pointer; /*because IE displays the text cursor 
if the link is inactive*/
}
.disabled {
   color: red !important;
   background: none !important;
}
div#menu {
   background: #F5F5DC;
   font: 10px Verdana, sans-serif;
   height: 15px;
   white-space: nowrap;
   width: 100%;
}

div#menu .a {
   background: #F5F5DC;
   border: 1px solid #F5F5DC;
   color: #000000;
   text-decoration: none;
}

div#menu .a table {
   display: block;
   font: 10px Verdana, sans-serif;
   white-space: nowrap;
}

div#menu table, div#menu table a {
   display: none;
}

div#menu .a:hover, div#menu div.menuitem:hover {
   background: #7DA6EE;
   border: 1px solid #000080;
   color: #0000FF;
   margin-right:-1px; /*resolves a problem with Opera 
not displaying the right border*/
}

div#menu .a:hover table, div#menu div.menuitem:hover table{
   background: #FFFFFF;
   border: 1px solid #708090;
   display: block;
   position: absolute;
   white-space: nowrap;
}

div#menu .a:hover table a, div#menu div.menuitem:hover table a {
   border-left: 10px solid #708090;
   border-right: 1px solid white; /*resolves a jump problem*/
   color: #000000;
   display: block;
   padding: 1px 12px;
   text-decoration: none;
   white-space: nowrap;
   z-index: 1000;
   
}

div#menu .a:hover table a:hover, div#menu div.menuitem:hover table a:hover {
   background: #7DA6EE;
   border: 1px solid #000000;
   border-left: 10px solid #000000;
   color: #000000;
   display: block;
   padding: 0px 12px;
   text-decoration: none;
   z-index: 1000;
}

td {
   border-width: 0px;
   padding: 0px 0px 0px 0px;
}
.menuitem {
   float: left;
   margin: 1px 1px 1px 1px;
   padding: 1px 1px 1px 1px;
}

.menuitem * {
   padding: 0px 0px 0px 0px;
}
#other {
  height: auto;visibility: visible;
}
#moz{
  height: 1px;visibility: hidden;
}
#moz::-moz-cell-content{
  height: auto; visibility: visible;
}
#other::-moz-cell-content{
  height: 1px; visibility: hidden;
}
#holder {
  width: 100%;
}

</STYLE>

<TABLE id=holder>
    <TR>
        <TD id="other">
            <DIV id="menu">
                <DIV class="menuitem">
                    <a class="a" href='#'>File<BR>
                    <TABLE>
                        <TR>
                            <TD><a href=#2>Open ili op dulgo</A></TD>
                        </TR>
                        <TR>
                            <TD><a href=#3>Save</A></TD>
                        </TR>
                        <TR>
                            <TD><a href=#4>Close</A></TD>
                        </TR>
                    </TABLE>
                </DIV>
                <DIV class="menuitem">
                    <A class="a" href="#11">Help<BR>
                    <TABLE>
                        <TR>
                            <TD><a class="disabled">..</A></TD>
                        </TR>
                        <TR>
                            <TD><a href=#13>Index</A></TD>
                        </TR>
                        <TR>
                            <TD><a href="#14">About</A></TD>
                        </TR>
                    </TABLE>
                </DIV>
            </DIV>
        </TD>
    </TR>
    <TR>
        <TD id="moz"> Mozilla specific menu!
            <DIV id="menu">
                <DIV class="menuitem">
                    <a class="a" href='#'>Filezilla</A>
                    <TABLE>
                        <TR>
                            <TD><a href=#2>Open</A></TD>
                        </TR>
                        <TR>
                            <TD><a href=#3>Save</A></TD>
                        </TR>
                        <TR>
                            <TD><a href=#4>Close</A></TD>
                        </TR>
                    </TABLE>
                    </a>
                </DIV>
                <DIV class="menuitem">
                    <A class="a" href="#11">Helpzilla</A>
                    <TABLE>
                        <TR>
                            <TD><a class="disabled">..</A></TD>
                        </TR>
                        <TR>
                            <TD><a href=#13>Index</A></TD>
                        </TR>
                        <TR>
                            <TD><a href="#14">About</A></TD>
                        </TR>
                    </TABLE>
                    </A>
                </DIV>
            </DIV>
        </TD>
    </TR>
</TABLE><BR>

Сразу оговорюсь, что в этой статье я не буду вас учить использованию CSS. Поэтому сразу переходим к рассмотрению принципа работы меню - к псевдоклассу ':hover'. Да, это именно класс. Т.е. селектор может наследовать другой селектор, который включает ':hover'. В нашем случае 'A:hover TABLE' выбирает '<TABLE> в элементе <A>, на который наводится указатель мыши. Далее следует трюк с таблицей, свойство "display" которой равняется "none" (т.е. она невидима). Таблица находится между тэгами якорей (<A>,</A>). По словам Microsoft, это может вызвать неадекватную реакцию IE, но я ничего такого не заметил.

Почему мы используем таблицу? А потому, что что она очень хорошо разделяет вложенные якоря, которые мы хотим задействовать из основного якоря. Такое решение не работает в Mozilla 0.7 и даже с помощью JavaScript я еще не нашел способа реализовать это. Прямое вложение якорей не допускается Microsoft, поэтому элемент table - это своеобразный хак для IE. И, насколько я знаю, только таблицы позволяют таким образом "провести" IE.

Итак, что у нас тут имеется? 2 таблицы с якорями внутри якорей.

        <A class="a" href="#11" >Help<BR>
        <TABLE cellpadding="0" cellspacing="0" border="0">
            <TR>
                <TD><a href="#12">Howto</A></TD>
            </TR>
            <TR>
                <TD><a href="#13">Index</A></TD>
            </TR>
            <TR>
                <TD><a href="#14">About</A></TD>
            </TR>
        </TABLE></A>

Которые являются скрытыми.

div#menu .a table {
   display: none;
   z-index:-1;
}

Браузер показывает содержимое якоря при наведении указателя мыши и применяет в этом случае соответствующий стиль:

• Для текста ссылки используется:

div#menu .a:hover {
   background: #7DA6EE;
   border: 1px solid black;
   color: black;z-index:0;
}

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

div#menu .a:hover table{
   background: White;
   display: block;
   position: absolute;
   width: 125px;z-index: 0;
   border: 1px solid #708090;

}

• Для ссылок внутри подменю:

div#menu .a:hover table a {
   display: block;
   color: Black;
   text-decoration: none;
   padding: 1px 12px;z-index:1000;
}

Если мы наводим указатель на одну из ссылок в подменю, браузер применяет следующий стиль:

• Для ссылок внутри подменю:

div#menu .a:hover table a:hover {
   display: block;
   background: #7DA6EE;
   color: black;
   text-decoration: none;
   padding: 0px 11px;
   border: 1px solid black;z-index:1000;
   visibility: visible;
}

• Стиль ссылок в выпадающем меню:

div#menu .a:hover table a {
   display: block;
   color: Black;
   text-decoration: none;
   padding: 1px 12px;z-index:1000;
}

Возможно, вы заметили, что я испольщовал несколько свойств 'z-index' для некоторых элементов. Они являются хаками для некоторых проблем, которые я нашел при тестировании меню.

Усовершенствования

Для того, чтобы добавить подуровни в выпадающее меню нужно просто вставить еще один элемент div '.menuitem' (вместе с его содержимым и аналогичной структурой) вместо ссылки в родительскую таблицу. Теперь, когда у вас есть подуровни в меню, вам нужно будет удалить тэги <BR>, чтобы дать меню "нормально выезжать". В дополнение к этому, вам нужно будет сделать несколько копий классов .menuitem и .a с одинаковыми свойствами, но разными именами для каждого подменю. Да, похоже поработать придется много, НО вы можете просто добавить их селекторы в соответствующую секцию таблицы стилей.

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

Переключение стилей (Скины)

Если вы хотите добавить скины для вашего меню с возможностью их смены самим пользователем, вам нужно будет добавить дополнительные таблицы стилей и дать им имена с id='some_name' (для IE) и с именами name='some_name' (для остальных браузеров). Для того, чтобы не применялись оба стиля, вам нужно заблокировать все стили, кроме стилей по умолчанию, путем добавления параметра "disabled" в стиль тэга (причем не имеет значения, связываете ли вы его или используете линейный синтаксис). Mozilla и Opera позволяют переключение поименованных стилей из браузера. Как правило, эти браузеры не применяют все стили, которые определены именем name="..." и игнорируют id="...". Также они умеют использовать имя name='default' как таблицу стилей по умолчанию и name='alternate' в качестве альтернативной таблицы стилей. Вы можете определить имя стиля, которое пользователь будет видеть как свойство title="...". Например, демонстрационная версия меню на этой странице включает следующие определения:

<STYLE type=text/css id="alternate" title="Blue" name="alternate" disabled>
...<STYLE>

<STYLE type=text/css id="default" title="Default" name="default">
...<STYLE>

Обратите внимание на порядок присвоения имен, я настойчиво рекомендую строго ему следовать.

IE не имеет встроенного переключения стилей CSS, поэтому нам придется его сделать самим (тут уже не без использования JavaScript):

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

• Стиль по умолчанию
• Голубой
• Без стилей

Это делается так:

<ul>
  <li onclick="document.styleSheets('default').disabled=false; 
          document.styleSheets('alternate').disabled=true;">
  <a>Default</a>
  </li>
  <li onclick="document.styleSheets('alternate').disabled=false; 
            document.styleSheets('default').disabled=true;">
  <a>Blue</a>
  </li>
  <li onclick="document.styleSheets('alternate').disabled=true; 
          document.styleSheets('default').disabled=true;">
  <a>No Stylesheet</a>
  </li>
</ul>

Предупреждение! Это просто маленький пример! Перезагрузка страницы сбросит значения по умолчанию для таблиц стилей. Поэтому для реальных целей необходимо использовать cookies или серверные скрипты для того, чтобы запоминать выбор пользователя, что опять-таки не является предметом рассмотрения данной статьи. Добавлю только, что приведенный выше код будет работать только в IE.

Заключение

Я советую всем использовать меню на основе CSS на ваших сайтах (и в веб-приложениях), потому что таким образом можно избежать многих проблем, которые появляются при использовании меню на основе JavaScript. Такие проблемы, как правило, возникают при неправильной обработке событий в IE. Более того, в некоторых браузерах имеется возможность отключения скриптов, и уж тем более многие браузеры не поддерживают JS от Microsoft.

Если же браузер не поддерживает CSS, то он по крайней мере будет отображать все ссылки.

Так называемая "проблема Mozilla-ы" - ссылки внутри подменю не работают. Т.е. невозможно открыть их в том же окне (но они работают при совместном нажатии Shift+нажатие - в новое). Описание проблемы смотрите в разделе "ошибки".

Известные ошибки

По умолчанию ссылки в подменю не работают в Mozilla. Но я нашел более-менее приемлемое решение этой ошибки. Оно основано на вставке специального меню, опять-таки без использования скриптов. Просмотрите внимательно те места кода, где упоминается Mozilla (или 'moz'). Вы увидите, что HTML разделы не имеют вложенных якорей (последний тэг помещен туда, где он и должен находиться). В первой части CSS я использую недокументированные селекторы - это специальные селекторы для Mozilla, и добавляю селектор :hover для тех элементов div, которые поддерживаются Mozilla. И все равно после этого поведение остается не совсем корректным.

В комментариях есть замечание (от Nick Young), что меню не работает в Netscape. Я уверен, что проблема там в том же, что и в Mozilla. Надо искать дополнительную информацию об этом. Решение возможно потребует некоторых изменений, потому что альтернативный код должен нормально работать и в Netscape.

Замечания:

Страница была протестирована в IE версий 5, 5.5, 6, в Opera 7.23 и Mozilla 0.71. Скорее всего, меню будет работать и в более ранних версиях указанных браузеров.

(c) codeproject.com, перевод на русский специально для Realcoding.NET