Cоздание выпадающего меню на HTML и CSS просто
Автор статьи: admin
Метки: CSS / HTML / Как сделать
В этой статье мы разберём, как происходит создание выпадающего меню на HTML, CSS и JavaScript.
Также, если вы вообще не знаете как делать меню, то посмотрите статью: Меню навигации на HTML и CSS, там вы научитесь создавать простое меню навигации.
Создание горизонтального выпадающего меню:
Сперва на HTML и CSS сделаем выпадающее меню которое будет проявляться при наведении мышки, вот его HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <header> <nav> <ul> <li><a href=»#»>Главная</a></li> <li>Галерея <ul> <li><a href=»#»>Машины</a></li> <li><a href=»#»>Горы</a></li> <li><a href=»#»>Компьютеры</a></li> </ul> </li> <li>О себе <ul> <li><a href=»#»>Имя</a></li> <li><a href=»#»>Аватарка</a></li> </ul> </li> </ul> </nav> </header> |
Тут всё как в обычном меню, если вы читали статью про то как сделать меню навигации, единственное что отмечу, это то, что обязательно меню должно находится в теги <nav>, для лучшей индексации.
Теперь перейдём к CSS, но сначала мы не будем делать прям выпадающие меню, оно просто при наведении мыши, будет просто появляться, вот и всё.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | html, body { margin: 0; padding: 0; }
nav > ul { display: flex; margin: 0; width: 100%; background-color: green; }
nav > ul > li { margin-right: 20px; }
li { color: white; list-style: none; font-size: 20px; }
li a { color: white; text-decoration: none; }
li > ul{ display: none; position: absolute; background-color: tomato; padding: 0; }
li:hover > ul{ display: block; } |
В самом начале, мы убираем отступы со всего документа, чтобы, меню было чётко прибито ко краям страницы.
Дальше настраиваем внешний вид, делаем FlexBox и задаём отступы, самое главное, что нужно сделать, это тегам <ul>, которые находятся внутри тега <li>, сделать позиционирование absolute и добавить ему свойство display: none, что бы блок не показывался на экране.
Последнее важное изменение, это при наведении мышкой на <li>, внутри которого есть <ul>, он появлялся, вот что получилось.
Такое латовый вариант получился, теперь сделаем так, что бы меню выпадало с анимацией, а не просто появлялась, для этого не много изменим стили.
Примечание:
Тут покажу только те селекторы, которые изменим, а не весь CSS, так как, там добавилось не много.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | nav > ul { display: flex; margin: 0; width: 100%; height: 25px; background-color: green; }
li > ul{ position: absolute; top: 40px; visibility: hidden; opacity: 0; background-color: tomato; padding: 0; transition: 400ms; }
li:hover > ul{ visibility: visible; top: 25px; opacity: 1; } |
В первом селекторе мы добавляем высоту, чтобы было проще менять позицию, во втором, добавляем позицию top равного 45 пикселем, также устанавливаем свойство visibility: hidden, которое отвечает за скрытие элемента, и opacity: 0, для прозрачности, значение ноль, означает что элемент полностью прозрачен.
В последнем селекторе который мы изменяем, который ещё отвечает за наведение мышки, убираем display и добавляем visibility: visible, для показа элемента, top равный 25 пикселям и opacity: 1, для полной не прозрачности.
Также появилось свойство transition, для плавных переходов, мы задаём ему время перехода 400 миллисекунды.
Вывод:
В этой статье мы рассказали о создание выпадающего меню на HTML и CSS, если вам что то не понятно, то посмотрите наш учебник по HTML и CSS.
Подписываетесь на соц-сети:
Оценка:
Количество оценивших: 1
Средняя оценка: 5,00
Загрузка…
Поделится:
Пока кнопок поделиться нетТакже рекомендую:
Как создавать раскрывающиеся и всплывающие меню, доступные в Интернете
Понимание того, как люди с ограниченными возможностями могут использовать раскрывающееся меню
Выпадающее меню
Вылет меню
Как сделать раскрывающееся меню доступным в Интернете
Доступные выпадающие меню для пользователей мыши
Доступные раскрывающиеся меню для пользователей клавиатуры
Плагин Superfish для создания доступных раскрывающихся меню
Подведение итогов
В зависимости от того, с кем вы разговариваете, термин «раскрывающееся меню» может означать разные вещи.
В этой статье мы рассмотрим выпадающие меню как тип многоуровневой навигации по сайту.
Выпадающие меню изначально скрыты и открываются, когда пользователь взаимодействует с основной навигацией или родительским меню. Обычно скрытые элементы меню отображаются при наведении курсора, когда пользователь наводит указатель мыши на родительский элемент.
Использование раскрывающихся меню, доступных через Интернет, важно, так как это позволит людям с ограниченными возможностями легко просматривать ваш сайт. Доступные раскрывающиеся меню помогают людям с нарушениями зрения, моторики и когнитивных функций.
Если ваши раскрывающиеся меню недоступны, эти пользователи могут пропустить ключевые разделы вашего веб-сайта или им может потребоваться гораздо больше времени, чтобы найти нужную информацию. В результате это повредит их пользовательскому опыту, и они могут не посетить сайт повторно.
Понимание того, как люди с ограниченными возможностями могут использовать раскрывающееся меню
Важно понимать, как посетители сайта с ограниченными возможностями могут использовать вашу навигацию, чтобы вы знали, как исправить эти проблемы со специальными возможностями.
Например, у людей с рассеянным склерозом могут быть мышечные спазмы, тремор или мышечная слабость. Эти симптомы затрудняют удержание и использование мыши. Итак, ваше раскрывающееся меню должно быть доступно для клавиатуры. Это означает, что когда пользователь нажимает соответствующую клавишу, раскрывающееся меню становится видимым, как это было бы для человека, использующего мышь.
Если вы наведете курсор мыши на ссылку в меню, вы обычно увидите изменение цвета фона или цвета границы. Тем, кто использует клавиатуру, нужен такой же визуальный сигнал, чтобы они знали, какую ссылку они выбрали. Мы называем это стилем фокусировки. Пользователь клавиатуры не может использовать указатель мыши, чтобы определить, где он находится на странице, поэтому наличие четкого стиля фокуса имеет решающее значение.
Пользователи с когнитивными нарушениями могут не осознавать, что некоторые пункты меню скрыты. Это может быть проблемой на мобильном устройстве, где навигация часто переключается значком гамбургера.
Мега-меню, подобные показанному ниже, также могут иметь большое количество ссылок, отображаемых в раскрывающемся меню, поэтому важно, чтобы ваши меню были организованы интуитивно понятным образом. Мега-меню – это тип раскрывающегося меню, в котором ссылки подменю отображаются в большом поле, как в примере, показанном ниже. Мегаменю могут содержать изображения или видео как часть меню и часто имеют ссылки, заголовки которых указаны по темам. Однако плохо организованное мегаменю может быть менее полезным в целом, если оно не может направлять пользователей к месту назначения. Это особенно актуально для людей с когнитивными нарушениями.
Источник изображения
Прежде чем мы перейдем к тому, как создать доступное меню, важно знать два типа существующих навигационных меню – раскрывающиеся меню и всплывающие меню. Понимание этих типов поможет вам создать навигацию, которая лучше всего подходит вашей аудитории.
Выпадающее меню
Выпадающее меню – это список связанных ссылок, связанных с родительским элементом в меню навигации.
Навигация обычно организована в виде горизонтальной полосы, и часто в меню используется стрелка вниз, чтобы указать на наличие раскрывающегося меню. Выпадающее меню или подменю невидимы до тех пор, пока пользователь не взаимодействует с панелью навигации с помощью мыши или клавиатуры.
Когда появляется меню, ссылки «раскрываются» вертикально под родительским элементом. Выпадающее меню будет оставаться видимым, пока пользователь не переместит указатель мыши или не перейдет по ссылке. Выпадающие меню часто используются, когда площадь экрана ограничена, чтобы посетители могли получить доступ к соответствующему контенту, не посещая сначала другие страницы, чтобы найти его.
В приведенном ниже примере есть раскрывающееся меню для документации, в котором показаны различные типы документации.
Источник изображения
Вылет меню
Всплывающее меню очень похоже на раскрывающееся меню. Всплывающее меню – это скрытое подменю, которое открывается при взаимодействии с навигацией.
Разница в том, что подменю не опускается вертикально, а горизонтально «вылетает». Как и раскрывающееся меню, всплывающее меню может иметь несколько уровней.
Вот пример двухуровневого всплывающего меню:
Источник изображения
Выпадающие меню и раскрывающиеся меню можно комбинировать. В следующем примере ссылка «Глубина» имеет раскрывающееся меню, показывающее уровень 01. Уровень 01 имеет раскрывающееся меню для уровня 02, и, в свою очередь, раскрывающееся меню уровня 02 показывает уровень 03.
Источник изображения
Теперь, когда вы знаете, что такое раскрывающееся меню и всплывающее меню, давайте посмотрим на создание доступных раскрывающихся меню.
Как сделать раскрывающееся меню доступным в Интернете
Первым шагом к созданию доступного раскрывающегося меню является планирование структуры вашего сайта. То есть определите свои страницы верхнего уровня, которые будут отображаться в основной навигации, а затем определите, для каких из них нужны дочерние страницы.
Ниже приведен пример базовой структуры навигации с раскрывающимися меню. В этом примере страница «Службы» имеет четыре дочерних страницы – написание блога, социальные сети, SEO и веб-дизайн. На странице блога есть три дочерних страницы – маркетинг, социальные сети и аналитика. Итак, будет два подменю, которые будут выпадать для служб и блога.
Дочерние страницы также могут иметь свои собственные дочерние страницы. Например, у вас могут быть две дочерние страницы для категории «Маркетинг» в вашем блоге, например контент-маркетинг и электронный маркетинг. Этот тип навигации называется двухуровневым подменю.
Большинство систем управления контентом имеют настройки навигации, которые позволяют вам устанавливать дочерние страницы. Обычно вы можете настроить свои навигационные ссылки с помощью перетаскивания.
Слишком много уровней раскрывающегося меню или всплывающего меню может сделать вашу навигацию слишком сложной для некоторых людей. Например, человек со слабостью в руках может не обладать достаточным двигательным контролем, чтобы перемещать мышь в нужных областях, чтобы открыть все подменю.
Поэтому делайте свои подменю максимально простыми.
Чтобы сделать раскрывающиеся меню доступными, вам, вероятно, понадобится помощь разработчика. Доступные раскрывающиеся меню должны быть правильно закодированы, чтобы соответствовать потребностям различных групп пользователей.
Слепым пользователям, использующим программу чтения с экрана, нужно меню, закодированное в виде списка ссылок, чтобы они могли определить, сколько ссылок находится в основной навигации или в каждом раскрывающемся меню. Им также необходимо знать, по какой ссылке они находятся на текущей странице.
Зрячие пользователи, которые полагаются на клавиатуру, должны иметь возможность перемещаться по доступным раскрывающимся меню с помощью клавиши табуляции и клавиши ввода. Если они не видят раскрывающиеся меню при навигации по странице, они не будут знать, какие там ссылки и куда они ведут.
Посетителям, которые могут пользоваться мышью, но не умеют управлять мелкой моторикой, требуется, чтобы выпадающие меню были видны достаточно долго, чтобы можно было ими пользоваться.
Если при наведении курсора мыши появляется раскрывающееся меню, но у человека нет устойчивой руки, оно может быстро исчезнуть и стать недоступным.
Следующие три примера доступных раскрывающихся меню взяты из учебного пособия Web Accessibility Initiative по всплывающим меню.
Доступные выпадающие меню для пользователей мыши
Кто-то с тремором рук может использовать стандартную мышь, но ему трудно управлять. Они могут быть не очень точными при наведении и щелчке. Выпадающее меню, которое исчезает слишком быстро, прежде чем они успевают с ним взаимодействовать, недоступно.
В приведенном выше примере в раскрывающееся меню было добавлено время задержки в секунду при перемещении мыши. Это означает, что если мышь случайно отодвинется, выпадающее меню не исчезнет сразу.
Доступные раскрывающиеся меню для пользователей клавиатуры
Существует несколько подходов к созданию раскрывающихся меню, доступных с клавиатуры.
Согласно WAI, «Подменю не должны открываться при использовании клавиши табуляции для навигации по меню, поскольку пользователям клавиатуры тогда придется проходить через все элементы подменю, чтобы перейти к следующему элементу верхнего уровня».
Использование элемента родительского меню в качестве переключателя
В следующем примере, взятом из рекомендаций WAI, ссылка «Космические медведи» содержит элементы подменю. Эта ссылка сама по себе не ведет к месту. Он действует как триггер для открытия раскрывающегося меню.
Источник изображения
Пользователь может нажать вкладку пять раз, чтобы последовательно пройти по меню до последнего пункта меню «Контакт».
Пользователь клавиатуры может легко увидеть, какую ссылку он выбрал, потому что белый цвет переднего плана и темно-синий фон навигации инвертированы, а ссылка также подчеркнута.
Источник изображения
Если пользователь нажимает клавишу ВВОД в родительском пункте меню с подменю, раскрывающееся меню становится видимым.
Источник изображения
Повторное нажатие на вкладку выделяет первую ссылку в раскрывающемся меню.
Источник изображения
Затем пользователь может нажать клавишу ВВОД, чтобы перейти по выделенной ссылке, или вкладку, чтобы перейти к следующей ссылке в раскрывающемся меню.
Одним из недостатков этого метода является то, что зрячему пользователю клавиатуры может быть неочевидно наличие раскрывающегося меню. Кто-то может использовать клавишу табуляции, чтобы перейти к контакту, не открывая раскрывающееся меню Космических медведей.
Использование кнопки в качестве переключателя
В этом примере от WAI пункт меню верхнего уровня Space Bears связан с другой страницей, поэтому он не может переключать раскрывающееся меню. Вместо этого кнопка со стрелкой справа от ссылки сигнализирует о наличии раскрывающегося меню. На кнопке также есть скрытый текст для пользователей программ чтения с экрана, чтобы сообщить этим людям, что кнопка переключает раскрывающееся меню.
Источник изображения
Когда кнопка-переключатель выбрана с клавиатуры, она выделяется белым цветом, а цвета стрелок инвертируются.
Источник изображения
Когда посетитель нажимает кнопку, нажимая клавишу ввода, открывается раскрывающееся меню.
Источник изображения
Выпадающее меню ведет себя как в предыдущем примере. Нажатие на вкладку выбирает первую ссылку, Space Bear 6.
Источник изображения
Давайте посмотрим на другой тип выпадающего меню со специальными возможностями, в котором сочетаются некоторые функции, которые мы видели в предыдущих примерах.
Плагин Superfish для создания доступных раскрывающихся меню
Superfish – широко используемый плагин, который поддерживает доступные выпадающие меню. Он работает на сенсорных устройствах, а также на настольных и портативных компьютерах. Superfish доступен разработчикам для загрузки и использования в проектах веб-разработки. Плагин также включен в некоторые темы и шаблоны для популярных систем управления контентом.
Для пользователей, которым трудно управлять мышью, Superfish имеет задержку, когда мышь перемещается из раскрывающегося меню, прежде чем оно закрывается. Эта задержка установлена на 0,8 секунды и при необходимости может быть увеличена.
Superfish предлагает полную поддержку для пользователей клавиатуры – стрелки показывают пользователю, где есть подменю.
Навигация Superfish может быть горизонтальной, вертикальной или навигационной панелью. Вы также можете создавать многоуровневые выпадающие меню с помощью Superfish или использовать его для создания мегаменю. Вот пример меню панели навигации Superfish:
Источник изображения
Независимо от того, какой тип меню Superfish вы выберете, ваши пользователи взаимодействуют с ним одинаково, используя клавишу табуляции для навигации по пунктам меню. При нажатии на вкладку автоматически открывается любое выпадающее меню.
Основным недостатком навигации Superfish является то, что пользователь должен пройти через все пункты меню в раскрывающемся меню, прежде чем перейти к следующему элементу верхнего уровня. Если в ваших раскрывающихся меню много ссылок, это означает, что нажимается много клавиш. Поэтому важно хорошо спланировать основную навигацию и не включать ненужные ссылки.
Подведение итогов
Как вы видели, чтобы сделать раскрывающиеся меню доступными, необходимо учитывать потребности различных групп пользователей с ограниченными возможностями.
Сделать ваши меню простыми и логичными, дать им дополнительное время для реакции на движения мыши, использовать правильный код для пользователей программ чтения с экрана и обеспечить возможность управления вашими меню с помощью клавиатуры – все это играет свою роль.
Используя доступные раскрывающиеся меню, ваш сайт станет проще в использовании, и никто не будет исключен.
Источник записи: https://blog.hubspot.com
Как создать адаптивное всплывающее меню?
Создайте адаптивное всплывающее меню, которое запускается с помощью кнопки меню в заголовке вашего сайта.
Вы узнаете, как создать всплывающее меню, которое:
- привлекательно, функционально и красиво
- адаптировано для мобильных устройств
Дизайн всплывающего окна и его содержимого
- Перейти к шаблонам > Всплывающие окна> Добавить новый и дайте вашему новому всплывающему окну имя. (Альтернативный метод — нажать CMD+E или CTRL+E , чтобы открыть Finder , найдите Popup, выберите Add New Popup и дайте ему имя.)
- Выберите готовый шаблон Popup или закройте наложение Library и создайте свое всплывающее окно с нуля. Для этого примера мы создадим свой собственный, но вы также можете найти этот шаблон в своей библиотеке шаблонов всплывающих окон Elementor Pro . Просто найдите «меню» в библиотеке всплывающих окон, чтобы найти его.
Всплывающее окно > Вкладка «Макет»
- Ширина : Установить на 85vw
- Наложение : Скрыть
- Анимация входа : Затухание
- Продолжительность анимации : 2 секунды
Всплывающее окно > Вкладка «Стиль»
Всплывающее окно
Тень окна : Установите их по своему усмотрению.
Кнопка закрытия
- Вертикальное положение : 4
- Цвет : Установите цвет на #878787
- Размер : 35 900 08
Всплывающее окно > Вкладка «Дополнительно»
Предотвратить закрытие при наложении : Да
Теперь добавьте раздел с двумя столбцами.
Дизайн первого столбца
Раздел > Макет
- Ширина содержимого : Полная ширина
- Пробел между столбцами : Нет промежутка
Под Раздел > Макет > Зазор между столбцами , набор Нет промежутка .
Под Section > Advanced установите Padding 70 пикселей по всему периметру.
Раздел > Дополнительно
Заполнение : 70 сверху, снизу, слева и справа.
Перетащите виджет «Заголовок» в первый столбец.
Под Стиль > Типографика , установите размер 60, а под Вес установите 100.
Совет : Сейчас самое время настроить заголовки.0021 Мобильные настройки .
Создание остальных пунктов меню
- Щелкните правой кнопкой мыши ручку виджета «Заголовок» и выберите «Дублировать».
- Повторите дублирование столько пунктов меню, сколько вам нужно.
- Отредактируйте текст заголовка для каждого виджета «Заголовок», чтобы правильно обозначить каждый пункт меню
Добавить кнопку в меню
Перетащите виджет «Кнопка» под пункты меню и настройте его по своему вкусу.
На вкладке Advanced > Margin , установите значение 70 для верхнего края, а затем щелкните значок адаптивного окна просмотра , щелкните значок Mobile и установите для поля Mobile значение 40 для верхнего края.
Перетащите еще один виджет Inner Section в первый столбец под кнопкой.
- Под Раздел > Макет > Ширина , установите Полная ширина .
- Под Раздел > Макет > Зазор между столбцами, набор Нет зазора .
- В разделе «Раздел» > «Дополнительно» > «Отступы» установите 30 для верхнего края, 70 для правого, 50 для нижнего и 70 для левого.
- Теперь щелкните правой кнопкой мыши маркер столбца и выберите Удалить , чтобы удалить один из столбцов, оставив вам только один.
Добавить кнопки «Поделиться» в меню
Перетащите виджет «Кнопки общего доступа» (Pro) в столбец.
Кнопки «Поделиться» > «Контент»
- При необходимости отредактируйте элементы социальных сетей.
- Кожа : Минимум
- Выравнивание : По левому краю
Кнопки общего доступа > Стиль
- Размер кнопки : 1
- Цвет 9002 2: Пользовательский цвет и выберите черный (#000000)
Дизайн второго столбца
Щелкните правой кнопкой мыши ручку столбца, чтобы изменить настройки столбца.
Столбец > Стиль
Фон
- Цвет фона : Установите значение #000000 (черный)
- Второй цвет : Установите #000000 (черный)
Примечание : Хотя новый цвет фона был установлен, вы еще не увидите его, потому что в столбце еще нет содержимого.
Создать форму призыва к действию подписки на информационный бюллетень
Перетащите виджет «Внутренний раздел» в этот столбец.
Щелкните правой кнопкой мыши маркер столбца и выберите Удалить , чтобы удалить один из столбцов, оставив вам только один.
Внутренняя секция > Дополнительно
- Поле : Установите значение 130 только для нижнего края
- Отступ : Установите значение 70 для верхнего края, 60 для правого края, 70 для нижнего края и 60 для левого края
Перетащите головку виджет в колонку
Отрегулируйте текст заголовка (например, Подпишитесь на нашу рассылку), а также размер текста, цвет и т.
д. по мере необходимости.
Перетащите Form Widget (Pro) под заголовок
Form > Content для этого пример.
Кнопка отправки
- 90 021 Размер : Средний
- Ширина столбца : 20%
- Выравнивание : Вправо
- Значок : Длинная стрелка вправо
Форма > Стиль
Форма
- Зазор столбца : 0
- 900 21 Зазор между строками : 0
Поле
- Цвет текста : Белый
- Цвет фона : Прозрачный
- Цвет границы : Белый
- Ширина границы : 1 только для нижнего края
- Типографика > Размер : 10
Кнопка
- Цвет фона : Прозрачный
- Цвет текста : Белый
- Граница : Сплошной
- Ширина рамки : 1 только для нижнего
- Цвет границы : Белый
Создать отображение продуктов
Перетащите еще один виджет «Внутренняя секция» в этот столбец под формой.
Внутренняя секция > Дополнительно
- Отступы : Установите значение 30 только для правой стороны : Скрыть
Внутренний раздел > Макет
- Зазор между столбцами : Нет Gap
Щелкните правой кнопкой мыши маркер столбца и выберите Удалить , чтобы удалить один из столбцов, оставив вам только один.
Редактировать столбец
Столбец > Дополнительно
- Поле : Установите -60 (минус 60) только для левого края это в это столбец
Заголовок > Стиль
- Цвет текста : Черный (#000000)
- Вес : 700
Заголовок > Дополнительно
- Поле : Установите на 20 только для левого
Столбец > Стиль
Фон
Цвет : Белый (#ffffff)
Граница
- Радиус границы : 5 для всех сторон
Box Shadow (Normal)
- Color : rgba(0,0,0,0.
21) - Box Shadow > Horizontal : 0
- Box Shadow > Vertical 9002 2 : 10
- Тень > Размытие : 30
- Тень блока > Разброс : -10 (минус 10)
- Положение : Контур
Тень блока (при наведении)
- 9000 7 Цвет : rgba(0,0,0,0.21)
- Тень > По горизонтали : 0
- Тень > По вертикали : 15
- Тень > Размытие : 40
- Тень > Sp чтение : -10 (минус 10)
- Позиция : Схема
Перетащите виджет Изображение под заголовок
Изображение
Пока не выбирайте изображение
- 90 021 Размер изображения : Полный
- Выравнивание : По левому краю
Сейчас щелкните правой кнопкой мыши ручку виджета «Заголовок», продублируйте его и настройте стиль дублированного виджета.
Заголовок > Стиль
- Размер : 15
- Вес : 300
Теперь измените формулировку для каждого.
Щелкните правой кнопкой мыши дескриптор столбца и продублируйте его дважды, чтобы всего было 3 столбца.
- Отредактируйте столбец для среднего и последнего столбцов, изменив поля в столбце > Дополнительно на -40 для левого поля в среднем столбце и -20 для левого поля в последнем столбце.
- Для каждого столбца отредактируйте виджет Изображение, выбрав изображение. Здесь хорошо работают даже изображения .gif.
- При необходимости отрегулируйте текст и поля.
Настройка для мобильных устройств
Отредактируйте каждый из внутренних разделов в левой колонке
Внутренний раздел > Дополнительно
- Заполнение : 25 для всех сторон
Щелкните значок шестеренки , расположенный в в левом нижнем углу панели, чтобы вернуться к настройкам всплывающих окон.
Настройки всплывающего окна > Макет
- Ширина : 100vw
Форма
Установите ширину поля электронной почты и кнопки отправки на 80% и 20% соответственно.
Установите параметры публикации
Нажмите кнопку Опубликовать . Для этого всплывающего окна нет условий , триггеров или расширенных правил , поэтому нажмите кнопку Сохранить и закрыть .
Отредактируйте созданный Elementor шаблон заголовка вашего сайта
Перейдите в Templates > Theme Builder > Headers > Выберите заголовок и нажмите Редактировать с помощью Elementor
Щелкните ручку виджета кнопки меню, чтобы отредактировать виджет, если он существует, или создать новый.
Кнопка
- Ссылка : Щелкните значок Dynamic и выберите Действия > Всплывающее окно
- Еще раз щелкните Всплывающее окно и в разделе Действие выберите Кому ggle Popup
- В поле Popup найдите и выберите всплывающее окно, которое вы только что создали
Щелкните Update кнопка для сохранения изменений шаблона шапки
Готово.
Перейдите на свой действующий сайт, нажмите кнопку Меню в заголовке и увидите свое новое всплывающее меню в действии.
Бонус : добавьте эффекты Entrance Animation на любой из ваших виджетов, чтобы добавить интересные эффекты. Просто отредактируйте виджет, перейдите на его вкладку «Дополнительно», выберите одну из перечисленных там анимаций входа.
Как создать адаптивное всплывающее меню Divi
Создание адаптивного меню, которое отлично выглядит на любом экране, может быть сложной задачей. Но не с Диви!
Параметры Divi Theme и Builder, а также плагин Divi Area Pro позволяют настраивать всплывающие меню независимо от количества пунктов меню, ссылок и страниц, на которых вы хотите включить меню.
Сегодня мы собираемся предоставить Divi Theme Builder и плагин Divi Areas Pro в качестве двух полезных решений для создания всплывающих меню, реагирующих на мобильные устройства, которые могут запускаться при щелчке, наведении курсора или триггере с временной задержкой.
Давайте начнем.
Содержание
- Создание всплывающих меню с помощью Theme Builder
- Создание адаптивного всплывающего меню с Divi Areas Pro
- к вам
Чтобы начать создавать удивительные всплывающие меню с помощью Divi Builder, Elegant Themes, как всегда, предоставляет нам еще одно супер-подробное руководство, и мы благодарны за вдохновение!
Войдите в свою панель управления WordPress и откройте конструктор тем Divi, где вы добавите новый шаблон для всплывающего меню.
Выберите страницу, на которую вы хотите добавить всплывающее меню, и затем нажмите «Добавить пользовательский заголовок» > «Создать пользовательский заголовок», после чего на вашей странице откроется раздел заголовка.
Теперь первое, что вам нужно сделать, это сделать фон прозрачным и использовать 0 пикселей для верхнего и нижнего заполнения, что удаляет контейнеры по умолчанию для заполнения раздела.
Затем перейдите на вкладку «Дополнительно» и в настройках «Положение» выберите фиксированное верхнее центральное положение и нажмите «Сохранить».
Далее вам нужно добавить строку, которая будет содержать ваш логотип и значок гамбургера для меню.
Добавьте строку со структурой из 3 столбцов и в настройках «Размер» строки и увеличьте ширину до более чем 90% с максимальной шириной 100%, что может помочь нам увеличить размер контейнера.
В первую колонку добавьте свой логотип в качестве модуля изображения.
Затем в третьем столбце добавьте текстовый модуль, который будет фактически представлять ваш значок гамбургера, со следующими диапазонами:
Установите высоту текстовой строки на ноль, а в настройках «Размер» установите ширину на 120 пикселей. , и поднимите модуль справа.
Следующее, что вам нужно сделать, это добавить новую строку из 1 столбца, которая будет посвящена боковому меню. В настройках размера строки выберите «Использовать пользовательскую ширину желоба» и введите значение «1», которое удаляет все пространство между модулями, и установите для ширины значение «авто» для всех размеров экрана.
Теперь, чтобы продолжить создание отзывчивого всплывающего меню в Divi с помощью этого метода, а также чтобы упростить вам задачу и избавить вас от просмотра чрезмерного количества скриншотов, мы советуем вам продолжить обучение Elegant Themes и создать полный -вздутое меню гамбургера с их руководством:
Загружая видео, вы соглашаетесь с политикой конфиденциальности YouTube.
Узнать больше
Загрузить видео
Всегда разблокировать YouTube
Если вы уже знакомы с Плагин Divi Areas Pro, наше премиальное расширение Divi , вы, наверное, знаете, как легко создавать суперкрутые всплывающие окна и всплывающие окна, реагирующие на мобильные устройства. Если нет, мы приглашаем вас сразу же подписаться на годовой план
Затем перейдите на панель инструментов Divi Areas Pro, добавьте новую область Divi и назовите ее соответствующим образом. На этом этапе первое, что вам нужно сделать, это создать содержимое всплывающего окна.
Итак, давайте рассмотрим несколько быстрых шагов, которые помогут вам подготовить всплывающее меню.
Во-первых, установите фон и тень блока для Divi Area . Если есть определенная тема, которую вы хотите затронуть в меню, вы можете выбрать соответствующий цвет фона, графику или изображение.
Следующим шагом будет добавление содержимого во всплывающее окно . Начните с названия/заголовка меню, в котором выделяются элементы.
Теперь добавьте новую строку, установите положение содержимого в середине и вставьте модуль меню .
Теперь вам нужно приступить к настройке меню. По умолчанию в меню стоит белая фон , но если вы хотите использовать другой цвет, вы можете выбрать его с помощью палитры цветов.
На вкладке «Дизайн» находятся параметры стиля меню, где вы можете изменить внешний вид каждого аспекта меню, начиная с макета и заканчивая интервалами, текстом, значками, логотипом, рамкой, фильтрами и анимацией.
Когда вы перейдете к параметрам вкладки Advanced , вы найдете функции CSS и HTML, которые могут быть чрезвычайно полезными, если вы хотите выйти на новый уровень, особенно для более опытных веб-дизайнеров.
Теперь, чтобы правильно использовать всплывающее меню обратного отсчета, вам нужно настроить триггер Divi Area, который будет отображать всплывающее меню после определенного действия на стороне пользователя.
На панели управления Divi Area прокрутите вниз до настроек и назначьте Area как
Затем перейдите к параметрам «Триггер» и перейдите к «Автоматические триггеры», выберите нужный триггер и укажите, при каком действии пользователя должно появляться всплывающее меню.
Теперь все настроено и готово к публикации области и использованию всплывающего меню. Как только вы нажмете кнопку «Опубликовать», вы сразу же сможете протестировать всплывающее окно на своих страницах Divi.
