Динамическое выпадающее меню. Создаем динамичное и анимированное меню
Первым делом следует уточнить, что официально такого термина нет. Вообще же под динамическим меню можно понимать такое меню, содержание которого меняется во время работы пользователя в зависимости от каких-либо внешних обстоятельств.
В данном случае речь идет о предмете, хоть и попадающим под эту расплывчатую формулировку, но более простом и прозаичном. Если меню, как таковому, свойственна динамика (вспомним, что инсталляция программы приводит к изменениям в нем) и имеется даже особо изменчивое меню "Документы", придуманное Microsoft, то я предлагаю поговорить о том, как организовать меню, содержащее именно ваши данные и изменяемое вами в процессе работы.
Выпустив Windows 95, компания Microsoft предприняла попытку перенести акцент с системно-программистских вещиц вроде "файлов" на понятные любому деловому человеку "документы". Для этого была усилена взаимосвязь между типами файлов и настойчиво предложено открывать их двойным щелчком мышки непосредственно по значку документа, а не из запущенного предварительно приложения. Что же, это не новинка и, в принципе, вещь более удобная, чем лазание по дискам в окне "Открыть".
Как приманку компания поставила в меню пункт "Документы", призванный обеспечить ускоренный доступ к последним из открывавшихся файлов. Критике это нововведение уже подвергалось, напомню лишь основные претензии: плохо справляется система с выставлением в меню именно открывавшихся последними документов, меню замусорено, документы не упорядочены и их нельзя структурировать тематически, наконец, они просто не все представлены.
Я раз десять пробовал модернизировать меню "Документы", но особо путного ничего не получилось. Могу предложить другой вариант. Представьте себе, что в системном меню на первом его уровне имеется один или несколько пунктов, открывающих доступ к системе подменю, соответствующей принятому вами разбиению документов на группы (по теме, времени, типу и т.п.), причем в подменю содержатся все находящиеся в вашем распоряжении файлы документов, их состав обновляется по мере создания или удаления, они переводятся из одного меню в другое, автоматически следуя за перемещениями файлов на диске.
Нормальный вариант быстрого доступа, просмотра и поиска документов? Тогда учтите, что реализуется такое динамическое меню проще простого. Надо лишь поместить в соответствующую главному меню директорию на диске ваши рабочие директории. Именно директории с живыми файлами, а не ярлыки. Сделайте это, и вы сразу получите доступ через меню к каждому из хранящихся там документов.
Но чтобы все выглядело тик-так, придется еще повозиться. Надо использовать длинные имена, тогда ваше пользовательское меню с документами получит человеческий вид. Это потребует от вас отказаться от милых сердцу DOS"овских каракатиц наподобие Docs, Doc1 и т.п. Ничего, надо привыкать называть вещи своими именами и забыть про восьмибуквенные подпольные клички.
Над именами придется подумать. Как я уже говорил, количество вложенных директорий не должно превышать 3, ну максимум 4 уровней. Их названия не следует делать слишком пространными, как и имена содержащихся в них документов. Иначе ваше меню будет гулять по экрану сначала слева направо, потом загибаться обратно и снова вперед. Замучаетесь гонять мышку. Избегайте дублирования слов. Если директория и, соответственно, подменю называются "Договоры", то не надо входящие в него документы называть "Договор №139-45 от...". Совершенно очевидно, что это договор, раз он лежит в папке с договорами. Старайтесь также с помощью нескольких слов, отведенных судьбой (или шириной экрана, если вам так больше нравится) на описание документа, отразить его содержание. Номер и дата - сведения прекрасные, но навряд ли вы с ходу вспомните, о чем был этот документ.
Ценой дополнительных усилий можно добиться согласования внутри цепочки, образуемой названиями подменю и конечного документа, падежей, спряжений и прочей нечисти. Глазу приятнее и менее утомительно для вас читать на экране прилично построенные фразы, а не общаться с компьютером на ломаном русском, как с представителем иностранного юридического лица. Например, если документ описывается выражением "Договор за 1996 год об аренде склада на ж.д. станции", то можно составить следующую цепочку меню: "Договор" - "за 1996 год" - "об аренде" - "склада на ж.д. станции". Быть может, кого-то покоробит название файла "склада на ж.д. станции", но с учетом выстраивающейся перед ним цепочки из названий директорий все получается правильно.
У организованного таким способом динамического пользовательского меню есть и недостатки. Во-первых, система не всегда обновляет меню сразу после попадания туда нового файла (удаления имеющегося). Видимо, где-то в лабиринтах многопоточности и многозадачности застревает команда о необходимости освежить меню. Немного неприятно, но случается не так уж часто, а после загрузки машины меню уж точно будет соответствовать тому, что записано на диске. (Это не значит, что я призываю каждый раз в подобных случаях перегружать машину, обычно можно обойтись перечитыванием директории в "Проводнике" по клавише .) Во-вторых, нехорошо хранить свои рабочие файлы внутри директории Windows. Придется вытащить оттуда папку "Главное меню" и следить за ней, как положено беспокоиться о сохранности пользовательской информации - делать резервные копии, очищать от мусора и т.д. Третья неприятность носит психологический характер - первое время уж очень непривычно видеть свои рабочие директории не внутри корневого оглавления диска, а где-то в "Главном меню". Но это проходит - привыкаешь.
Скрытые элементы меню
Еще один способ упростить содержание меню и, следовательно, повысить эффективность его использования - спрятать его часть на время нормальной работы.
В меню Windows 95 полным-полно вещей, которыми при нормальной работе пользоваться не приходится. К ним относятся ярлыки от программ деинсталляции приложений, различные файлы Readme и прочая текстовая информация от производителей, программы регистрации и формы для отправки по электронной почте. Сюда же можно зачислить и утилиты служебного плана, которыми вы пользуетесь только тогда, когда софт начинает хныкать или вести себя подозрительно. Для выполнения ежедневных процедур компьютерной гигиены удобнее всего (и достаточно) прибегнуть к услугам утилиты автоматического выполнения System Agent из комплекта Plus, вместо того чтобы запускать сканирование диска и дефрагментацию вручную. А раз так, то и постоянно держать эти программы в меню нет резона.
Однако не стоит и удалять из меню все, что в данный момент показалось лишним. Например, многие приложения при деинсталляции обращаются как раз к ярлыку Uninstall в меню, а не к самой программе. Бог им судья, но если ярлык удалить, то потом не получится чикнуть обычным путем приложение. Существует к тому же простой и безболезненный способ упростить меню, ничего оттуда не выбрасывая.
В Windows 95, как и в DOS, есть понятие скрытых файлов и директорий. При обычной работе вы не видите их на экране, так как система не показывает те файлы и каталоги, у которых установлен флажок "Скрытый". Флажок этот взводится и сбрасывается в окне свойств файла. Чтобы увидеть такие объекты, надо в "Проводнике" зайти через меню в "Вид"/"Параметры" и включить режим "Отображать все файлы".
Попробуйте сделать так. Ничего не удаляя, соберите в системном меню такую структуру вложенных уровней и пунктов, которая устроит вас при повседневной работе. Всю остальную начинку сделайте скрытой, размечая как отдельные ярлыки и файлы, так и целые директории и устанавливая у них соответствующий атрибут. Делать это лучше в режиме отображения всех типов файлов. Закончив упражнения, переключите режим отображения на нормальный, при котором скрытые файлы не видны, и посмотрите на результаты своего труда.
Если меню стало проще и удобнее, значит вам удалось внести в интерфейс Windows 95 еще одну полезнейшую настройку. Когда же придется заняться ковырянием в системных неполадках (а такое, увы, случается нередко), просто включите в "Проводнике" отображение всех файлов и получите в свое распоряжение полный набор элементов меню.
В принципе, аналогичный подход можно использовать в отношении рабочего стола, содержимое которого связано с папкой C:\Windows\Рабочий стол. Однако для десктопа система хранит не только ярлыки, но и порядок их размещения (он сокрыт в недрах реестра конфигурации), поэтому при переключениях режима отображения у меня на машине система собирала значки в алфавитном порядке. Что меня, естественно, не устроило. Проблему создания нескольких раскладок рабочего стола можно решить, но лучше уже другим путем.
Возможности обустройства меню и рабочего стола в Windows 95 (в отличие от сегодняшней беседы) на описанном далеко не заканчиваются. Новые подходы к оптимизации рабочего места может найти любой пользователь, если выкроит время для экспериментов и попробует несколько нетрадиционно применить стандартные и общеизвестные системные средства из арсенала Microsoft.
Роман Соболенко
Слышали ли вы когда либо такое утверждение, что "нельзя сделать динамическое выпадающее меню исключительно на 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).
Что, не верится?
Давайте рассмотрим код:
<
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;
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 {
}
#moz{
}
#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>click me
TR
>
<
TR
>
<
TD
><
a href
=
#3>Save
TR
>
<
TR
>
<
TD
><
a href
=
#4>Close
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
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
TR
>
<
TR
>
<
TD
><
a href
=
#3>Save
TR
>
<
TR
>
<
TD
><
a href
=
#4>Close
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
TR
>
<
TR
>
<
TD
><
a href
=
"#14"
>
About
A
>
TD
>
TR
>
TABLE
>
A
>
DIV
>
DIV
>
TD
>
TR
>
TABLE
><
BR
>
Что происходит, почему все работает?
Сразу оговорюсь, что в этой статье я не буду вас учить использованию CSS. Поэтому сразу переходим к рассмотрению принципа работы меню - к псевдоклассу ":hover". Да, это именно класс. Т.е. селектор может наследовать другой селектор, который включает ":hover". В нашем случае "A:hover TABLE" выбирает "
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=»…». Например, демонстрационная версия меню на этой странице включает следующие определения: