Последнее обновление: 3 Января 2022 г.

Делаем универсальное выпадающее меню

Полезно для мобильной версии сайта Что такое выпадающее меню? Это когда при работе в браузере человек нажимает на главный пункт и при этом появляются дополнительные пункты, например, как в этой статье (полностью рабочий пример см. ниже). 

При активировании кнопки «полезная информация» последняя окрашивается темно-зеленым цветом и ниже нее образуется список из «выпавших» пунктов меню (понятно, что эти пункты в свою очередь, могут содержать в себе дополнительные подпункты - подменю - и т.д.). Известны реализации технологии выпадающего меню при помощи 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). Оно необходимо для того, чтобы предотвратить переход по ссылке после срабатывания события (onclick или onmouseover). Если бы тег, в котором приписывались указанные события, не был ссылкой (<a>…</a>), то return(false) можно было бы опустить.

Таким образом, при наведении указателя мыши на область пункта меню реализуется событие onmouseover и вызывается функция openMenu11(), а при нажатии на этот пункт меню реализуется событие onclick и вызывается функция openMenu().

Обычный ПК (ноутбук)

Если пользователь работает на обычном ПК (или ноутбуке), то вначале реализуется событие onmouseover (ибо вначале мышь наводится на элемент, и только потом нажимается). Следовательно, как только указатель мыши попадет на область соответствующего меню, вначале будет вызвана функция openMenu11(), которая выполнит раскрытие списка меню. Этот список появится на экране. Пользователь сможет пройтись по списку, выбрать интересующий его пункт меню.

Если же он не желает просматривать раскрывающийся список меню, т.е. захочет его скрыть, это будет несложно сделать, причем здесь поможет интуиция: надо будет всего лишь нажать («кликнуть») на пункт меню левой кнопкой мыши. Вот тогда-то и сработает событие onclick, вызвав функцию openMenu(). Которая, проверив, что меню находится в состоянии "block" (т.е. отображается на экране), изменит его на "none", сделав неотображаемым. Повторный «клик» на пункте меню вновь вызовет функцию openMenu(), которая изменит состояние меню на "block", т.е. раскрывшийся список вновь появится на экране. Таким образом, очередное нажатие мыши на пункте меню будет то отображать, то скрывать раскрывающийся список, каждый раз вызывая функцию openMenu(), играющую роль переключателя.

Если при этом увести мышь от меню, оно останется в том же самом виде. Т.е. если было отображаемым, значит и останется отображаемым (последнее удобно для пользователя: отведя мышь от меню, он, тем не менее, сможет обозревать раскрывшийся список). Если было неотображаемым, значит не будет отображаться и при отводе от него указателя мыши.

При повторном наведении мыши на пункт меню вновь сработает событие onmouseover, появится раскрывающийся список и т.д.

Мобильное устройство

Если же пользователь просматривает страницу сайта с мобильного устройства, то, в силу отсутствия возможности реализации события наведения мыши, onmouseover срабатывать не будет. Но при прикосновении к пункту меню будет реализовано событие onclick. В результате сработает функция openMenu(), которая откроет раскрывающийся список (как это делается – см. выше). Повторное нажатие на пункт меню, как и при просмотре с обычного компьютера, скроет этот список.

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

Этот JS скрипт может расположен в любом месте страницы, например, внизу. Кстати, если у пользователя в браузере будут отключен javascript, то на обычном компьютере останется возможность посмотреть раскрывающееся меню – путем наведения мыши: дело в том, что сработают свойства элемента «Полезная информация» (элемент <ul>). Правда, при отведении мыши раскрывающийся список будет исчезать. Но, как говорится, на безрыбье – и рак рыба (в конце концов, пользователь имеет возможность подключить javascript, что предусматривается по умолчанию в большинстве браузеров). А вот на мобильных устройствах в случае отключения javascript раскрыть меню не удастся.

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

Для этого можно воспользоваться следующим JS скриптом:

<div class="классы" onclick="closeMenu('menu_polezn_inf');return(true)">

В качестве классов в блоке div задаются правила оформления соответствующей части страницы (той, которая содержится в этом блоке). Кроме того, в описании блока содержится обработчик уже известного нам события onclick, которое в данном случае вызывает функцию closeMenu(). Эта функция скрывает список меню, устанавливая его стиль display равным "none" вне зависимости от текущего его значения.

JS скрипт onclick="closeMenu('menu_polezn_inf');return(true)" следует разместить в том теге, при нажатии на котором будет скрываться раскрывающийся список. Например, это может быть блок div, содержащий в себе весь контент страницы или даже тег .

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

Свойство return(true) необходимо для того, чтобы ВСЕ ссылки, содержащиеся в блоке, в котором прописан указанный JS скрипт, были активны.

Как уже говорилось, если вместо true установить false, в случае, если в браузере поддерживаются JS-скрипты, ссылки активны не будут, т.е. нажатие на них не приведет по переходу по указанным в них URL. Так, если прописать указанный JS-скрипт в теге div, содержащем в себе все остальные блоки и иной контент, ни одна из ссылок, имеющихся на странице, не будет активной. Именно поэтому необходимо свойство true. Кстати, вот этот момент как-то неявно описан в источниках, которыми нам довелось пользоваться при разработке описанной выше технологии.

Итак, если устанавливаем свойство true, то при поддержке javascript будут активны и ссылка, и сам скрипт (если же поддержка отключена, то активной будет только ссылка; скрипт, естественно, работать не будет). Тогда как свойство false сделает ссылку неактивной при включенной поддержке javascript; она станет активной только в случае, если скрипты отключить, как показано на приведенной схеме.

Вывод

Таким образом, Вы ознакомились с универсальным вертикальным всплывающим меню. Которое, впрочем, имеет недостаток: при повторном нажатии на основную кнопку ("Полезная информация") меню не раскрывается, приходится отводить мышь и подводить вновь. Недостаток вызван, как уже говорилось, тем фактом, что основная кнопка находится внутри блока div, при клике на котором вызывается функция closeMenu. Т.е. вначале срабатывает openMenu, а затем сразу же closeMenu. Естественно, поэтому меню и не появляется вновь. Однако, если реализовать простой перехватчик события onClick, то указанный недостаток исчезнет.

Кроме того, возможно, кому-то могут не понравиться цветовая расветка меню, ширина/высота его пунктов, расстояние между ними. Это, конечно, дело индивидуального вкуса и может быть подогнано, что назвывается, "по месту".