Последнее обновление:
Делаем универсальное выпадающее меню
Полезно для мобильной версии сайта
Что
такое выпадающее меню? Это когда
при работе в браузере человек нажимает на главный пункт и при этом
появляются дополнительные пункты, например, как в этой статье (полностью рабочий пример см. ниже). 
При
активировании кнопки «полезная информация»
последняя окрашивается темно-зеленым цветом и ниже нее образуется
список из «выпавших» пунктов меню (понятно, что эти
пункты в свою очередь, могут содержать в себе дополнительные подпункты
- подменю - и т.д.). Известны реализации технологии выпадающего меню
при помощи javascript, а также на базе CSS (таблиц стилей).
При работе в браузере на обычном компьютере (так называемый десктоп,
ноутбук) одним из событий, которое способно активировать пункт меню,
является наведение мыши. Кстати, раскрытие меню в данном случае вполне
возможно реализовать на чистом CSS, без использования JS. Т.е. как
только указатель мыши попал на область главного пункта меню
(«Полезная информация»), тут же срабатывают стили
CSS и возникает раскрывающийся список (как на примере выше), в котором
можно выбрать подпункты меню, наведя указатель мыши, в свою, очередь,
на один из них. Если указать мыши убрать с соответствующей области
(например, с области «Полезная информация»),
соответственно, выпадающий список исчезнет.
Однако, такой подход неприемлем для устройств с сенсорным экраном (это
- разного рода тачпады). На таких устройствах наведение (например,
пальца) выполняет другие функции, например, служит для перемещения
области по экрану. Активация же пунктов меню таким наведением
невозможна: вместо наведения необходимо нажатие или
«клик».
И вот возникает дилемма: для обычных компьютеров удобным было бы
описанное выше выпадающее меню (кстати, меню такого типа очень широко
применяются вебмастерами на практике). Тогда как на мобильном
устройстве оно попросту не сработает, т.е. пользователь не сможет
открыть выпадающий список и пройтись по пунктам меню. Т.е., по сути,
желательно, чтобы на сайте были реализованы обе технологии для ОДНОГО И
ТОГО ЖЕ МЕНЮ. Как же быть?
Сложные способы состоят в том, например, чтобы одним пользователям
(открывающим страницу сайта с обычных компьютеров –
десктопов) показывать меню, выполненное по первой технологии, т.е.
реагирующее на наведение мыши, а пользователям мобильных устройств
– показывать меню, реагирующее на «клик»
мыши, т.е. на нажатие. Однако это усложняет сайт, равно как и его
администрирование. Да и, на наш взгляд, целесообразно было бы иметь
универсальную технологию, позволяющую работать с меню обоими способами
сразу. Поэтому целесообразно пойти по пути объединения, синтеза.
Итак, в первом случае (для обычных компьютеров) пункт меню реализуется
очень просто – в виде ссылки. Если хотим, чтобы пункт меню
активировался при наведении указателя мыши на любую точку его области 
а не только на саму ссылку 
то необходимо указать соответствующие классы
(об этом пока отложим разговор на будущее). Вообще, надо сказать, что
первый способ гораздо предпочтительнее: пользователь, увидев меню, не
«целясь», двигает мышью и сразу быстро попадает на
одну из точек области его пункта, видя, что этот пункт активировался,
раскрылся выпадающий список и можно продолжать дальше. Тогда как
попасть указателем мыши на ссылку, конечно, посложнее, да и дольше (на
немалую долю секунды). Ибо область ссылки по размеру меньше, чем
область пункта меню. Потом, далеко не всем пользователям доставляет
удовольствие пользоваться сайтом, «целясь» мышью,
пытаясь навести ее на ссылки (профессиональные снайперы не в счет).
Давайте посмотрим, как это меню будет выглядеть на практике
Наведите указатель мыши на меню. Понажимайте левую кнопку мыши - меню должно исчезать, затем - вновь появляться. Затем - отведите указатель - меню должно остаться. Кликните мышью где-нибудь на тексте - меню должно исчезнуть.
Примечание. На самом деле, меню, изображенное здесь, работает немного не так. В частности, при повторном нажатии на кнопку "Полезная информация" меню не раскрывается. Приходится отвести мышь и затем - вновь подводить ее - тогда оно появляется вновь.
Дело в том, что кнопка "Полезная информация" (точнее, блок, соответствующий ей) находится внутри блока, для которого задан обработчик события
onclick="closeMenu('menu_polezn_inf');return(true)",
предназначенный для скрытия всплывающего меню при клике на основной области страницы. Т.е. вначале срабатывает событие onClick=openMenu для кнопки "Полезная информация", а затем - событие onClick=closeMenu для основной области: ведь кнопка-то размещена внутри нее. Поэтому для корректной работы меню следует или разместить его ВНЕ основной области страницы (например, слева или справа), или же реализовать перехват событие OnClick: т.е. чтобы при нажатии на кнопку "Полезная информация" срабатывал только обработчик для нее, но не для всех других блоков div, которые содержат эту кнопку (по отношению к которым она является вложенной).
Ссылка простого пункта выпадающего меню может иметь, например, такой
вид:
<a
href="#"> <br>Полезная информация</a>
Вместо символа "#"
можно вставить
URL (адрес) ссылки, например,
http://www.dissertacii-diplom-ufa.ru
Однако, чтобы пункт меню срабатывал не только
при наведении мыши, но и при нажатии на него, данную ссылку необходимо
немного модифицировать, добавив туда код JS. Дело в том, что на данный
момент технологии CSS еще не содержат возможностей реагировать на
«клик», т.е. на нажатие мышью по определенной
области (есть большая доля уверенности, что в будущем этот недостаток
будет, конечно же, преодолен; но пока что – на нет
– и суда нет).
Кроме того, чтобы облегчить пользователю просмотр сайта и использование
меню, как уже говорилось, целесообразно сделать, чтобы весь пункт меню
(в данном случае содержащий фразу «Полезная
информация») являлся ссылкой, а не только сама эта надпись.
Наконец, хотелось бы, чтобы раскрывающийся список, будучи открытым, не
закрывался бы сам по себе при отведении от него мыши (при работе на
обычном компьютере). Наконец, должен существовать легкий способ убрать
раскрывающийся список, если он пользователю более не нужен.
Итак, вот что получается:
<a style="font-weight: bold"
class="указываем классы"
href="#" title="Всплывающее сообщение при
наведении на область пункта меню" onclick="openMenu('menu_polezn_inf');return(false)"
onmouseover="openMenu11('menu_polezn_inf');return(false)">Полезная
<br>информация</a>
Параметр style
определяет стиль надписи на
пункте меню. Понятно, что его можно было бы определить в файле стилей
.css, путем объявления соответствующего класса или идентификатора id.
Параметр class
содержит перечень классов, которые превращают весь пункт
раскрывающегося меню в ссылку; кроме того, они содержат правила CSS для
оформления внешнего вида пунктов. Например, как Вы можете видеть на
нашем сайте, внутренний фон неактивных пунктов всплывающего меню
является серым, тогда как активный пункт (за исключением главных,
например, самого нижнего, со словом «Полезная
информация») подсвечивается ярко-желтым цветом
(а то, честно говоря, немного напрягают сайты, на которых не поймешь – то
ли активен пункт меню, то ли нет). Форма пунктов меню выполнена в виде
прямоугольников с закруглениями (но, возможно, Вам понравится иной
дизайн).
Onclick
– это обработчик события нажатия или
«клика» на пункт меню (точнее, на ссылку, которой
он является). Этот обработчик вызывает функцию openMenu() с
параметром
menu_polezn_inf
, который представляет собой не что иное, как значение
id,
содержащееся в элементе ul
меню. Т.е. последний имеет следующий вид:
<ul id="menu_polezn_inf">
Таким
образом, при возникновении события нажатия на пункт меню функция
openMenu(),
считывая имя параметра id,
выполняет
функцию его раскрытия,
после чего формируется раскрывающийся список.
Событие onmouseover возникает, когда указатель мыши появляется в
области ссылки (которой в данном случае является пункт меню
«Полезная информация»). Это событие вызывает
выполнение функции openMenu11()
с тем же самым параметром
menu_polezn_inf.
Эта функция, как и openMenu11(),
предназначена для
открытия или, наоборот, закрытия выпадающего списка. Вот JS-скрипт,
содержащие коды этих функций:
<script
type="text/javascript">
function
openMenu(id1)
{if
(document.getElementById(id1).style.display == "block")
{document.getElementById(id1).style.display
= "none";}
else{document.getElementById(id1).style.display
=
"block";}}
function
openMenu11(id1)
{document.getElementById(id1).style.display = "block";}
function
closeMenu(id2)
{if
(document.getElementById(id2).style.display == "block")
{document.getElementById(id2).style.display
= "none";}
else{document.getElementById(id2).style.display
=
"none";}
}
</script>
Как
видно, если элемент документа html (в данном случае элемент ul),
определяемый идентификатором id1,
отображается на экране (т.е. ему
присвоено свойство display,
равное "block"),
то функция openMenu()
делает его неотображаемым, присваивая ему значение "none".
В противоположном случае (т.е. если элемент не отображался) она
присваивает ему значение "block",
после чего элемент становится виден
на экране.
Функция openMenu11()
вызывает отображение на экране элемента, имеющего
идентификатор id1,
независимо от того, был ли он отображен на экране до
этого или нет.
Кроме того, описана также функция closeMenu().
Она делает
неотображаемым блок меню с идентификатором id2, неважно,
отображался ли
он на экране до этого или нет.
В обеих функциях имеется свойство return(false)