Как создать кнопку раскрывающегося меню с помощью модуля меню полной ширины Divi

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

В этом уроке мы покажем вам, как создать кнопку раскрывающегося меню, используя модуль меню полной ширины Divi. Для этого сначала создадим меню в WordPress. Затем мы воспользуемся модулем полноразмерного меню Divi, чтобы отобразить это меню с настраиваемыми стилями с помощью конструктора Divi и небольшого настраиваемого CSS. В результате появляется кнопка раскрывающегося меню, которая одновременно практична и элегантна.

Давайте начнем.

Sneak Peek

Вот краткий обзор кнопки раскрывающегося меню, которую мы создадим в этом руководстве.

Рабочий стол (меню опускается при наведении курсора)

Планшет и телефон (меню раскрывается при нажатии)

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Подпишитесь на наш канал Youtube

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder. Пользовательский CSS был добавлен в модуль кода в отдельном разделе внизу макета.

Давайте перейдем к руководству, ладно?

Что вам нужно для начала

Для начала, если вы еще этого не сделали, установите и активируйте установленную тему Divi (или плагин Divi Builder, если тема Divi не используется). Мы будем использовать конструктор Divi в интерфейсе для разработки кнопки раскрывающегося меню.

Вот и все!

Создание меню в WordPress

Прежде чем мы начнем создавать раскрывающееся меню с помощью Divi Builder, мы должны сначала создать меню WordPress, которое мы хотели бы использовать для модуля меню полной ширины. Для этого перейдите в панель управления WordPress и выберите «Внешний вид»> «Меню». Затем создайте новое меню, щелкнув ссылку «Создать новое меню», введя имя меню и нажав кнопку «Создать меню».

На данный момент вы можете создать несколько пользовательских ссылок с «#» в качестве заполнителя URL-адреса вместе с текстом ссылки.

Структурируйте элементы меню таким образом, чтобы у пункта меню верхнего уровня был текст ссылки «Узнать больше» с тремя подпунктами подменю под ним.

После этого не забудьте сохранить меню.

Как создать кнопку раскрывающегося меню с помощью модуля меню полной ширины Divi

Как только меню создано, мы можем приступить к разработке кнопки раскрывающегося меню с помощью Divi. Чтобы начать работу, создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Создание макета содержимого

Сначала добавьте строку из одного столбца в обычный раздел по умолчанию.

Добавить текстовый модуль

Затем добавьте текстовый модуль в строку со следующим содержимым:

<h1>Dropdown Menu Button</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

После этого обновите настройки дизайна следующим образом:

Заполнение раздела

Затем обновите настройку раздела следующим образом:

• Padding: 0px снизу

Межстрочный интервал и граница

После обновления заполнения раздела откройте настройки строки и задайте для строки отступ и небольшую границу.

• Прокладка: 10vw сверху, 10vw снизу, 5vw слева, 5vw справа
• Ширина границы: 1 пикс.

Создание кнопки раскрывающегося меню

Чтобы создать кнопку раскрывающегося меню, мы будем использовать модуль меню полной ширины. Это позволит нам добавить меню, которое мы создали ранее.

Добавление полноэкранного меню

Чтобы создать модуль меню с полной шириной, добавьте новый раздел с полной шириной под текущим обычным разделом.

Затем добавьте в строку модуль меню полной ширины.

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

Затем удалите белый цвет фона по умолчанию для меню.

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

Обновить дизайн полноразмерной секции

Откройте настройки полноразмерного раздела и обновите следующее:

• Цвет фонового градиента слева: # 0047d6
• Правый цвет фонового градиента: # 45b2ff

• Максимальная ширина: 240 пикселей
• Выравнивание секции: по центру

Я устанавливаю максимальную ширину раздела на 240 пикселей, потому что это будет соответствовать ширине раскрывающегося меню по умолчанию в Divi. Это также хороший размер для кнопки на рабочем столе и в мобильном телефоне.

• Закругленные углы: 5 пикселей

На вкладке «Дополнительно» добавьте следующий класс CSS, переполнение и индекс Z.

• Класс CSS: раскрывающаяся кнопка
• Горизонтальный перелив: видимый
• Вертикальный перелив: видимый
• Индекс Z: 14

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

Разработайте полноразмерное меню

Теперь мы готовы разработать модуль меню полной ширины. Откройте настройки модуля полноразмерного меню и обновите следующее:

