Хотите создать скользящее и отзывчивое боковое меню в Divi?
При создании Веб-сайт, вы часто задаетесь вопросом, какой тип заголовка создать. Чаще всего в Интернете используется горизонтальная строка меню вверху, но есть и другие варианты, например скользящее меню.
Скользящие меню чаще всего помогают ограничить пространство, занимаемое глобальным заголовком. Таким образом, вы можете разрешить появление выдвижного меню, когда посетителей нажмите на значок гамбургера в правом верхнем углу.
Таким образом, использование выдвижного меню поможет вам добавить дополнительные интерактивные возможности в ваш Веб-сайт.
Поэтому в этом уроке мы покажем вам, как создать его с помощью конструктора тем Divi.
Давайте начнем!
обследование
Прежде чем мы углубимся в этот урок, давайте сначала посмотрим на результат, который мы собираемся получить.
Перейдите в Theme Builder и создайте глобальный заголовок
Перейти к конструктору тем
Чтобы начать, перейдите в Theme Builder из меню Divi на панели управления WordPress и нажмите «Добавить глобальный заголовок».
Создайте глобальный заголовок
Продолжите, выбрав «Создать глобальный заголовок».
Создайте стиль заголовка
Настройки раздела
Фоновый цвет
Оказавшись в редакторе шаблонов, вы заметите раздел. Откройте этот раздел и сделайте цвет фона прозрачным.
- Фон: rgba (255,255,255,0 XNUMX XNUMX)
расстояние
Перейдите на вкладку «Стиль» и удалите все нижние и верхние поля.
- Вершина внутреннего поля: 0px
- Нижнее внутреннее поле: 0px
Пост
Далее мы изменим положение раздела, перейдя на вкладку «Дополнительно» и изменив настройки положения.
- Позиция: Фиксированная
- Расположение: Верхний центр
Добавьте первую строку
Структура колонны
После завершения настройки раздела добавьте новую строку, используя следующую структуру столбцов:
калибровка
Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера следующим образом:
- Максимальная ширина: 97%
- Максимальная ширина: 100%
расстояние
Измените настройки интервала.
- Пиковая внутренняя маржа: 1%
- Нижнее внутреннее поле: 0px
главный элемент
Затем перейдите на вкладку «Дополнительно» и добавьте две строки CSS-кода к основному элементу строки. Это поможет нам вертикально выровнять содержание столбца в нашей строке.
display: flex;
align-items: center;
Добавьте модуль изображения в столбец 1.
Скачать логотип
Пришло время добавить модули, начиная с модуля изображения в столбце 1. Загрузите свой логотип.
Добавьте текстовый модуль в столбец 3.
Добавьте 3 пробела в область содержимого
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
Фоновый цвет
Измените цвет фона модуля.
- Фон: rgba (0,0,0,0.04 XNUMX XNUMX)
Настройки текста
Затем перейдите на вкладку «Стиль» и удалите высоту строки текста. Это поможет нам иметь полный контроль над добавленными областями.
- Высота строки текста: 0em
калибровка
Мы собираемся изменить параметры размера модуля.
- Максимальная ширина: 120 пикселей
- Выравнивание текста: вправо
расстояние
А параметры модуля мы доделаем, превратив модуль в квадрат. Для этого мы будем использовать пользовательские значения отступов в настройках интервала.
- Вершина внутреннего поля: 40px
- Нижнее внутреннее поле: 60px
- Левое внутреннее поле: 40 пикселей
- Внутреннее поле справа: 40 пикселей
Добавьте вторую строку
Структура колонны
Следующий ряд! Мы будем использовать эту строку для разработки всего нашего скользящего меню. Используйте следующую структуру столбцов:
Фоновый цвет
Не добавляя модули, откройте настройки строки и измените цвет фона следующим образом:
- Фон: #e7e0e2
Фоновое изображение
Мы также используем узорчатое фоновое изображение. Вы можете использовать фоновый узор по вашему выбору.
- Размер фонового изображения: фактический размер
- Положение фонового изображения: по центру
- Повторить фоновое изображение: Повторить
калибровка
Затем перейдите на вкладку «Стиль» и соответствующим образом измените настройки размера:
- Использовать пользовательскую ширину желоба: Да
- Расстояние между столбцами: 1
- Максимальная ширина: 20 % (рабочий стол), 40 % (планшет), 60 % (телефон).
- Высота: 100вх
расстояние
Также измените настройки интервала для разных размеров экрана.
- Внутренняя маржа Summit: 10 vw (настольный компьютер), 30 vw (планшет), 40 vw (телефон)
граница
И завершите параметры линии, добавив левую границу.
- Ширина левой границы: 10 пикселей
- Цвет левой границы: #24394a
- Стиль левой границы: Двойной
Добавьте текстовый модуль в столбец
Добавить контент
Пришло время добавить первый пункт меню «Текстовый модуль»! Добавьте копию в коробку содержание.
Добавить ссылку
Продолжите, добавив соответствующую ссылку в пункт меню.
- URL-адрес ссылки на модуль: #
Фоновый цвет
Затем измените цвет фона.
- Фон: rgba (216,210,212,0.35 XNUMX XNUMX)
Настройки текста
Затем перейдите на вкладку Style'3 и измените настройки текста следующим образом:
- Шрифт текста: Домин
- Мягкий светлый текст: Жирный текст
- Цвет текста Текст: #000000
- Текст Размер текста: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Выравнивание текста: по центру
расстояние
Завершите настройку модуля, добавив пользовательские значения интервалов для разных размеров экрана.
- Нижнее поле: 1vw (настольный компьютер), 2vw (планшет), 3vw (телефон)
- Пиковое внутреннее поле: 1vw
- Нижнее внутреннее поле: 1vw
Клонировать текстовый модуль (1 модуль на пункт меню)
После того, как вы закончите текстовый модуль первого пункта меню, вы можете клонировать его столько раз, сколько необходимо. Просто убедитесь, что ваши модули не превышают высоту окна.
Редактировать содержимое и ссылки модуля Duplicate Text
Измените содержание и ссылки каждого модуля повторяющегося текста.
Добавить модуль кнопки в столбец
Добавить копию
Последний модуль, который нам нужен в этом ряду, — это модуль Button. Добавьте копию по вашему выбору.
Добавить ссылку
Также добавьте ссылку.
- URL ссылки на кнопку: #
Alignement
Перейдите на вкладку «Стиль» и измените выравнивание кнопок.
- Выравнивание кнопок: по центру
Настройки кнопки
Продолжите, настроив модуль Button следующим образом:
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 0,7 vw (настольный компьютер), 1,5 vw (планшет), 2,5 vw (телефон)
- Цвет текста кнопки: #000000
- Фоновая кнопка: rgba (0,0,0,0)
- Цвет границы кнопки: #24394a
- Кнопка «Радиус границы»: 0 пикселей
- Расстояние между буквами кнопки: 4 пикселя
- Кнопка шрифта: открыть нет
- Кнопка Soft Light: жирный текст
- Кнопка копирования стиля: TT
расстояние
И завершите настройку модуля, добавив пользовательские значения интервалов для разных размеров экрана.
- Верхнее поле: 5vw
- Максимальное внутреннее поле: 1vw (настольный компьютер), 2vw (планшет), 3vw (телефон)
- Внутреннее поле снизу: 1vw (настольный компьютер), 2vw (планшет), 3vw (телефон)
- Внутреннее поле слева: 1,8 vw (настольный компьютер), 3 vw (планшет), 4 vw (телефон)
- Правое внутреннее поле: 1,8 vw (рабочий стол), 3 vw (планшет), 4 vw (телефон)
Добавьте функцию скольжения
Добавить CSS ID в текстовый модуль значка меню
Теперь, когда у нас есть все элементы, пришло время создать эффект адаптивного скользящего меню! Сначала откройте модуль «Текст» (содержащий области) в третьем столбце первой строки и используйте собственный идентификатор CSS на вкладке «Дополнительно». Мы будем использовать этот идентификатор CSS для создания функции щелчка в нашем коде.
- Идентификатор CSS: слайд-в-открытом
Добавьте класс CSS в строку № 2
Затем откройте вторую строку, перейдите на вкладку «Дополнительно» и добавьте собственный класс CSS. При нажатии линия будет скользить.
- Класс CSS: слайд-в-меню-контейнер
Измените положение строки № 2
Мы также изменим положение этой линии. Обратите внимание, как горизонтальное смещение соответствует ширине линии на разных размерах экрана в настройках размера.
- Позиция: Абсолют
- Расположение: вверху справа
- Горизонтальное смещение: -20% (рабочий стол), -40% (планшет), -60% (телефон)
Изменить непрозрачность линии 2
И доведите непрозрачность до 0 в состоянии по умолчанию.
opacity: 0;
Добавьте модуль кода во второй столбец первой строки.
Вставьте CSS-код
Чтобы создать эффект функции щелчка и стилизовать нотоносцы нашего значка гамбургера, нам понадобится код CSS. Добавьте модуль кода во второй столбец первой строки и поместите следующие строки кода CSS между тегами стиля, как вы можете видеть на экране печати ниже:
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2{
top: 10px;
}
.line-3{
top: 20px;
}
#slide-in-open.open .line-1{
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2{
display: none;
}
#slide-in-open.open .line-3{
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0!important;
opacity: 1!important;
}
.slide-in-menu-container {
-webkit-transition: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
Вставьте код JQuery
Нам также нужно будет добавить немного JQuery для функции щелчка. Убедись, что ты поместите код между тегами скрипта , как вы можете видеть на экране печати ниже:
jQuery (функция ($) { $ ('# слайд-в-открытии'). нажмите (функция () { $ (это). toggleClass ('открыть'); $ ('.слайд-в-меню-контейнер') .toggleClass('слайд-меню'); }); });
Сохранить изменения конструктора тем и отобразить результат на веб-сайте
После того, как вы завершили все элементы вашего глобального заголовка, все, что вам нужно сделать, это сохранить все изменения и отобразить результат на своем сайте!
обследование
Теперь, когда мы прошли все шаги, давайте в последний раз взглянем на результат.
Заключение
В заключение, в этой статье мы показали вам, как использовать конструктор тем Divi для создания адаптивного скользящего меню. Для этого мы объединили лучшие встроенные элементы и параметры Divi с пользовательским кодом функции щелчка. Таким образом, это позволяет вам сосредоточиться на разработке выдвижного меню и позволить коду позаботиться о функциональной части глобального заголовка!
Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
