Czy chciałbyś stworzyć ikonę hamburgera dla swojego mega menu? Divi ?
Divi używa ikony hamburgera do przełączania głównego menu na telefon komórkowy i niektórych stylów nagłówków, takich jak „wsuń” i „pełny ekran”.
Dzisiaj pokażemy, jak używać ikony hamburgera do przełączania mega menu jednym kliknięciem. To świetne rozwiązanie dla stron internetowych z wieloma opcjami menu.
Ikona hamburgera pozwala uniknąć bałaganu w nagłówkach. Co więcej, zorganizowany 4-kolumnowy układ mega menu pozwala użytkownikom szybko i sprawnie znaleźć to, czego potrzebują.
badanie
Zanim przejdziemy do tego samouczka, przyjrzyjmy się wynikowi, który chcemy osiągnąć.
Zaimplementuj ikonę Hamburgera za pomocą Divi
Przekształć swoje menu w mega menu
Musisz najpierw utwórz mega menu lub zmień swoje aktualne menu w mega menu. Ta część jest dość prosta.
Z pulpitu Wordpress przejdź do Wygląd> Menu.
Kliknij Utwórz nowe menu, nadaj nazwę swojemu menu, a następnie kliknij Utwórz menu.
Pamiętaj, aby włączyć właściwość menu Klasy CSS, klikając kartę Opcje ekranu prawy górny róg ekranu dietetyczne i tykanie Klasy CSS.
Możesz teraz dodać swoje pozycje menu do nowo utworzonego menu.
Najpierw dodajmy element menu, który będzie działał jako ikona hamburgera. Ta pozycja menu będzie rodzicem wszystkich innych pozycji menu.
Aby utworzyć tę pozycję menu, utwórz niestandardowy link z następującymi parametrami:
- URL: http//#
- Tytuł nawigacji: <div class=”hamburger”>
- Klasy CSS: mega-menu
Adres URL to po prostu hashtag (#), ponieważ ta pozycja menu nie prowadzi do określonej strony. Użyjemy tego elementu menu, aby jednym kliknięciem wdrożyć nasze mega menu.
Klasa CSS „mega menu” wdraża funkcjonalność mega menu. Tę klasę CSS należy zastosować tylko raz do głównego elementu menu nadrzędnego i do dowolnego elementu podrzędnego.
Teraz nadszedł czas, aby dodać elementy menu, które będą tworzyć Twoje mega menu.
Teraz ułóż/przeciągnij cztery pozycje menu (każda z trzema własnymi pozycjami podrzędnymi), aby stały się podpozycjami głównego nadrzędnego łącza Mega Menu.
Kiedy skończysz układać menu, koniecznie sprawdź Menu główne sous Przepisy dotyczące menu i kliknij przycisk Zapisz menu
Dodano jQuery do pokazywania menu po kliknięciu, a nie po najechaniu myszką
Teraz, gdy Twoje mega menu zostało utworzone, musimy dodać trochę jQuery, aby nasze mega menu wyświetlało się po kliknięciu ikony zamiast najeżdżania na nią (co jest ustawieniem domyślnym).
Aby to zrobić, przejdź do Divi > Opcje motywu > Integracja
Dodaj następujący skrypt w sekcji „Dodaj linię kodu do <head> pliku Twój blog » :
<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>
Dodanie niestandardowego CSS
W opcjach motywu przejdź do zakładki ogólny
Przewiń do „Dostosuj CSS” i wklej CSS poniżej, a następnie kliknij 'Zapisz zmiany' :
/*** 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*/
}
Zrobione !
Wynik
Przyjrzyjmy się wynikowi na końcu tych kroków.
Pobierz DIVI teraz !!!
Czuły?
Mega menu działa tylko na ekranie o rozmiarze większym niż 980 pikseli. W przypadku ekranu o rozmiarze poniżej 980 pikseli (tablety i smartfony) menu domyślnie przełączy się w tryb menu mobilnego.
Pobierz DIVI teraz !!!
Wnioski
Jeśli lubisz mega menu i chcesz stworzyć przejrzysty i minimalistyczny projekt nagłówka, dodanie ikony hamburgera, aby wyświetlić mega menu, jest świetnym rozwiązaniem.
Teraz Twoi użytkownicy mogą zobaczyć wszystkie Twoje linki nawigacyjne za jednym kliknięciem. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
