Хотели бы вы создать вертикальное навигационное меню, чтобы в нем отображалось больше элементов на переднем плане в DIVI?
Вертикальные навигационные меню могут быть полезны для некоторых веб-сайтов, которым требуется больше пунктов меню на переднем плане. Горизонтальные меню могут быть сложными для размещения всех необходимых ссылок меню, особенно в браузерах с меньшей шириной экрана.
В этом уроке мы покажем вам, как создать вертикальное навигационное меню с помощью конструктора тем Divi.
Это даст вам больше места для демонстрации пунктов меню WordPress.
Давайте начнем!
обследование
Вот краткий обзор дизайна, который мы будем создавать в этом уроке.
Перейдем к учебнику.
Создание нового глобального заголовка
В этом уроке мы создадим вертикальное меню навигации в глобальном заголовке, используя конструктор тем Divi.
Чтобы начать, перейдите на панель управления WordPress и выберите Divi > Theme Builder.
Затем нажмите на область «Добавить глобальный заголовок» шаблон сайта по умолчанию и выберите «Построить глобальный заголовок» в раскрывающемся списке.
Читайте также: Как создать глобальный заголовок с помощью Theme Builder в DIVI
Планировка вертикального сечения
В глобальном редакторе макета заголовка откройте уже существующие настройки обычного раздела и обновите следующие.
- Максимальная ширина: 300 пикселей
- Высота: 100вх
- Внутреннее поле: 4vh сверху, 0px снизу
Продолжите настройку, добавив теневой блок следующим образом:
- Поле теней: см. скриншот
- Вертикальное положение тени коробки: 0px
- Сила размытия тени коробки: 20px
- Сила распространения тени коробки: -10px
- Цвет тени: rgba(0,0,0,0.3)
Чтобы убедиться, что меню вертикальной навигации остается видимым слева при прокрутке пользователем, обновите вкладку «Дополнительно» до фиксированного положения и обновите z-индекс следующим образом:
- Фиксированная станция
- Z-индекс: 9999
Чтобы убедиться, что мы можем видеть навигацию по подменю, которая будет выходить за пределы раздела, добавьте следующий пользовательский CSS к основному элементу:
overflow: visible !important;
Теперь ваш раздел будет располагаться вертикально в левой части шаблона.
Дизайн вертикального меню
Когда раздел готов, мы готовы разработать вертикальное меню. Для этого мы будем использовать модуль меню с пользовательским CSS, чтобы настроить навигацию для вертикального отображения.
Мы также будем использовать единицу длины vh, чтобы меню хорошо адаптировалось к разной высоте браузера.
Добавление строки
Для начала добавьте строку в столбец в разделе.
Затем обновите параметры строки следующим образом:
Размер и расстояние
- Использовать пользовательскую ширину желоба: ДА
- Расстояние между столбцами: 1
- Максимальная ширина: 100%
- Максимальная ширина: 80%
- Внутреннее поле: 3vh сверху, 3vh снизу
граница
- Ширина границы: 1px
- Цвет границы: #eeeeee
Добавлен модуль меню
Внутри строки с одним столбцом добавьте новый модуль меню.
Выберите меню для отображения на вкладке Содержание.
Затем добавьте логотип вашего сайт как содержание динамический под кнопкой логотипа.
На вкладке «Стиль» обновите следующее:
- Стиль: по центру
- Меню шрифтов: Nunito Sans
- Цвет текста меню: #535b7c
- Меню «Размер текста»: 18 пикселей (на рабочем столе), 14 пикселей (на планшетах и телефонах).
- Высота строки меню: 2 em
- Цвет строки раскрывающегося списка: #535b7c
- Раскрывающееся меню «Цвет активной ссылки»: #535b7c
- Цвет значка корзины: #535b7c
- Цвет значка поиска: #535b7c
- Цвет значка меню гамбургеров: #535b7c
- Внутреннее поле: 2vh сверху, 2vh снизу
Добавлен пользовательский CSS для меню
Меню нуждается в пользовательском CSS для достижения вертикальной навигации, которую мы хотим достичь. Чтобы начать, перейдите на вкладку «Дополнительно» и добавьте следующий пользовательский CSS к ссылке меню и логотипу меню.
Ссылка меню CSS (рабочий стол):
width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;
Ссылка меню CSS (планшет):
width: auto;
border:none;
Логотип CSS меню:
margin-bottom: 20px;
Затем добавьте пользовательский класс CSS в модуль «Меню» следующим образом:
Класс CSS: et-vert-menu
Этот класс будет использоваться для таргетинга на это конкретное меню в нашем внешнем пользовательском CSS, который мы добавим с помощью модуля кода.
Добавление пользовательского CSS с помощью модуля «Код»
Под модулем «Меню» добавьте модуль «Код».
Затем вставьте следующий код в поле кода (обязательно поместите его между тегами стиля):
/* MenudeNavigation Style Vertical*/
.et-vert-menu .et_pb_menu__menu>nav>ul {
flex-direction: column;
margin-left: 0px!important;
margin-right: 0px!important;
width: 100%;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
margin: 10px0!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
display:block!important;
padding: 0px!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul ul {
padding: 0px!important;
top: 0px!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
left:calc(100%- 1px) !important;
top:0px!important;
}
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
content: "5"!important; /*change arrow icon for submenu*/
right: 20px!important;
}
.et-vert-menu .nav li ul {
left: calc(100%- 1px) !important; /*align submenu to the right of menu link*/
}
@media alland (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
width: 100%; /*width of the vertical navigation menu*/
}
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/
#et-main-area {
width: calc(100%- 300px);
margin-left: 300px;
}
}
Дизайн кнопки и значков отслеживания в социальных сетях
Теперь, когда меню готово, мы можем добавить кнопку, и некоторые социальные сети перейдут по ссылкам, чтобы завершить вертикальный заголовок.
Добавление строки
Добавьте новую строку на один столбец ниже текущей строки.
Добавить кнопку
Затем добавьте в строку модуль Button.
Обновите настройки кнопки следующим образом:
- Выравнивание кнопок: по центру
- Использовать пользовательские стили для кнопки: ДА
- Размер текста кнопки: 18 пикселей (на рабочем столе), 14 пикселей (на планшетах и телефонах).
- Цвет текста кнопки: #ffffff
- Цвет фона кнопки: #535b7c
- Ширина границы кнопки: 0 пикселей
Затем перейдите на вкладку «Дополнительно» и вставьте следующий пользовательский CSS в основной элемент:
Основной элемент CSS (рабочий стол)
display:block;
width: 100%;
Основной элемент CSS (планшет)
display:inherit;
Добавлены значки подписки в социальных сетях
Под кнопкой добавьте модуль «Подпишитесь на нас в социальных сетях».
Добавьте нужные социальные сети на вкладку содержание.
На вкладке Стиль обновите следующее:
- Выравнивание модуля: по центру
- Цвет значка: #535b7c
Затем откройте настройки каждой из социальных сетей и удалите цвет фона.
Затем добавьте небольшое верхнее поле следующим образом:
- Маржа: 3vh Пик
Обновить параметры линии
После того, как значки подписки в социальных сетях будут готовы, откройте «Настройки линии» и настройте следующее:
- Использовать пользовательскую ширину желоба: ДА
- Расстояние между столбцами: 1
- Внутреннее поле: 3vh сверху, 0px снизу
Сохранить макет и шаблон
После этого сохраните макет и шаблон.
Конечный результат
Вот конечный результат на живой странице.
Скачайте DIVI прямо сейчас!!!
Заключение
Показанному здесь вертикальному навигационному меню присвоено фиксированное положение. Однако, если вам нужно больше места для дополнительных пунктов меню или содержимого, вы можете изменить положение раздела на абсолютное.
Настройка вертикального раздела также открывает двери для создания пользовательских боковых панелей.
Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
