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

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

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

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

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

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

Пример # 1

Рабочий стол

Мобильный

Пример # 2

Рабочий стол

Мобильный

Общие шаги

Отключить фиксированную навигацию

Перейти к параметрам темы Divi

Начнем с некоторых общих шагов. Эти шаги одинаковы для обоих примеров и необходимы для достижения желаемого результата.

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

Отключить фиксированную навигацию

Там вы захотите отключить фиксированную опцию панели навигации, чтобы убедиться, что вверху страницы не осталось места.

• Фиксированная панель навигации: отключена

Скрыть основную строку меню на странице

Открыть настройки страницы

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

Добавить собственный CSS

Скройте главное меню, добавив на страницу следующие строки кода CSS.

#main-header {
display: none;
}

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

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

Интервал

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

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

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

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

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

Размеры

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

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

Интервал

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

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

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

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

bottom: 0px;
position: fixed;

Индекс Z

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

• Индекс Z: 99

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

Добавление кода CSS между тегами стилей

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

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

Воссоздать пример №1

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

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

Теперь, когда мы прошли все этапы, мы можем сосредоточиться на двух разных примерах дизайна, начиная с первого! Добавьте текстовый модуль в столбец вашей строки. В поле содержимого мы используем стиль абзаца, чтобы показать копию «≡ Меню». Затем мы помещаем все пункты меню в неупорядоченный список. Мы также добавим ссылку к каждому заголовку страницы по отдельности.

Цвет фона по умолчанию

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

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

Цвет фона при наведении

Измените этот цвет фона при наведении курсора.

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

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

И также добавьте градиентный фон по умолчанию.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: #ffffff
• Конечная позиция: 60%

Настройки текста по умолчанию

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

• Шрифт текста: Khand
• Толщина шрифта текста: полужирный
• Цвет текста: # 021827
• Размер текста: 3vh
• Ориентация текста: по центру

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

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

• Цвет текста: rgba (255,255,255,0)
• Размер текста: 0vh

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

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

• Цвет текста ссылки: # 000000

Настройки текста списка по умолчанию

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

• Шрифт неупорядоченного списка: Khand
• Стиль шрифта неупорядоченного списка: прописные
• Выравнивание текста неупорядоченного списка: по центру
• Цвет текста неупорядоченного списка: rgba (255,255,255,0)
• Размер текста неупорядоченного списка: 0 пикселей
• Высота строки неупорядоченного списка: 0em
• Положение стиля неупорядоченного списка: внутри

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

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

• Цвет текста неупорядоченного списка: # 000000
• Размер текста неупорядоченного списка: 2vh
• Высота неупорядоченной линии: 2,1 м

Интервал по умолчанию

Затем перейдите к настройкам интервалов и придайте текстовому модулю форму.

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

Расстояние при наведении

Измените эти же значения при наведении курсора.

• Левое поле: 14vw
• Правое поле: 14vw
• Верхняя обивка: 8vw
• Нижняя обивка: 8vw

Граница по умолчанию

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

Граница при наведении

Включите параметры наведения на закругленные углы и измените значения в верхнем левом и правом верхнем углу.

• Вверху слева: 50vw
• Вверху справа: 50vw

Коробка Тень

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

• Сила размытия тени коробки: 1000 мс
• Цвет тени: rgba (0,0,0,0.68)

CSS-класс

Мы также добавляем в модуль класс CSS.

• Класс CSS: dt-menu

Переходы

И последнее, но не менее важное: уменьшите продолжительность перехода в настройках переходов.

• Продолжительность перехода: 100 мс

Воссоздать пример №2

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

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

Переходим ко второму примеру! Здесь мы снова собираемся добавить «≡ Menu», используя стиль текста абзаца, и пункты меню, используя неупорядоченный список. Мы также добавим ссылку на каждый из пунктов меню по отдельности.

Цвет фона по умолчанию

Переходим к настройкам фона и меняем цвет фона.

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

Цвет фона при наведении

Измените цвет фона при наведении.

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

Настройки текста по умолчанию

Затем перейдите на вкладку «Дизайн» и внесите некоторые изменения во внешний вид копии абзаца.

• Шрифт текста: Khand
• Цвет текста: # 021827
• Размер текста: 3vh

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

Измените эти настройки при наведении курсора.

• Цвет текста: rgba (255,255,255,0)
• Размер текста: 0vh

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

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

• Цвет текста ссылки: #ffffff

Настройки текста списка по умолчанию

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

• Шрифт неупорядоченного списка: Khand
• Стиль шрифта неупорядоченного списка: прописные
• Выравнивание текста неупорядоченного списка: по центру
• Цвет текста неупорядоченного списка: rgba (255,255,255,0)
• Размер текста неупорядоченного списка: 0 пикселей
• Высота строки неупорядоченного списка: 0em
• Положение стиля неупорядоченного списка: внутри

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

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

• Цвет текста неупорядоченного списка: #ffffff
• Размер текста неупорядоченного списка: 2vh
• Высота строки неупорядоченного списка: 2.1em

Интервал по умолчанию

Затем перейдите к настройкам интервалов и дайте модулю немного места.

• Правое поле: 88vw (настольный компьютер и планшет), 71vw (телефон)
• Верхняя прокладка: 6vw (рабочий стол), 10vw (планшет), 18vw (телефон)
• Нижняя прокладка: 4vw (рабочий стол), 10vw (планшет), 12vw (телефон)
• Левый отступ: 1vw

Расстояние при наведении

Измените значения при наведении.

• Правое поле: 59vw
• Верхняя обивка: 13vw
• Нижняя обивка: 8vw
• Левый отступ: 1vw
• Правое заполнение: 13vw

Граница

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

• Вверху справа: 50vw

Коробка Тень

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

• Сила размытия тени коробки: 1000 пикселей
• Цвет тени: rgba (0,0,0,0.68)

CSS-класс

Затем мы добавим класс CSS на вкладку «Дополнительно».

• Класс CSS: dt-menu

Переходы

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

• Продолжительность перехода: 100 мс

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

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

Пример # 1

Рабочий стол

Мобильный

Пример # 2

Рабочий стол

Мобильный

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

В этом посте мы показали вам, как создать расширяющееся липкое меню с помощью пакета Divi Mechanic Layout Pack. Мы рассмотрели два разных примера дизайна, которые вы можете воссоздать и использовать на любом веб-сайте, который вы создаете! Мы надеемся, что вам нравится эта текущая проектная инициатива Divi, в рамках которой мы каждую неделю стараемся добавлять что-то дополнительное в ваш набор инструментов для дизайна. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!

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