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

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

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

Давайте приступим к делу!

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

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

Hover Modus

Рабочий стол

Мобильный

Нажмите Modus

Рабочий стол

Мобильный

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

Добавить новую пустую страницу и включить Divi Builder

Первое, что вам нужно сделать, это создать новую пустую страницу. Дайте своей странице название и переключитесь на Divi Builder.

Загрузить целевую страницу достопримечательностей

После того, как вы включили Divi Builder, загрузите макет целевой страницы Sightseeing Layout Pack.

2. Добавьте новый регулярный раздел в конец страницы.

Как только основная строка меню будет скрыта, мы можем начать добавлять рекламное меню. Для этого мы собираемся добавить новый обычный раздел внизу нашей страницы.

Фоновый цвет

Откройте настройки раздела и добавьте слегка прозрачный белый цвет фона.

• Цвет фона: rgba (255,255,255,0.98)

Интервал

Перейдите на вкладку дизайна и удалите все стандартные верхние и нижние отступы раздела.

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

Тень бокса по умолчанию

Добавьте тень блока к следующему разделу.

• Сила размытия тени коробки: 18 пикселей
• Цвет тени: # 383838

Hover Box Shadow

И измените силу размытия тени блока при наведении курсора.

• Сила размытия тени коробки: 1000 пикселей

Скрыть переполнение раздела и увеличить индекс Z

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

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый
• Индекс Z: 9999

3. Убедитесь, что все содержимое меню раздела создано с использованием Vw и умещается в 100 единиц высоты видового экрана по всем размерам экрана.

Добавить строку №1

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

После того, как вы завершили основные настройки раздела, пришло время добавить весь контент, который вы хотите отобразить в меню. Вы можете создать любой дизайн, который хотите, используя элементы дизайна Divi и встроенные параметры, но вы должны убедиться, что все это соответствует высоте 100vh для всех размеров экрана. Для этого мы собираемся использовать единицу ширины области просмотра на протяжении всего процесса сборки и настраивать значения для разных размеров экрана. Начните с добавления новой строки в свой раздел, используя следующую структуру столбцов:

Размеры

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

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

Интервал

Перейдите к настройкам интервала и удалите все отступы по умолчанию сверху и снизу.

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

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

Добавить символ

Продолжите, добавив текстовый модуль в столбец строки. Добавьте символ '=' в поле содержимого или используйте любой другой символ по вашему выбору.

Фоновый цвет

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

• Цвет фона: # 000000

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

Перейдите на вкладку дизайна и также измените настройки текста.

• Шрифт текста: Open Sans
• Выравнивание текста: по центру
• Цвет текста: #ffffff
• Размер текста: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
• Высота текстовой строки: 1em

Интервал

Мы также добавляем немного места вверху и внизу модуля, используя следующие настраиваемые значения заполнения:

• Верхняя подкладка: 2,5 Вт (рабочий стол), 3,5 Вт (планшет), 5 Вт (телефон)
• Нижняя обивка: 2,5 Вт (рабочий стол), 3,5 Вт (планшет), 5 Вт (телефон)

Добавить строку №2

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

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

Размеры

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

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

Интервал

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

• Верхняя прокладка: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)
• Нижняя прокладка: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)

Отображать

Чтобы оба столбца оставались рядом друг с другом на экранах меньшего размера, мы собираемся добавить одну строку кода CSS к основному элементу строки.

display: flex;

Добавить модуль Blurb в столбец 1

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

Пора начинать добавлять пункты меню! Добавьте новый модуль Blurb в первый столбец строки и введите контент по вашему выбору.

Выбрать значок

Далее выберите значок.

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

И введите ссылку на страницу, соответствующую пункту меню.

• URL ссылки на заголовок: #

Настройки значков

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

• Цвет значка: # ff3314
• Расположение значков: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значков: 2vw (рабочий стол), 3vw (планшет), 4vw (телефон)

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

Также измените настройки текста заголовка.

