Как создать мобильное сворачивающееся вложенное меню с помощью конструктора тем Divi

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

• Настройка вашего меню и присвоение правильных классов вашим пунктам меню
• Создание меню с помощью построителя тем и модуля меню
• Добавление собственного кода в конструктор тем

Вы также сможете бесплатно скачать файл шаблона JSON! Давайте перейдем к этому.

Предварительный просмотр

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

Мобильный

Рабочий стол

Скачать The Global Header Design БЕСПЛАТНО

Важно: после загрузки и загрузки файла JSON в конструктор тем вам все равно придется вручную настроить меню с использованием правильных классов CSS + добавить модуль кода с кодом CSS и JQuery (шаги 1 и 3 этой публикации). .

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

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

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

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

СКАЧАТЬ

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

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

1. Настройте свое меню

Добавление пунктов меню и пунктов подменю

Первое, что вам нужно сделать, это создать свое меню. Добавьте нужные подпункты.

Добавить параметр класса CSS

После того, как вы добавили пункты меню, вы можете включить опцию классов CSS, нажав «Параметры экрана» и включив «Классы CSS».

Добавить класс CSS в пункты меню первого уровня, содержащие пункты подменю

Продолжите, добавив класс CSS к пунктам меню первого уровня, которые содержат пункты подменю. В этом примере это означает добавление класса CSS в пункты меню «Сервис» и «Портфолио».

• Классы CSS: первый уровень

Добавить класс CSS в пункты меню второго уровня и сохранить меню

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

• Классы CSS: второй уровень

2. Перейдите в Divi Theme Builder и начните создание глобального заголовка.

Перейти в конструктор тем Divi

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

Начать создание глобального заголовка

Затем начните создавать свой глобальный заголовок.

Настройки раздела

Интервал

Внутри редактора шаблонов вы заметите раздел. Откройте этот раздел и удалите все отступы по умолчанию сверху и снизу.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Индекс Z

Увеличьте также z-индекс раздела.

• Индекс Z: 99999

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и позвольте строке занять всю ширину экрана.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Затем удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Главный элемент

Убедитесь, что все модули отображаются рядом друг с другом на экранах меньшего размера, добавив одну строку кода CSS к основному элементу строки.

display: flex;

Столбец 1

Интервал

Затем откройте настройки столбца 1 и добавьте несколько настраиваемых полей сверху и снизу.

• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей

Граница

Также добавьте немного радиуса границы.

• Вверху справа: 100 пикселей
• Внизу справа: 100 пикселей

Коробка Тень

И завершите настройки столбца 1, добавив тонкую тень блока.

• Горизонтальное положение тени блока: 20 пикселей
• Сила размытия тени коробки: 50 пикселей
• Цвет тени: rgba (0,0,0,0.15)

Колонка 2

Интервал

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

• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей

Колонка 3

Градиентный фон

Переходим к следующему и последнему столбцу. Добавьте градиентный фон.

• Цвет 1: # 26c699
• Цвет 2: # abe02f
• Направление градиента: 116 градусов

Интервал

Затем добавьте пользовательские верхние и нижние отступы.

• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей

Граница

Затем перейдите к настройкам границы и внесите следующие изменения:

• Вверху слева: 100 пикселей
• Внизу слева: 100 пикселей

Коробка Тень

Завершите настройку столбца, добавив тень блока.

• Горизонтальное положение тени блока: -26 пикселей
• Вертикальное положение тени блока: 0 пикселей
• Цвет тени: # d2ff0c

Добавить модуль изображения в столбец 1

Загрузить логотип

Пора добавить модули, начиная с модуля изображения в столбце 1. Загрузите свой логотип.

Выравнивание

Затем измените выравнивание изображения модуля.

• Выравнивание изображения: по центру

Размеры

Завершите настройки модуля, изменив ширину для разных размеров экрана.

• Ширина: 120 пикселей (рабочий стол), 80 пикселей (планшет и телефон)

Добавить модуль меню в столбец 2

Выберите меню

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

Удалить цвет фона

Затем удалите цвет фона модуля.

Макет

Затем измените настройки макета.

• Стиль: по центру
• Направление раскрывающегося меню: вниз

Текст меню

Также стилизуйте текст меню.

• Шрифт меню: Montserrat
• Толщина шрифта меню: средний
• Цвет текста меню: # 000000
• Размер текста меню: 13 пикселей
• Расстояние между буквами меню: 1 пиксель

Выпадающее меню

Продолжите, изменив некоторые цвета в настройках раскрывающегося меню.

• Цвет фона выпадающего меню: #ffffff
• Цвет строки раскрывающегося меню: # 000000

Иконки

И завершите настройку модуля, изменив цвет значка гамбургер-меню в настройках значков.

• Цвет значка меню гамбургера: # 000000

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

Добавить содержимое

Переходим к следующему и последнему модулю, который является текстовым модулем в столбце 3. Добавьте какую-нибудь копию по вашему выбору.

Добавить ссылку

Далее добавьте ссылку на модуль.

• URL ссылки на модуль: #

Настройки текста

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

• Шрифт текста: Монтсеррат
• Толщина шрифта текста: полужирный
• Цвет текста: #ffffff
• Размер текста: 16 пикселей
• Высота текстовой строки: 1em
• Выравнивание текста: по центру

Интервал

Завершите настройки модуля, добавив верхнюю границу.

• Верхнее поле: 10 пикселей

3. Добавьте функциональность в меню с помощью модуля кода.

Добавить модуль кода в столбец 2

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

Вставить код CSS и JQuery

Затем добавьте код CSS и JQuery. Убедитесь, что вы разместили код CSS между тегами стиля и код JQuery между тегами сценария.

.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}

(function($) {
      
function setup_collapsible_submenus() {
    
var FirstLevel = $('.et_mobile_menu .first-level > a');
  
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');  
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
  

}
      
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
 
})(jQuery);

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.

Мобильный

Рабочий стол

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

В этом посте мы показали вам, как применить сворачивающееся вложенное меню к вашему глобальному заголовку в построителе тем. Мы начали с создания основной строки меню, продолжили с разработки нашего заголовка внутри Theme Builder с помощью модуля меню и завершили учебник, добавив собственный код, который заставляет эффект работать. Мы надеемся, что вам понравился этот урок, и если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии в разделе комментариев ниже!

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