Jak stworzyć ikonę hamburgera dla swojego Divi Mega Menu?

Opublikowany: 2017-04-18

Ikony hamburgerów stały się synonimem menu. Trzy ułożone poziomo linie reprezentują ideę listy i zostały nazwane „hamburgerem” ze względu na oczywiste podobieństwa. 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żę, jak używać ikony hamburgera do przełączania mega menu po kliknięciu. To świetne rozwiązanie dla stron z dużą ilością opcji menu. Ikona hamburgera utrzymuje bałagan w nagłówku. Dodatkowo zorganizowany 4-kolumnowy układ mega menu pozwala użytkownikom szybko i skutecznie znaleźć to, czego potrzebują.

Przed i po

Domyślnie mega menu działa po najechaniu kursorem na link głównego menu nadrzędnego:

Po wdrożeniu nowego wyglądu i funkcjonalności mega menu wyświetla się dopiero po kliknięciu ikony hamburgera.

Wdrażanie projektu z Divi

Subskrybuj nasz kanał YouTube

Przekształć swoje menu w Mega Menu

Najpierw musisz stworzyć mega menu lub zmienić swoje obecne menu w mega menu. Ta część jest dość prosta.

Z pulpitu Wordpress przejdź do Wygląd → Menu. Kliknij Utwórz nowe menu i nadaj swojemu menu nazwę.

Kliknij Utwórz menu

Upewnij się, że aktywujesz właściwość menu Klasy CSS, klikając kartę Opcje ekranu w prawym górnym rogu ekranu Menu i zaznaczając Klasy CSS..

Teraz możesz dodać swoje pozycje menu do nowo utworzonego menu.

Najpierw dodajmy element menu, który będzie naszą ikoną hamburgera. Ta pozycja menu będzie rodzicem wszystkich innych pozycji menu.

Aby utworzyć ten element menu, utwórz niestandardowy link z następującymi ustawieniami: 

URL: http://#

Navigation Label: <div class="hamburger"></div>

CSS Classes: mega-menu

Adres URL to po prostu hashtag (#), ponieważ ta pozycja menu nie będzie prowadzić do żadnej określonej strony. Będziemy używać tego elementu menu do wdrożenia naszego mega menu po kliknięciu.

Etykieta nawigacyjna zawiera prosty kod HTML (div z klasą „hamburger”). To jest to, czego używamy do wyświetlania naszej ikony hamburgera za pomocą niestandardowego CSS.

Klasa CSS „mega-menu” wdraża funkcjonalność mega menu. Ta klasa css powinna być zastosowana tylko raz do głównego elementu menu nadrzędnego, a nie do żadnego z elementów podrzędnych.

Teraz nadszedł czas, aby dodać elementy menu, które będą tworzyć Twoje mega menu. W tym przykładzie używam następujących elementów menu nadrzędnego i podrzędnego w głównym menu mega:

  • Mega Menu Hamburger Ikona Link
    • O nas
      • Nasz zespół
      • Nasza misja
      • Historia firmy
    • Usługi
      • Projektowanie stron
      • Tworzenie stron internetowych
      • SEO
    • Nasza praca
      • Blogi
      • Handel elektroniczny
      • Zbiorowy
    • Skontaktuj się z nami
      • Wsparcie
      • Wskazówki
      • Oferty pracy

Teraz zorganizuj/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 organizować menu, upewnij się, że zaznaczyłeś Menu główne w Ustawieniach menu.

Zapisz menu

Dodawanie jQuery do wyświetlania menu po kliknięciu zamiast po najechaniu kursorem

Teraz, gdy Twoje mega menu zostało utworzone, musimy dodać trochę jQuery, aby nasze mega menu było wyświetlane po kliknięciu ikony zamiast po najechaniu kursorem (co jest domyślne). W tym celu przejdź do Opcje motywu → Integracja i dodaj następujący skrypt w sekcji „Dodaj kod do nagłówka swojego bloga”: 

<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>

Dodawanie niestandardowego CSS

W oknie Opcje motywu w obszarze Ustawienia ogólne dodaj następujący niestandardowy kod 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*/
}

Otóż ​​to!

Teraz idź i sprawdź swoje wyniki

Więcej opcji dostosowywania

Wprowadzony CSS zawiera komentarze, dzięki czemu możesz wprowadzać zmiany w stylu ikony hamburgera. Oto, gdzie możesz znaleźć dwie główne sekcje CSS, aby nadać styl swojej ikonie:

Zmiana ikony hamburgera

Divi zawiera różne ikony czcionek, których możesz użyć w swojej witrynie. Jeśli chcesz zmienić ikonę hamburgera na inny styl, wystarczy znaleźć i edytować wiersz CSS oznaczony komentarzem „zmień ikonę tutaj”: 

content: "\61"; /*change icon here*/

Oto różne wartości zawartości dla różnych ikon hamburgerów. Wystarczy zastąpić „\61” jednym z następujących:

Kwadratowe menu ikon – \62

Menu ikony koła – \63

Ikona ul – \64

ol Ikona – \65

Kwadratowa ikona menu ciemna – \e056

Ciemna ikona menu w kółku – \e057

Zmiana ikony „X”

Jeśli używasz innej ikony menu hamburgera, powinieneś zmienić ikonę „x”, aby pasowała do projektu. Po prostu znajdź następujący css: 

/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
    content: "\4d";
}

Zastąp „\4d” jedną z następujących wartości zawartości:

Ikona menu zamykania kółka – \51

Ikona menu zamykania kółka Ciemna – \e051

Tak wygląda ikona hamburgera z mega menu z bezpłatnymi stylami ciemnych kółek:

Zmiana koloru ikony hamburgera

Jeśli chcesz zmienić kolor ikony hamburgera, edytuj ten wiersz CSS oznaczony jako „zmień kolor ikony”: 

Color: #333; /*change icon color here*/

Zmiana rozmiaru ikony hamburgera

Jeśli chcesz zmienić rozmiar ikony hamburgera, edytuj ten wiersz CSS oznaczony „zmień rozmiar ikony tutaj”: 

Font-size: 32px; /*change size of icon here*/

Dodawanie etykiety do ikony hamburgera

Łatwo jest dodać etykietę do swojej ikony. Po prostu wróć do Wygląd → Menu i edytuj najwyższy element menu, który nadałeś klasie „mega-menu”. W polu tekstowym etykiety nawigacyjnej dodaj tekst etykiety wewnątrz elementu div. W tym przykładzie dodałem etykietę „menu”.

<div class=”hamburger”>menu</div>

Teraz twój hamburger ma obok etykietę.

Czuły?

Mega menu działa tylko na ekranach o rozmiarach szerszych niż 980px. Dla rozmiaru ekranu poniżej 980px (tablety i smartfony) menu przełączy się na domyślne menu mobilne.

Końcowe przemyślenia

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.

Ponadto wbudowane ikony czcionek Divi ułatwiają dostosowywanie ikon hamburgerów za pomocą CSS, bez konieczności tworzenia ikon od zera.

Możesz także dodawać obrazy do mega menu, aby tworzyć jeszcze bardziej wyróżniające się mega menu.

Otóż ​​to!

Mam nadzieję, że spodoba Ci się ta funkcja. Czekamy na kontakt z Państwem w komentarzach.