Вы хотите создать скользящее и нажимаемое меню в ДИВИ который не скрывает элементы вашей страницы?
Большие заголовки с большим количеством навигационных ссылок могут занимать драгоценное место на вашем сайте. Веб-сайт. Вот почему контекстные и выдвижные меню становятся все более популярными. Большую часть времени меню, которые скользят по экрану, остаются над содержание страницы, скрывая определенные элементы.
Однако скользящее push-меню работает немного по-другому. Эффект скользящего нажатия уникален тем, что меню сдвигается с верхней части страницы при одновременном нажатии кнопки. содержание со страницы вниз, чтобы ничего не было скрыто от просмотра.
В этом уроке мы покажем вам, как создать скользящее push-меню с нуля с помощью Divi Theme Builder.
Давайте!
обследование
Вот краткий обзор скользящего меню, которое мы будем создавать в этом уроке.
Создайте скользящее push-меню с помощью конструктора тем Divi.
Создание нового глобального меню
Чтобы создать меню, мы создадим новый глобальный заголовок в Divi Theme Builder.
Перейдите в Divi > Конструктор тем.
Читайте также: Как создать глобальный заголовок с формой входа в DIVI
Затем нажмите на область «Добавить глобальный заголовок» в шаблон сайта по умолчанию. В раскрывающемся списке выберите «Построить глобальный заголовок».
Создание push-меню
Первый элемент, который мы собираемся создать вместе, — это раздел push-меню. Этот раздел будет содержать элементы меню, которые будут переключаться вверх и вниз при нажатии кнопки переключения меню.
Настройки раздела
Откройте настройки раздела по умолчанию и обновите настройки следующим образом:
Задний план
- Фон: #1a1e36
Внутреннее поле
- Внутреннее поле: 0 пикселей сверху, 0 пикселей снизу
Класс CSS
На вкладке «Дополнительно» добавьте следующий класс CSS, который будет использоваться позже в нашем коде JS.
- Класс CSS: et-push-menu
Добавьте строку 1
После определения параметров раздела создайте в разделе строку из одного столбца.
Строка 1 Параметры
Затем обновите параметры строки следующим образом:
калибровка
- Использовать пользовательскую ширину желоба: ДА
- Расстояние между столбцами: 1
- Максимальная ширина: 100%
- Максимальная ширина: 1 пикселей
расстояние
- Поле: верхние 3vh, нижние 3vh
граница
- Ширина нижней границы: 1px
- Цвет нижней границы: rgba(255,255,255,0.2)
Пользовательский CSS
На вкладке «Дополнительно» добавьте следующий пользовательский CSS к основному элементу:
display:flex;
justify-content:center;
align-items:center;
Параметры столбца
После определения настроек строки откройте настройки столбца и добавьте пользовательский фрагмент CSS к основному элементу:
display:flex;
align-items:center;
justify-content:center;Это позволит сосредоточить содержание колонны как по вертикали, так и по горизонтали.
Добавить кнопку
Теперь мы готовы начать добавлять пункты меню с помощью модуля Button. Начните с добавления новой кнопки в столбец.
Смотрите также наше руководство по: Как создать вертикальное навигационное меню в DIVI
Настройки кнопок
Затем обновите настройки кнопки следующим образом:
Содержание
- Текст кнопки: Дизайн
- URL-адрес ссылки на кнопку: # (замените позже своим собственным URL-адресом)
Стиль
- Использовать пользовательские стили для кнопки: ДА
- Цвет текста кнопки: #ffffff
- Ширина границы кнопки: 0 пикселей
- Шрифт кнопки: Монтсеррат
- Кнопка мягкого света: тяжелый
- Кнопка со значком: ДА
- Кнопка со значком: [На ваш выбор]
- Показывать значок только при наведении: НЕТ
- Расположение значка кнопки: слева
Дублировать столбец
Теперь, чтобы создать дополнительные кнопки для меню, мы можем продублировать столбец. Для этого дизайна давайте продублируем столбец 4 раза, чтобы получить в общей сложности 5 пунктов меню/кнопок в ряду из пяти столбцов.
Добавьте строку 2
Как только первая строка будет завершена, мы готовы добавить еще одну строку кнопок, которые можно использовать для другого набора пунктов меню.
Читайте также: Как добавить контактную форму в глобальный заголовок в DIVI
Чтобы создать следующую строку, продублируйте строку 1.
Удалить все столбцы, кроме одного
Затем удалите все столбцы, кроме одного, в повторяющейся строке.
Строка 2 Параметры
Обновите параметры строки 2 следующим образом:
- Максимальная ширина: 1 пикселей
- Ширина нижней границы: 0px
Параметры столбца
Затем добавьте границу к столбцу следующим образом:
- Ширина правой границы: 1px
- Цвет правой границы: rgba(255,255,255,0.2)
Обновить настройки кнопки
Как только столбец будет иметь правильную границу, откройте настройки кнопки и обновите следующее:
- Размер текста кнопки: 14px
- Кнопка Soft Light: полужирный текст
- Расстояние между буквами кнопки: 2 пикселя
- Стиль копирования кнопки: TT
- Кнопка со значком: НЕТ
Дублировать столбец
Как и раньше, давайте продублируем столбец, чтобы создать дополнительные кнопки и столбцы. Для этого дизайна давайте продублируем столбец 3 раза, чтобы получить в общей сложности 4 кнопки в ряду из 4 столбцов.
Удалить границу с последнего столбца
Так как мы не хотим, чтобы последний столбец имел правильную границу, откройте настройки для столбца 4 и обновите ширину границы:
- Ширина правой границы: 0px
Создание основной панели заголовка
Далее мы создадим основной раздел панели заголовка. Эта панель заголовка всегда будет оставаться видимой и будет содержать логотип нашего сайта, призыв к действию и кнопку переключения меню.
Добавить раздел
Перед добавлением нового раздела рекомендуется обновить метку предыдущего раздела, чтобы она читалась как «Раздел push-меню».
Смотрите также: Как создать глобальный заголовок с помощью Theme Builder в DIVI
Затем создайте новый раздел под первым разделом.
Настройки раздела
Теперь обновите метку нового раздела, чтобы она читалась как «Раздел заголовка». Затем откройте настройки раздела и обновите следующее:
расстояние
- Внутреннее поле: 0 пикселей сверху, 0 пикселей снизу
Добавить строку
Как только заполнение раздела установлено, добавьте в раздел строку из трех столбцов.
Настройки линии
Откройте параметр строки и обновите следующее:
калибровка
- Ширина желоба: 1
- Ширина: 90%
- Высота: 70 пикселей
расстояние
- Внутреннее поле: 0 пикселей сверху, 0 пикселей снизу
Пользовательский CSS
На вкладке «Дополнительно» добавьте следующий пользовательский CSS к основному элементу:
display:flex;
align-items:center;Это вертикально отцентрирует столбцы в строке.
Добавить кнопку
Чтобы создать основной CTA в разделе заголовка, мы можем использовать кнопку второго ряда в верхнем разделе. Скопируйте кнопку из столбца 1 строки 2 верхнего раздела и вставьте ее в столбец 1 строки заголовка раздела.
Обновить настройки кнопки
Затем откройте настройки кнопки дублирования и обновите следующее:
- Текст кнопки: Регистрация
- Размер текста кнопки: 14px
- Цвет текста кнопки: #1a1e36
- Кнопка со значком: ДА
- Кнопка со значком: стрелка вправо (см. снимок экрана)
Добавить логотип
В средней колонке добавьте модуль изображения. Так мы будем динамически добавлять логотип сайта.
Наведите указатель мыши на область изображения и нажмите значок «Использовать динамическое содержимое». В раскрывающемся меню выберите «Логотип сайта».
Настройки изображения
Затем на вкладке «Стиль» обновите следующее:
- Выравнивание изображения: по центру
- Максимальная высота: 55 пикселей
Добавьте пользовательский значок гамбургера
Мы могли бы использовать обычную иконку через модуль макета в качестве переключателя меню, но для этого урока я подумал, что мы добавим настраиваемый переключатель меню с классным эффектом перехода.
Добавить текстовый модуль
Чтобы создать значок меню, мы будем использовать текстовый модуль с пользовательским HTML-кодом, который будет оформлен с помощью внешнего CSS.
Идите вперед и добавьте текстовый модуль в столбец 3.
Добавить HTML-код в текстовый модуль
Затем добавьте следующий HTML-код в содержимое текстового модуля:
<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>
Задний план
Присвойте текстовому модулю цвет фона:
- Цвет фона: #1a1e36
Форматирование текста
Затем обновите настройки стиля следующим образом:
- Ширина: 70 пикселей
- Выравнивание модулей: справа
- Высота: 70 пикселей
- Внутреннее поле: 20 пикселей сверху, 20 пикселей снизу, 16 пикселей слева, 16 пикселей справа
Класс CSS
На вкладке «Дополнительно» добавьте следующий класс CSS:
- Класс CSS: et-push-menu-toggle
Добавить код
Чтобы реализовать функциональность, необходимую для работы этого скользящего push-меню, мы добавим наши пользовательские CSS и jQuery в модуль кода.
Идите вперед и добавьте модуль «Код» в столбец 3 под модулем «Текст».
Затем вставьте следующий код (NB: заверните этот код в теги стиль чтобы он работал корректно):
.line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #ffffff;
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;
}
.et-push-menu-toggle.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.et-push-menu-toggle.open .line-2 {
display: none;
}
.et-push-menu-toggle.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.et-push-menu {
display:none;
}
.et-fb .et-push-menu {
display:block;
}
.et-push-menu-toggle {
cursor:pointer;
}
Затем скопируйте и вставьте этот код прямо ниже (важно: заверните этот код в теги script, чтобы он работал правильно):
(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );
Обновить текст кнопки и ссылки
Наконец, мы можем обновить все кнопки необходимым текстом кнопки и URL-адресами ссылок.
Сделано !
Сохранить настройки
Не забудьте сохранить макет и настройки Theme Builder.
Конечный результат
Чтобы увидеть окончательный результат, проверьте страницу на вашем сайт.
Сделать липким
Если вам нужна «липкая» версия меню, просто добавьте следующий фрагмент кода CSS в модуль кода (между тегами стиля):
header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
overflow-y: visible !important;
}
Вот результат.
Скачайте DIVI прямо сейчас!!!
Заключение
Мы надеемся, что вам понравится это скользящее меню. Эффект уникален и открывает двери для более креативных заголовков. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