• Сделать ссылки меню на полную ширину: ДА
• Цвет текста раскрывающегося меню: #ffffff
• Цвет текста мобильного меню: #ffffff
• Выравнивание текста: по центру
• Цвет фона выпадающего меню: # 45b2ff
• Цвет строки раскрывающегося меню: #ffffff
• Цвет фона мобильного меню: # 45b2ff

• Шрифт меню: Encode Sans Semi Condensed
• Толщина шрифта меню: полужирный
• Цвет текста меню: #ffffff
• Размер текста меню: 16 пикселей
• Расстояние между буквами меню: 2 пикселя
• Анимация раскрывающегося меню: развернуть

Размещение кнопки раскрывающегося списка

Чтобы кнопка перекрывала нижнюю границу, нам нужно добавить отрицательное верхнее поле ровно на половину высоты кнопки.

• Поля: -40,5 пикселей по верху

Почти готово

Вот результат ...

Как видите, пространство при наведении курсора еще не занимает всю область кнопок, а раскрывающееся меню все еще находится справа. Чтобы исправить это, мы можем добавить собственный CSS.

Добавление собственного CSS

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

Без идентификатора CSS приведенный ниже CSS не будет работать.

Чтобы добавить собственный CSS, откройте настройки страницы и вставьте следующий код в область ввода Custom CSS.

.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav > ul {
  padding-top: 0px !important;
}

.dropdown-button .fullwidth-menu li > a {
  padding-bottom: 0px;
  line-height: 81px;
}

.dropdown-button .fullwidth-menu li li a {
  padding: 6px 0px;
  line-height: 1.6em;
}

.dropdown-button .et_mobile_menu li a:hover, .nav ul li a:hover, .dropdown-button .fullwidth-menu a:hover {
  opacity: 1;
}

.dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {
  padding: 0 0 !important;
}

.dropdown-button .fullwidth-menu li {
  display: block;
}

.dropdown-button .fullwidth-menu .menu-item-has-children > a:first-child:after {  
  right: 20px;
}

Вот окончательный результат

Настройка меню на мобильном устройстве

Прямо сейчас меню будет использовать мобильную версию с кликабельным значком гамбургера, который переключает мобильное меню на открытие и закрытие. Вот как это выглядит.

Чтобы исправить меню так, чтобы оно соответствовало настольной версии, нам нужно добавить собственный CSS. Откройте настройки страницы и добавьте следующий настраиваемый CSS прямо под CSS, который мы добавили в данный момент.

@media (max-width: 981px){
  .dropdown-button .et_pb_fullwidth_menu .et_pb_row {
    width: 100%;
    }
  .dropdown-button .mobile_menu_bar {
    height: 81px;
  }
  .dropdown-button .mobile_menu_bar:before {
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #ffffff!important;
    letter-spacing: 2px !important;
    content: "Learn More";
    line-height: 81px;
    top: 0px;
}
  .dropdown-button .mobile_menu_bar:after{
    position: absolute;
    line-height: 81px;
    font-family: ETmodules;
    font-size: 20px;
    font-weight: 800;
    content: "3";
    padding-left: 20px;
    color: #ffffff;
}   
  .dropdown-button .et_first_mobile_item > a {
    display: none;
  }

}

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

Прямо сейчас текстовое содержимое раскрывающейся кнопки мобильного устройства гласит «Подробнее». Но мы можем изменить это, обновив следующую строку CSS под псевдоэлементом: before для строки мобильного меню:

content: "Learn More";

Например, если вы хотите, чтобы он читался как «Меню», вы бы изменили строку CSS на следующую:

content: "Menu";

Конечный результат

Вот окончательный результат.

Рабочий стол (меню опускается при наведении курсора)

Планшет и телефон (меню раскрывается при нажатии)

Дополнительные подпункты

И вы даже можете добавить элементы подменю! Просто обновите меню на странице редактора меню, и все готово.

Последние мысли

Создание кнопки раскрывающегося меню с использованием модуля полноразмерного меню Divi включает в себя несколько ключевых шагов. Сначала мы создаем меню в WordPress, которое хотим вставить в модуль. Затем мы используем конструктор Divi для и и настраиваем модуль меню полной ширины по своему вкусу. Затем мы добавляем собственный CSS, чтобы улучшить дизайн как на настольных компьютерах, так и на мобильных устройствах. Результатом является красивое (и полезное) раскрывающееся меню, которое развертывается при наведении курсора на рабочий стол и при щелчке мышью на мобильном устройстве. Надеюсь, вы найдете это полезным дополнением к своему набору инструментов для дизайна.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!