Хотели бы вы проявить творческий подход, создав расширяемое липкое меню при наведении с помощью Divi ?
В этом уроке мы покажем вам, как создать расширяемое липкое меню при наведении с помощью от Divi's Mechanic Layout Pack .
Мы разработаем два разных образца дизайна, которые вы сможете воссоздать с нуля и применить к любому типу Веб-сайт что вы создаете!
Меню будет отображаться при наведении на рабочем столе и активироваться при нажатии на мобильных устройствах.
Давайте!
обследование
Прежде чем углубиться в этот урок, давайте быстро взглянем на результат на разных размерах экрана.
Пример 1
Настольный компьютер
Мобильный телефон
Скачайте DIVI прямо сейчас!!!
Пример 2
Настольный компьютер
Мобильный телефон
Скачайте DIVI прямо сейчас!!!
Общие шаги
Отключить фиксированную навигацию
Доступ к параметрам темы Divi
Мы начнем с некоторых общих шагов. Эти шаги одинаковы для обоих примеров и необходимы для достижения желаемого результата.
Если вы планируете использовать расширяющееся липкое меню в нижней части страницы, возможно, вы захотите убрать строку главного меню вверху.
Читайте также: Как создавать собственные наложения изображений в Divi
Для этого вам придется пройти Divi >> Параметры темы из панели управления WordPress
Отключить фиксированную навигацию
Там вам придется деактивировать «Фиксированная панель навигации» чтобы убедиться, что в верхней части страницы не осталось места.
- Фиксированная панель навигации: отключено
Скрыть строку главного меню на странице
Открыть настройки страницы
Перейдите на страницу, на которую вы хотите добавить расширяемое липкое меню, и откройте настройки страницы.
Добавить пользовательский CSS
Скройте главное меню, добавив на свою страницу следующие строки кода CSS.
#main-header {
display: none;
}
Добавить новый раздел в конце страницы
Независимо от того, какой пример вы хотите воссоздать, некоторые основные шаги остаются прежними. Первый шаг — добавить обычный раздел внизу страницы.
расстояние
Откройте настройки раздела и измените следующие настройки во вкладке Проект под опцией Расстояние.
- Отступы (сверху и снизу): 0 пикселей
Добавить новую строку
Структура колонны
Продолжите, добавив новую строку, используя следующую структуру столбцов:
калибровка
Пока не добавляя никаких модулей, откройте настройки линии и измените следующие настройки, во вкладке Проект под опцией Калибровка
- Использовать пользовательскую ширину желоба: ДА
- Ширина желоба: 1
- Ширина: 100%
- Максимальная ширина: 100%
расстояние
Затем удалите все верхние и нижние отступы по умолчанию под опцией Расстояние.
- Отступы (сверху и снизу): 0 пикселей
Основной элемент
Мы позволяем всей строке прикрепляться к нижней части нашей страницы, добавляя две простые строки кода CSS к основному элементу строки.
bottom: 0px;
position: fixed;
Z-индекс
И мы позаботимся о том, чтобы строка (и текстовый модуль, который мы добавим на следующих шагах) оставалась поверх всего. содержание страницы, увеличив индекс Z. Разверните параметр Позиция.
- Z-индекс: 99
Добавить модуль кода в столбец
Добавьте код CSS между тегами стиля
Последняя часть общих шагов — добавить модуль кода в новую строку. Код CSS, который мы добавляем в этот модуль кода, поможет нам добиться эффекта раскрытия при наведении.
Смотрите также: Как создать меню вращающегося колеса при наведении в Divi
Вставьте в модуль следующие строки кода 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 XNUMX XNUMX, XNUMX)
Градиентный фон
А также добавить градиентный фон по умолчанию.
- Цвет слева: rgba(255,255,255,0 XNUMX XNUMX)
- Правильный цвет: #ffffff
- Позиция справа: 60%
Настройки текста по умолчанию
Продолжить, перейдя на вкладку Проект и изменение настроек текста.
- Шрифт текста: Кханд
- Вес шрифта: полужирный
- Цвет текста: #021827
- Размер текста: 3vh
- Ориентация: Центр
Настройки наведения текста
Измените некоторые настройки текста при наведении.
- Цвет текста (при наведении: rgba(255,255,255,0)
- Размер текста (при наведении): 0vh
Настройки текста ссылки
Далее перейдите в настройки текста ссылки и измените цвет текста ссылки.
- Цвет текста ссылки: #000000
Список значений по умолчанию (рабочий стол)
Переключитесь на настройки текста списка по умолчанию и настройте его по своему усмотрению. Убедитесь, что вы используете «0px» для размера текста по умолчанию.
- Шрифт ненумерованного списка: Khand
- Стиль шрифта списка: TT
- Выравнивание текста списка: по центру
- Цвет неупорядоченного текста: rgba(255,255,255,0)
- Размер текста неупорядоченного списка: 0px
- Вес текста списка: 0em
- Позиция стиля неупорядоченного списка: Внутри
Настройки списка при наведении
Затем измените некоторые значения при наведении, чтобы элементы меню отображались.
- Цвет текста списка (при наведении): #000000
- Размер текста неупорядоченного списка (при наведении): 2vh
- Высота текста неупорядоченного списка (при наведении): 2,1 em
Интервал по умолчанию (рабочий стол)
Затем перейдите к настройкам интервала (опция Расстояние) и придайте форму текстовому модулю.
- Поле (слева и справа): 45vw (рабочий стол), 39vw (планшет), 33vw (телефон)
- Заполнение (сверху и снизу): 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)
Расстояние при наведении
Измените эти же значения при наведении.
- Маржа (слева и справа): 14vw
- Прокладка (сверху и снизу): 8vw
Граница по умолчанию (рабочий стол)
Перейдите к настройкам границы и убедитесь, что каждый из закругленных углов имеет значение «0px».
Граница при наведении
Включите параметры наведения на закругленных углах и измените значения на верхний левый и верхний правый.
- Вверху слева: 50vw
- Вверху справа: 50vw
Shadow box
Продолжайте, придавая глубину модулю с помощью тени блока. Это гарантирует, что меню не останется незамеченным на странице.
- Box Shadows Blur Strength: 1000px
- Цвет тени: rgba (0,0,0,0.68)
Класс CSS
Мы также добавляем в модуль класс CSS.
- Класс CSS: DT-меню
Переходы
Наконец, уменьшите продолжительность перехода в настройках перехода.
- Продолжительность перехода: 100 мс
Пример дизайна №2
Добавьте текстовый модуль в столбец
Добавить контент
Давайте перейдем ко второму примеру! Здесь мы снова добавим '≡Меню' используя стиль текста абзаца и элементы меню, используя неупорядоченный список. Мы также добавим ссылку на каждый из пунктов меню в отдельности.
Цвет фона по умолчанию (рабочий стол)
Зайдите в настройки фона и измените цвет фона.
- Фон: #ffffff
Цвет фона при наведении
Изменение цвета фона при наведении.
- Фон (при наведении): #f71535
Настройки текста по умолчанию (рабочий стол)
Затем перейдите на вкладку Проект и внести некоторые изменения во внешний вид текста.
- Шрифт текста: Кханд
- Вес шрифта: полужирный
- Цвет текста: #021827
- Размер текста: 3vh
Настройки текста при наведении
Измените эти настройки при наведении.
- Цвет текста (при наведении): rgba (255,255,255,0 XNUMX XNUMX)
- Размер текста (при наведении): 0vh
Настройки текста ссылки
Перейдите в настройки текста и измените цвет текста ссылки.
- Цвет текста ссылки: #ffffff
Настройки текста списка по умолчанию
Также измените настройки дизайна элементов ненумерованного списка.
- Шрифт ненумерованного списка: Khand
- Стиль шрифта ненумерованного списка: TT
- Выравнивание текста списка: по центру
- Цвет текста неупорядоченного списка: rgba(255,255,255,0)
- Размер текста списка: 0px
- Высота строки ненумерованного списка: 0em
- Позиция стиля неупорядоченного списка: Внутри
Настройки списка при наведении
И изменить некоторые из этих значений при наведении.
- Цвет текста неупорядоченного списка: #ffffff
- Размер текста списка: 2vh
- Высота строки ненумерованного списка: 2,1 em
Интервал по умолчанию (рабочий стол)
Затем перейдите к настройкам интервала и дайте модулю немного места.
- Поле (справа): 88 vw (настольный компьютер и планшет), 71 vw (телефон)
- Прокладка (сверху): 6 vw (рабочий стол)), 10 vw (планшет), 18 vw (телефон)
- Прокладка (снизу): 4 vw (рабочий стол), 10 vw (планшет), 12 vw (телефон)
- Левая прокладка: 1vw
Расстояние при наведении
Изменение значений при наведении.
- Поле (справа): 59vw
- Набивка: (сверху) 13vw, (снизу) 8vw, (слева) 1vw, (справа) 13vw
граница
И чтобы создать этот дизайн четверти круга, мы собираемся изменить верхнюю правую границу в настройках границы.
- Вверху справа: 50vw
Shadow box
Мы также добавим тень блока, чтобы создать глубину на странице.
- Сила размытия тени коробки: 1000 пикселей
- Цвет тени: rgba (0,0,0,0.68)
Класс CSS
Далее мы добавим класс CSS на вкладку Фильтр.
- Класс CSS: DT-меню
Переходы
И уменьшить продолжительность перехода во вкладке Фильтр для создания быстрого перехода.
- Продолжительность перехода: 100 мс
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
Пример # 1
офис
Мобильный телефон
Скачайте DIVI прямо сейчас!!!
Пример # 2
Настольный компьютер
Мобильный телефон
Скачайте DIVI прямо сейчас!!!
Заключение
В этой статье мы показали вам, как создать расширяемое липкое меню, используя из пакета макетов Divi Mechanic. Мы рассмотрели два разных примера дизайна, которые вы можете изменить и использовать на любом типе Веб-сайт что вы создаете!
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты. Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
