Что такое выпадающее меню в компьютере
Создайте выпадающее меню, которое появляется, когда пользователь перемещает курсор мыши на элемент внутри панели навигации.
Шаг 1) Добавить HTML:
Примеры
Если у вас установлено приложение галереи элементов управления XAML, щелкните здесь, чтобы открыть приложение и увидеть MenuFlyout в действии.
Пример
/* Когда пользователь нажимает на кнопку,
переключение между скрытием и отображением раскрывающегося содержимого */
function myFunction() document.getElementById("myDropdown").classList.toggle("show");
>
// Закройте выпадающее меню, если пользователь щелкает за его пределами
window.onclick = function(event) if (!event.target.matches('.dropbtn')) var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) openDropdown.classList.remove('show');
>
>
>
>
Выпадающее меню - это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка:
Объяснение примера
Используйте любой элемент, чтобы открыть выпадающее меню, например элемент , или
.
Используйте элемент контейнера (например, ), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.
Оберните элемент вокруг кнопки и , чтобы правильно расположить выпадающее меню с помощью CSS.
Шаг 2) Добавить CSS:
Мобильное устройство
Если же пользователь просматривает страницу сайта с мобильного устройства, то, в силу отсутствия возможности реализации события наведения мыши, onmouseover срабатывать не будет. Но при прикосновении к пункту меню будет реализовано событие onclick . В результате сработает функция openMenu() , которая откроет раскрывающийся список (как это делается – см. выше). Повторное нажатие на пункт меню, как и при просмотре с обычного компьютера, скроет этот список.
Итак, независимо от типа устройства (обычный компьютер десктоп или мобильный телефон, смартфон и др.), меню будет вести себя одинаковым образом: при взаимодействии с ним оно вначале раскроется. При нажатии на него – закроется. При последующем нажатии – вновь откроется и т.д. При прекращении взаимодействия (в том числе и путем отведения указателя мыши) оно останется в прежнем состоянии.
-
). Правда, при отведении мыши раскрывающийся список будет исчезать. Но, как говорится, на безрыбье – и рак рыба (в конце концов, пользователь имеет возможность подключить javascript, что предусматривается по умолчанию в большинстве браузеров). А вот на мобильных устройствах в случае отключения javascript раскрыть меню не удастся.
Остается одна небольшая проблема: как сделать так, чтобы раскрывшийся список меню можно было бы закрыть, кликнув не только по пункту «Полезная информация», а где-нибудь на другом месте страницы. Опять же, это желательно для удобства пользователя: для того, чтобы закрыть список меню, ему не приходилось вновь возвращаться к его главному пункту.
Для этого можно воспользоваться следующим JS скриптом:
В качестве классов в блоке 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; она станет активной только в случае, если скрипты отключить, как показано на приведенной схеме.
Объяснение примера
Мы оформили кнопку выпадающего списка с цветом фона, отступами и т.д.
Класс .dropdown использует position:relative , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute ).
Класс .dropdown-content содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание установлено значение min-width 160px. Не стесняйтесь изменить это. Совет: Если вы хотите, чтобы ширина раскрывающегося содержимого была такой же широкой, как кнопка раскрывающегося списка, установите width на 100% (и overflow:auto чтобы включить прокрутку на небольших экранах).
Вместо того, чтобы использовать границу, мы использовали свойство box-shadow чтобы сделать выпадающее меню похожим на "карту". Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.
Селектор :hover используется для отображения выпадающего меню, когда пользователь перемещает курсор мыши на кнопку раскрывающегося списка.
Пример
Исчезновение
Элементы управления с исчезновением, такие как меню, контекстные меню и другие всплывающие элементы, захватывают фокус клавиатуры или геймпада внутри промежуточного пользовательского интерфейса, пока не будут закрыты. Для предоставления визуальной подсказки по этому поведению элементы управления с исчезновением на Xbox отображают наложение, затемняющее видимость вне области действия пользовательского интерфейса. Это поведение можно изменить с помощью свойства LightDismissOverlayMode . По умолчанию во временно отображаемых элементах пользовательского интерфейса наложение с исчезновением используется на Xbox (автоматически), но не в других семействах устройств. Вы можете принудительно настроить постоянное включение или отключение наложения.
Обычный ПК (ноутбук)
Если пользователь работает на обычном ПК (или ноутбуке), то вначале реализуется событие onmouseover (ибо вначале мышь наводится на элемент, и только потом нажимается). Следовательно, как только указатель мыши попадет на область соответствующего меню, вначале будет вызвана функция openMenu11() , которая выполнит раскрытие списка меню. Этот список появится на экране. Пользователь сможет пройтись по списку, выбрать интересующий его пункт меню.
Если же он не желает просматривать раскрывающийся список меню, т.е. захочет его скрыть, это будет несложно сделать, причем здесь поможет интуиция: надо будет всего лишь нажать («кликнуть») на пункт меню левой кнопкой мыши. Вот тогда-то и сработает событие onclick, вызвав функцию openMenu() . Которая, проверив, что меню находится в состоянии "block" (т.е. отображается на экране), изменит его на "none" , сделав неотображаемым. Повторный «клик» на пункте меню вновь вызовет функцию openMenu() , которая изменит состояние меню на "block" , т.е. раскрывшийся список вновь появится на экране. Таким образом, очередное нажатие мыши на пункте меню будет то отображать, то скрывать раскрывающийся список, каждый раз вызывая функцию openMenu() , играющую роль переключателя.
Если при этом увести мышь от меню, оно останется в том же самом виде. Т.е. если было отображаемым, значит и останется отображаемым (последнее удобно для пользователя: отведя мышь от меню, он, тем не менее, сможет обозревать раскрывшийся список). Если было неотображаемым, значит не будет отображаться и при отводе от него указателя мыши.
При повторном наведении мыши на пункт меню вновь сработает событие onmouseover , появится раскрывающийся список и т.д.
Создание строки меню
Для использования MenuBar требуется Windows 10, версия 1809 (SDK 17763) или более поздней версии либо библиотека пользовательского интерфейса Windows.
Для создания меню в строке меню используйте те же элементы, что и для всплывающего меню. Тем не менее вместо группирования объектов MenuFlyoutItem в элементе MenuFlyout следует сгруппировать их в элементе MenuBarItem. Каждый элемент MenuBarItem добавляется к MenuBar как меню верхнего уровня.
В этом примере показано только создание структуры пользовательского интерфейса, но не показана реализация всех команд.
Полезно для мобильной версии сайта Что такое выпадающее меню? Это когда при работе в браузере человек нажимает на главный пункт и при этом появляются дополнительные пункты, например, как в этой статье (полностью рабочий пример см. ниже).
При активировании кнопки «полезная информация» последняя окрашивается темно-зеленым цветом и ниже нее образуется список из «выпавших» пунктов меню (понятно, что эти пункты в свою очередь, могут содержать в себе дополнительные подпункты - подменю - и т.д.). Известны реализации технологии выпадающего меню при помощи javascript, а также на базе CSS (таблиц стилей).
При работе в браузере на обычном компьютере (так называемый десктоп, ноутбук) одним из событий, которое способно активировать пункт меню, является наведение мыши. Кстати, раскрытие меню в данном случае вполне возможно реализовать на чистом CSS, без использования JS. Т.е. как только указатель мыши попал на область главного пункта меню («Полезная информация»), тут же срабатывают стили CSS и возникает раскрывающийся список (как на примере выше), в котором можно выбрать подпункты меню, наведя указатель мыши, в свою, очередь, на один из них. Если указать мыши убрать с соответствующей области (например, с области «Полезная информация»), соответственно, выпадающий список исчезнет.
Однако, такой подход неприемлем для устройств с сенсорным экраном (это - разного рода тачпады). На таких устройствах наведение (например, пальца) выполняет другие функции, например, служит для перемещения области по экрану. Активация же пунктов меню таким наведением невозможна: вместо наведения необходимо нажатие или «клик».
И вот возникает дилемма: для обычных компьютеров удобным было бы описанное выше выпадающее меню (кстати, меню такого типа очень широко применяются вебмастерами на практике). Тогда как на мобильном устройстве оно попросту не сработает, т.е. пользователь не сможет открыть выпадающий список и пройтись по пунктам меню. Т.е., по сути, желательно, чтобы на сайте были реализованы обе технологии для ОДНОГО И ТОГО ЖЕ МЕНЮ. Как же быть?
Сложные способы состоят в том, например, чтобы одним пользователям (открывающим страницу сайта с обычных компьютеров – десктопов) показывать меню, выполненное по первой технологии, т.е. реагирующее на наведение мыши, а пользователям мобильных устройств – показывать меню, реагирующее на «клик» мыши, т.е. на нажатие. Однако это усложняет сайт, равно как и его администрирование. Да и, на наш взгляд, целесообразно было бы иметь универсальную технологию, позволяющую работать с меню обоими способами сразу. Поэтому целесообразно пойти по пути объединения, синтеза.
Итак, в первом случае (для обычных компьютеров) пункт меню реализуется очень просто – в виде ссылки. Если хотим, чтобы пункт меню активировался при наведении указателя мыши на любую точку его области а не только на саму ссылку то необходимо указать соответствующие классы (об этом пока отложим разговор на будущее). Вообще, надо сказать, что первый способ гораздо предпочтительнее: пользователь, увидев меню, не «целясь», двигает мышью и сразу быстро попадает на одну из точек области его пункта, видя, что этот пункт активировался, раскрылся выпадающий список и можно продолжать дальше. Тогда как попасть указателем мыши на ссылку, конечно, посложнее, да и дольше (на немалую долю секунды). Ибо область ссылки по размеру меньше, чем область пункта меню. Потом, далеко не всем пользователям доставляет удовольствие пользоваться сайтом, «целясь» мышью, пытаясь навести ее на ссылки (профессиональные снайперы не в счет).
Объяснение примера
Мы разработали выпадающую кнопку с фоновым цветом, дополнением, эффектом наведения и т.д.
Класс .dropdown использует position:relative , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute ).
Класс .dropdown-content класс содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание в min-width установлено значение 160px. Не стесняйтесь изменить это. Совет: Если вы хотите, чтобы ширина выпадающего контента, чтобы быть так велик, как в раскрывающееся меню, установить width на 100% (и overflow:auto , чтобы включить прокрутку на маленьких экранах).
Вместо использования границы мы использовали свойство box-shadow , чтобы сделать выпадающее меню похожим на"карточку". Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.
Шаг 3) Добавить JavaScript:
Создание кликабельного выпадающего списка
Создайте выпадающее меню, которое появляется, когда пользователь нажимает на кнопку.
Шаг 1) Добавить HTML:
Пример
/* Ссылки в панели навигации */
.navbar a
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>
/* Выпадающий контейнер */
.dropdown
overflow: hidden;
>
/* Кнопка выпадающего списка */
.dropdown .dropbtn font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Важно для вертикального выравнивания на мобильных телефонах */
margin: 0; /* Важно для вертикального выравнивания на мобильных телефонах */
>
/* Добавить красный цвет фона для ссылок на навигационную панель при наведении курсора */
.navbar a:hover, .dropdown:hover .dropbtn background-color: red;
>
/* Ссылки внутри выпадающего списка */
.dropdown-content a float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
>
/* Показать выпадающее меню при наведении курсора */
.dropdown:hover .dropdown-content display: block;
>
Выпадающий
Выпадающее меню - это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка:
Давайте посмотрим, как это меню будет выглядеть на практике
Наведите указатель мыши на меню. Понажимайте левую кнопку мыши - меню должно исчезать, затем - вновь появляться. Затем - отведите указатель - меню должно остаться. Кликните мышью где-нибудь на тексте - меню должно исчезнуть.
Примечание. На самом деле, меню, изображенное здесь, работает немного не так. В частности, при повторном нажатии на кнопку "Полезная информация" меню не раскрывается. Приходится отвести мышь и затем - вновь подводить ее - тогда оно появляется вновь.
Дело в том, что кнопка "Полезная информация" (точнее, блок, соответствующий ей) находится внутри блока, для которого задан обработчик события
onclick = "closeMenu('menu_polezn_inf');return(true)" ,
предназначенный для скрытия всплывающего меню при клике на основной области страницы. Т.е. вначале срабатывает событие onClick=openMenu для кнопки "Полезная информация", а затем - событие onClick=closeMenu для основной области: ведь кнопка-то размещена внутри нее. Поэтому для корректной работы меню следует или разместить его ВНЕ основной области страницы (например, слева или справа), или же реализовать перехват событие OnClick: т.е. чтобы при нажатии на кнопку "Полезная информация" срабатывал только обработчик для нее, но не для всех других блоков div, которые содержат эту кнопку (по отношению к которым она является вложенной).
Ссылка простого пункта выпадающего меню может иметь, например, такой вид:
Однако, чтобы пункт меню срабатывал не только при наведении мыши, но и при нажатии на него, данную ссылку необходимо немного модифицировать, добавив туда код JS. Дело в том, что на данный момент технологии CSS еще не содержат возможностей реагировать на «клик», т.е. на нажатие мышью по определенной области (есть большая доля уверенности, что в будущем этот недостаток будет, конечно же, преодолен; но пока что – на нет – и суда нет).
Кроме того, чтобы облегчить пользователю просмотр сайта и использование меню, как уже говорилось, целесообразно сделать, чтобы весь пункт меню (в данном случае содержащий фразу «Полезная информация») являлся ссылкой, а не только сама эта надпись. Наконец, хотелось бы, чтобы раскрывающийся список, будучи открытым, не закрывался бы сам по себе при отведении от него мыши (при работе на обычном компьютере). Наконец, должен существовать легкий способ убрать раскрывающийся список, если он пользователю более не нужен.
Параметр style определяет стиль надписи на пункте меню. Понятно, что его можно было бы определить в файле стилей .css, путем объявления соответствующего класса или идентификатора id . Параметр class содержит перечень классов, которые превращают весь пункт раскрывающегося меню в ссылку; кроме того, они содержат правила CSS для оформления внешнего вида пунктов. Например, как Вы можете видеть на нашем сайте, внутренний фон неактивных пунктов всплывающего меню является серым, тогда как активный пункт ( за исключением главных, например, самого нижнего, со словом «Полезная информация» ) подсвечивается ярко-желтым цветом (а то, честно говоря, немного напрягают сайты, на которых не поймешь – то ли активен пункт меню, то ли нет). Форма пунктов меню выполнена в виде прямоугольников с закруглениями (но, возможно, Вам понравится иной дизайн).
Onclick – это обработчик события нажатия или «клика» на пункт меню (точнее, на ссылку, которой он является). Этот обработчик вызывает функцию openMenu() с параметром menu_polezn_inf , который представляет собой не что иное, как значение id , содержащееся в элементе ul меню. Т.е. последний имеет следующий вид:
Таким образом, при возникновении события нажатия на пункт меню функция openMenu() , считывая имя параметра id , выполняет функцию его раскрытия, после чего формируется раскрывающийся список.
Событие onmouseover возникает, когда указатель мыши появляется в области ссылки (которой в данном случае является пункт меню «Полезная информация»). Это событие вызывает выполнение функции openMenu11() с тем же самым параметром menu_polezn_inf . Эта функция, как и openMenu11() , предназначена для открытия или, наоборот, закрытия выпадающего списка. Вот JS-скрипт, содержащие коды этих функций:
Как видно, если элемент документа html (в данном случае элемент ul ), определяемый идентификатором id1 , отображается на экране (т.е. ему присвоено свойство display , равное "block" ), то функция openMenu() делает его неотображаемым, присваивая ему значение "none" .
В противоположном случае (т.е. если элемент не отображался) она присваивает ему значение "block" , после чего элемент становится виден на экране.
Функция openMenu11() вызывает отображение на экране элемента, имеющего идентификатор id1 , независимо от того, был ли он отображен на экране до этого или нет.
Кроме того, описана также функция closeMenu() . Она делает неотображаемым блок меню с идентификатором id2 , неважно, отображался ли он на экране до этого или нет.
В обеих функциях имеется свойство return(false) . Оно необходимо для того, чтобы предотвратить переход по ссылке после срабатывания события ( onclick или onmouseover ). Если бы тег, в котором приписывались указанные события, не был ссылкой ( … ), то return(false) можно было бы опустить.
Таким образом, при наведении указателя мыши на область пункта меню реализуется событие onmouseover и вызывается функция openMenu11() , а при нажатии на этот пункт меню реализуется событие onclick и вызывается функция openMenu() .
Значки
Рекомендуем добавлять значки пунктов меню для:
- наиболее часто используемых пунктов;
- пунктов меню, значок которых является стандартным или хорошо известным;
- пунктов меню, значок которых хорошо иллюстрирует предназначение команды.
Вы не обязаны добавлять значки для команд без стандартных зрительных образов. Загадочные значки бесполезны, создают визуальные помехи и не позволяют пользователям сосредоточиться на важных пунктах меню.
Размер значков в MenuFlyoutItem составляет 16x16 пикселей. Если вы используете SymbolIcon, FontIcon или PathIcon, значок автоматически масштабируется до правильного размера без потери качества. При использовании BitmapIcon убедитесь, что размер элемента равен 16x16 пикселей.
Пример
/* Контейнер - необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>
/* Ссылки внутри выпадающего списка */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover
/* Показать выпадающее меню при наведении курсора */
.dropdown:hover .dropdown-content
/* Изменение цвета фона кнопки раскрывающегося списка при отображении содержимого раскрывающегося списка */
.dropdown:hover .dropbtn
Пример
Создание всплывающего меню
Чтобы создать всплывающее меню, используйте класс MenuFlyout. Чтобы задать содержимое меню, необходимо добавить объекты MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem и MenuFlyoutSeparator в элемент MenuFlyout.
Эти объекты предназначены для:
-
— выполнения немедленного действия; — содержания каскадного списка пунктов меню. — включения или отключения параметра; — переключения между взаимоисключающими пунктами меню. — визуального разделения элементов меню.
В этом примере создается MenuFlyout и используется свойство ContextFlyout, доступное для большинства элементов управления, для отображения MenuFlyout в качестве контекстного меню.
Следующий пример почти идентичен, но вместо использования свойства ContextFlyout для отображения класса MenuFlyout как контекстного меню в нем используется свойство FlyoutBase.ShowAttachedFlyout для его отображения как меню.
Объяснение примера
Используйте любой элемент, чтобы открыть выпадающее меню, например элемент , или
.
Используйте элемент контейнера (например, ), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.
Оберните элемент вокруг кнопки и , чтобы правильно расположить выпадающее меню с помощью CSS.
Шаг 2) Добавить CSS:
Создать выпадающее меню
Создайте выпадающее меню, которое появляется при наведении курсора мыши на элемент.
Шаг 1) Добавить HTML:
Выбор правильного элемента управления
См. меню и контекстные меню , которые помогут определить контекстное меню и сценарии контекстного меню, а также указания о том, когда следует использовать всплывающий элемент меню и всплывающий элемент панели команд.
Всплывающие элементы меню можно использовать в качестве меню и контекстных меню для упорядочения команд. Чтобы отобразить произвольное содержимое, например уведомление или запрос на подтверждение, используйте диалоговое окно или всплывающий элемент.
Если определенная команда будет использоваться часто и у вас есть доступное место, см. команды коллекции , например, поместив команду непосредственно в свой собственный элемент, чтобы пользователям не нужно было просматривать меню, чтобы получить к нему доступ.
Кликабельно выпадающий список в навигации
Пример
Пример
Совет: Зайдите на наш учебник CSS Выпадающий, чтобы узнать больше о выпадающих списках.
Совет: Зайдите на наш учебник Кликабельное выпадающее, чтобы узнать больше о выпадающем кликабельном списке
Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигации.
Совет: Зайдите на наш учебник Отзывчивая верхняя навигация, чтобы узнать о том, как создать отзывчивую навигационную панель.
Всплывающие элементы меню используются в сценариях меню и контекстного меню для отображения списка команд или параметров, запрашиваемых пользователем. Во всплывающем меню отображается одно встроенное меню верхнего уровня, которое может содержать элементы меню и вложенные меню. Чтобы отобразить набор нескольких меню верхнего уровня в горизонтальной строке, используйте строку меню (которая обычно находится в верхней части окна приложения).
Получение библиотеки пользовательского интерфейса Windows
Элемент управления MenuBar является частью библиотеки пользовательского интерфейса Windows — пакета NuGet, который содержит новые элементы управления и компоненты пользовательского интерфейса для приложений для Windows. Дополнительные сведения, включая инструкции по установке, см. в обзорной статье о библиотеке пользовательского интерфейса Windows.
Объяснение примера
Мы стилизовали навигационную панель и ссылки на навигационную панель с фоновым цветом, отступами и т. д.
Мы оформили кнопку выпадающего списка с фоновым цветом, отступами и т.д.
Класс .dropdown - это контейнер для .dropdown-content . Поскольку это элемент , а не элемент , мы должны переместить его, чтобы убедиться, что он остается рядом со ссылками.
Класс .dropdown-content содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание, установлено значение min-width 160px. Не стесняйтесь изменить это.
Вместо того, чтобы использовать границу, мы использовали свойство box-shadow сделать выпадающее меню похожим на "карточку". Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.
Селектор :hover используется для отображения выпадающего меню, когда пользователь перемещает курсор мыши на кнопку раскрывающегося списка.
Вывод
Таким образом, Вы ознакомились с универсальным вертикальным всплывающим меню. Которое, впрочем, имеет недостаток: при повторном нажатии на основную кнопку ("Полезная информация") меню не раскрывается, приходится отводить мышь и подводить вновь. Недостаток вызван, как уже говорилось, тем фактом, что основная кнопка находится внутри блока div, при клике на котором вызывается функция closeMenu. Т.е. вначале срабатывает openMenu, а затем сразу же closeMenu. Естественно, поэтому меню и не появляется вновь. Однако, если реализовать простой перехватчик события onClick, то указанный недостаток исчезнет.
Кроме того, возможно, кому-то могут не понравиться цветовая расветка меню, ширина/высота его пунктов, расстояние между ними. Это, конечно, дело индивидуального вкуса и может быть подогнано, что назвывается, "по месту".
Узнать, как создать интерактивное выпадающее меню с помощью CSS и JavaScript.
Пример
Пример
/* Контейнер - необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>
/* Ссылки внутри выпадающего списка */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover
/* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
.show
Объяснение примера
Используйте любой элемент, чтобы открыть выпадающее меню, например элемент , или
.
Используйте элемент контейнера (например, ), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.
Оберните элемент вокруг кнопки и , чтобы правильно расположить выпадающее меню с помощью CSS.
Шаг 2) Добавить CSS:
Читайте также: