Хотите создать значок гамбургера для своего мегаменю? диви ?
Divi использует значок гамбургера для переключения главного меню на мобильном устройстве и некоторых стилей заголовков, таких как «вставка» и «во весь экран».
Сегодня мы собираемся показать вам, как использовать значок гамбургера для переключения мегаменю одним щелчком мыши. Это отличное решение для веб-сайтов с большим количеством пунктов меню.
Значок гамбургера позволяет избежать беспорядка в заголовке. Более того, организованная 4-колоночная компоновка мегаменю позволяет пользователям быстро и эффективно находить то, что им нужно.
обследование
Прежде чем мы перейдем к этому уроку, давайте посмотрим на результат, которого мы хотим достичь.
Реализуйте значок гамбургера с помощью Divi
Превратите свое меню в мегаменю
Вы должны сначала создать мега меню или измените текущее меню на мегаменю. Эта часть довольно проста.
На панели инструментов WordPress перейдите к Внешний вид> Меню.
Cliquez-сюр- Создать новое меню, дайте название своему меню, затем нажмите Создать меню.
Обязательно включите свойство меню CSS Classes, нажав на вкладку Параметры экрана верхний правый угол экрана Меню и тикает CSS классы.
Теперь вы можете добавить пункты меню в созданное вами новое меню.
Во-первых, давайте добавим пункт меню, который будет действовать как значок гамбургера. Этот пункт меню будет родительским для всех остальных пунктов меню.
Для создания этого пункта меню создайте пользовательскую ссылку со следующими параметрами:
- URL-адрес: http//#
- Название навигации: <div class="гамбургер">
- Классы CSS: мегаменю
URL-адрес — это просто хэштег (#), так как этот пункт меню не будет ссылаться на определенную страницу. Мы будем использовать этот пункт меню, чтобы развернуть наше мегаменю в один клик.
Класс CSS «мегаменю» — это то, что развертывает функциональность мегаменю. Этот класс CSS следует применять только один раз к основному пункту родительского меню и к любому из подпунктов.
Теперь пришло время добавить пункты меню, которые составят ваше мегаменю.
Теперь расположите/перетащите четыре пункта меню (каждый с тремя собственными подпунктами), чтобы они стали подпунктами основной родительской ссылки Мегаменю.
Когда вы закончите составлять меню, обязательно проверьте Главное меню под Réglages du меню и нажмите Сохранить меню
Добавлен jQuery для отображения меню при клике, а не при наведении.
Теперь, когда ваше мегаменю создано, нам нужно добавить jQuery, чтобы наше мегаменю отображалось при нажатии на значок, а не при наведении курсора на него (что используется по умолчанию).
Для этого перейдите в Divi > Параметры темы > Интеграция
Добавьте следующий скрипт в раздел «Добавьте строку кода в <head> ваш блог » :
<script>
/*** Open menu itmes with children on click not hover ***/
(function($) {
jQuery(document).ready(function() {
jQuery('#top-menu li.mega-menu > a, #et-secondary-nav li.mega-menu > a').click(function(e) {
e.preventDefault();
jQuery(this).parent().toggleClass('show-submenu');
});
});
jQuery(document).click(function(e) {
if(!$(e.target).closest('.show-submenu').length) {
jQuery('.show-submenu').removeClass('show-submenu');
}
});
})(jQuery);
</script>
Добавление пользовательского CSS
Когда вы находитесь в параметрах темы, перейдите на вкладку общий
Прокрутите до «Настроить CSS» и вставьте CSS ниже, затем нажмите 'Сохранить изменения' :
/*** hides sub-menu on hover ***/
#et-top-navigation #top-menu li.et-hover ul.sub-menu { display: none!important; }
/*** shows submenu on click ***/
#et-top-navigation #top-menu li.show-submenu ul.sub-menu { display: block!important; visibility: visible!important; opacity: 1!important; }
/*** Hide hamburger menu item on mobile ***/
.et_mobile_menu .mega-menu >
a{display:none;}
#top-menu .mega-menu > a, #et-secondary-nav .mega-menu > a {padding-bottom: 24px !important;}
/**** hide down arrow ****/
#top-menu .mega-menu > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {display: none;}
/*** show hamburger icon ***/
.hamburger:before {
font-family: "ETmodules" !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 0.6em;
text-transform: none;
speak: none;
position: relative;
cursor: pointer;
top: 0;
left: 0;
vertical-align: -11px;
padding-right: 3px;
font-size: 32px; /*change size of icon here*/
content: "61"; /*change icon here*/
color: #333; /*change color of icon here*/
}
/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
content: "4d"; /*change x icon here*/
}
Сделано !
Результат
Давайте посмотрим на результат в конце этих шагов.
Скачайте DIVI прямо сейчас!!!
Отзывчивый?
Мегаменю работают только на экранах с разрешением более 980 пикселей. При размере экрана менее 980 пикселей (планшеты и смартфоны) меню по умолчанию переключается в режим мобильного меню.
Скачайте DIVI прямо сейчас!!!
Заключение
Если вам нравятся мегаменю и вы хотите создать чистый и минималистичный дизайн для своего заголовка, то добавление значка гамбургера для отображения вашего мегаменю — отличное решение.
Теперь ваши пользователи могут видеть все ваши навигационные ссылки сразу одним щелчком мыши. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