• Шрифт заголовка: PT Serif
• Стиль шрифта заголовка: подчеркивание
• Цвет подчеркивания заголовка: # ff3314
• Выравнивание текста заголовка: по центру
• Размер текста заголовка: 1.8vw (рабочий стол), 2.3vw (планшет), 3.3vw (телефон)

Настройки основного текста

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

• Шрифт тела: Lato
• Выравнивание основного текста: по центру
• Цвет основного текста: # c6c6c6
• Размер основного текста: 0.9vw (рабочий стол), 1.7vw (планшет), 2.1vw (телефон)
• Высота линии корпуса: 1,8 м

Размеры

И измените ширину модуля для разных размеров экрана, используя следующие значения:

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

Анимация

Мы также убираем анимацию значков в настройках анимации.

• Анимация значков: без анимации

Клонировать модуль Blurb и поместить дубликат в столбец 2

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

Изменить копию

Убедитесь, что вы изменили копию.

Изменить значок

Вместе со значком.

Изменить ссылку

И ссылку на страницу, соответствующую новому пункту меню.

Клонировать строку дважды

Выполнив оба модуля Blurb в строке, вы можете дважды клонировать всю строку.

Измените копию, значок и ссылку для каждого дубликата рекламного объявления по отдельности

Убедитесь, что вы изменили копию, значок и ссылку для каждого из пунктов меню рекламного объявления по отдельности.

4. Сделайте раздел липким

Дефолт

После того, как вы добавили все элементы, которые хотите отобразить в своем разделе, вы можете закрепить его в верхнем левом углу страницы, добавив следующие две строки кода CSS к основному элементу раздела:

position: fixed;
top: 0;

Наведите (Важно!)

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

position: fixed;

5. Выберите метод: A) Меню при наведении курсора или B) Меню при нажатии.

А) Меню при наведении курсора

Размер раздела по умолчанию

В следующей части урока вам нужно будет выбрать предпочтительный метод; меню при наведении или щелчке. На небольших устройствах всплывающее меню будет вести себя как контекстное меню. Если вы решили выбрать опцию наведения, снова откройте настройки раздела, перейдите к настройкам размеров и соответственно измените ширину и высоту вашего меню:

• Ширина: 8vw (настольный), 12vw (планшет), 20vw (телефон)
• Высота: 7,4 мм (рабочий стол), 12 мм (планшет), 16 мм (телефон)

Размер секции при наведении

Измените значения при наведении курсора, чтобы создать раскрывающееся меню.

• Ширина: 80%
• Высота: 100vh

Б) Меню при нажатии

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

Если вы хотите, чтобы меню открывалось только по щелчку, вам нужно открыть текстовый модуль, содержащий символ меню. Перейдите на вкладку «Дополнительно» и добавьте собственный класс CSS.

• Класс CSS: полноразмерный-открытый

Добавить класс CSS в раздел

Затем откройте настройки раздела и добавьте другой класс CSS.

• Класс CSS: плавное преобразование

Размер раздела

Далее мы изменяем ширину и высоту нашего раздела.

• Ширина: 8vw (настольный), 12vw (планшет), 20vw (телефон)
• Высота: 7,4 мм (рабочий стол), 12 мм (планшет), 16 мм (телефон)

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

Добавить новую строку в конец раздела

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

Добавить модуль кода в раздел и вставить код переключения JQuery

Скопируйте следующие строки кода JQuery и вставьте их в поле кода:

<script>
jQuery(function($){
$(".fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});

});
</script>

Добавить собственный код CSS в настройки страницы

И последнее, но не менее важное: откройте настройки страницы и добавьте следующие строки кода CSS:

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

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

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

Режим наведения

Рабочий стол

Мобильный

Нажмите Modus

Рабочий стол

Мобильный

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

В этом посте мы показали вам, как создать красивый модуль рекламного объявления, который расширяется при нажатии / наведении (в зависимости от ваших предпочтений). Это отличный способ добавить дополнительную интерактивность вашему меню, сохраняя при этом отзывчивый результат на экранах всех размеров. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!

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