Искате ли да създадете икона на хамбургер за вашето мега меню Divi ?
Divi използва иконата на хамбургер, за да превключва главното ви меню на мобилно устройство и някои стилове на заглавки като „плъзгане“ и „цял екран“.
Днес ще ви покажем как да използвате икона на хамбургер, за да превключвате мега меню с едно кликване. Това е чудесно решение за уебсайтове с много опции в менюто.
Иконата на хамбургер избягва бъркотията в заглавката. Освен това организираното оформление с 4 колони на мега менюто позволява на потребителите да намират това, от което се нуждаят бързо и ефективно.
изследване
Преди да преминем към този урок, нека да разгледаме резултата, който искаме да постигнем.
Внедрете иконата на Хамбургер с Divi
Преобразувайте менюто си в мега меню
Първо трябва създайте мега меню или променете текущото си меню в мега меню. Тази част е доста проста.
От таблото за управление на wordpress отидете на Външен вид> Менюта.
Кликнете върху Създайте ново меню, дайте име на вашето меню, след което щракнете върху Създайте менюто.
Не забравяйте да активирате свойството на менюто CSS Classes, като щракнете върху раздела Опции на екрана горе вдясно на екрана Менюта и тиктакане CSS класове.
Вече можете да добавите вашите елементи от менюто към новото меню, което сте създали.
Първо, нека добавим елемента от менюто, който ще действа като икона на хамбургер. Този елемент от менюто ще бъде родител на всички останали елементи от менюто.
За да създадете този елемент от менюто, създайте персонализирана връзка със следните параметри:
- URL адрес: http//#
- Заглавие на навигацията: <div class=”hamburger”>
- CSS класове: мега-меню
URL адресът е просто хаштаг (#), тъй като този елемент от менюто няма да има връзка към определена страница. Ще използваме този елемент от менюто, за да разгърнем нашето мега меню с едно щракване.
CSS класът „мега меню“ е това, което разгръща функционалността на мега менюто. Този CSS клас трябва да се прилага само веднъж към основния родителски елемент от менюто и към всеки от под-елементите.
Сега е време да добавите елементите от менюто, които ще съставят вашето мега меню.
Сега подредете/плъзнете четирите елемента от менюто (всеки с три собствени под-позиции), за да станат под-елементи на основната родителска връзка Mega Menu.
Когато приключите с подреждането на менюто, задължително проверете Главно меню су Настройки на менюто и кликнете върху Запазване на менюто
Добавен 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 пиксела. За размер на екрана под 980px (таблети и смартфони), менюто ще превключи в режим на мобилно меню по подразбиране.
Изтеглете DIVI сега!!!
Заключение
Ако харесвате мега менюта и искате да създадете изчистен и минималистичен дизайн за заглавката си, тогава добавянето на икона на хамбургер за показване на вашето мега меню е чудесно решение.
Сега вашите потребители могат да видят всички ваши връзки за навигация наведнъж с едно кликване. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...