Введение
Слышали ли вы когда либо такое утверждение, что «нельзя сделать динамическое выпадающее меню исключительно на 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, и не используются скрипты (например, написанные на JavaScript).
Что, не верится?
Давайте рассмотрим код:
| Mozilla specific menu! |
Что происходит, почему все работает?
Сразу оговорюсь, что в этой статье я не буду вас учить использованию CSS. Поэтому сразу переходим к рассмотрению принципа работы меню — к псевдоклассу ‘:hover’. Да, это именно класс. Т.е. селектор может наследовать другой селектор, который включает ‘:hover’. В нашем случае ‘A:hover TABLE’ выбирает ‘
| Howto |
| Index |
| About |
Которые являются скрытыми.
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: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’ (вместе с его содержимым и аналогичной структурой) вместо ссылки в родительскую таблицу.
Теперь, когда у вас есть подуровни в меню, вам нужно будет удалить тэги
, чтобы дать меню «нормально выезжать». В дополнение к этому, вам нужно будет сделать несколько копий классов.menuitem и.a с одинаковыми свойствами, но разными именами для каждого подменю.
Да, похоже поработать придется много, НО вы можете просто добавить их селекторы в соответствующую секцию таблицы стилей.
Полное описание того, как это сделать, я сделаю в следующий раз.
А пока что скажу, что это меню вы можете изменить так, как вам захочется, приспособить под себя. И возможностей для этого существует бесконечное множество — ограничить их может только ваша фантазия…
Переключение стилей (Скины)
Если вы хотите добавить скины для вашего меню с возможностью их смены самим пользователем, вам нужно будет добавить дополнительные таблицы стилей и дать им имена с id=’some_name’ (для IE) и с именами name=’some_name’ (для остальных браузеров). Для того, чтобы не применялись оба стиля, вам нужно заблокировать все стили, кроме стилей по умолчанию, путем добавления параметра «disabled» в стиль тэга (причем не имеет значения, связываете ли вы его или используете линейный синтаксис). Mozilla и Opera позволяют переключение поименованных стилей из браузера. Как правило, эти браузеры не применяют все стили, которые определены именем name=»…» и игнорируют id=»…». Также они умеют использовать имя name=’default’ как таблицу стилей по умолчанию и name=’alternate’ в качестве альтернативной таблицы стилей. Вы можете определить имя стиля, которое пользователь будет видеть как свойство title=»…». Например, демонстрационная версия меню на этой странице включает следующие определения: