Cara Membuat Ikon Hamburger untuk Menu Divi Mega Anda

Diterbitkan: 2017-04-18

Ikon hamburger telah menjadi identik dengan menu. Tiga garis horizontal bertumpuk mewakili gagasan daftar dan telah dijuluki "hamburger" karena kesamaannya yang jelas. Divi menggunakan ikon hamburger untuk mengaktifkan menu utama Anda di ponsel dan pada gaya tajuk tertentu seperti "slide in" dan "fullscreen".

Hari ini saya akan menunjukkan cara menggunakan ikon hamburger untuk mengaktifkan menu mega saat diklik. Ini adalah solusi yang bagus untuk situs-situs dengan banyak pilihan menu. Ikon hamburger membuat header tidak berantakan. Ditambah tata letak 4 kolom yang terorganisir dari menu mega memungkinkan pengguna menemukan apa yang mereka butuhkan dengan cepat dan efisien.

Sebelum dan Setelah

Secara default, menu mega berfungsi dengan mengarahkan kursor ke tautan menu induk utama:

Setelah menerapkan desain dan fungsionalitas baru, menu mega hanya muncul saat Anda mengklik ikon hamburger.

Menerapkan Desain dengan Divi

Berlangganan Saluran Youtube Kami

Ubah Menu Anda menjadi Menu Mega

Pertama, Anda perlu membuat menu mega atau mengubah menu Anda saat ini menjadi menu mega. Bagian ini cukup sederhana.

Dari dashboard wordpress, pergi ke Appearance → Menus. Klik Buat Menu Baru dan beri nama menu Anda.

Klik Buat Menu

Pastikan untuk mengaktifkan properti menu Kelas CSS dengan mengklik tab Opsi Layar di kanan atas layar Menu dan memeriksa Kelas CSS..

Sekarang Anda dapat menambahkan item menu ke menu baru yang Anda buat.

Pertama, mari tambahkan item menu yang akan berfungsi sebagai ikon hamburger kita. Item menu ini akan menjadi induk dari semua item menu lainnya.

Untuk membuat item menu ini, buat tautan khusus dengan pengaturan berikut: 

URL: http://#

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

CSS Classes: mega-menu

URL hanyalah sebuah hashtag(#) karena item menu ini tidak akan menautkan ke halaman tertentu. Kami akan menggunakan item menu ini untuk menyebarkan menu mega kami di klik.

Label navigasi memiliki beberapa kode html sederhana (sebuah div dengan kelas "hamburger"). Ini akan menjadi apa yang kami gunakan untuk menampilkan ikon hamburger kami menggunakan CSS Kustom.

Kelas CSS "mega-menu" adalah yang menyebarkan fungsionalitas menu mega. Kelas css ini hanya boleh diterapkan sekali ke item menu induk utama dan bukan ke sub item mana pun.

Sekarang saatnya menambahkan item menu yang akan membentuk mega menu Anda. Untuk contoh ini saya menggunakan item induk dan sub menu berikut di bawah item menu mega utama:

  • Tautan Ikon Hamburger Menu Mega
    • Tentang kami
      • Tim kita
      • Misi kita
      • sejarah perusahaan
    • Jasa
      • Desain web
      • Pengembangan web
      • SEO
    • Pekerjaan kita
      • Blog
      • Perdagangan elektronik
      • Perusahaan
    • Hubungi kami
      • Mendukung
      • Petunjuk arah
      • Pekerjaan

Sekarang atur/tarik keempat item menu (masing-masing dengan tiga sub item sendiri) untuk menjadi sub item dari tautan Mega Menu induk utama.

Ketika Anda selesai mengatur menu, pastikan untuk memeriksa Menu Utama di bawah Pengaturan menu.

Simpan Menu

Menambahkan jQuery untuk Menampilkan Menu di Klik Alih-alih di Arahkan

Sekarang setelah menu mega Anda dibuat, kami perlu menambahkan beberapa jQuery untuk membuat menu mega kami ditampilkan saat mengklik ikon alih-alih saat melayang (yang merupakan default). Untuk melakukan ini, buka Opsi Tema → Integrasi dan tambahkan skrip berikut ke bagian “Tambahkan kode ke kepala blog Anda”: 

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

Menambahkan CSS Khusus

Saat Anda berada di Opsi Tema, di bawah Pengaturan Umum, tambahkan CSS Kustom berikut: 

/*** 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*/
}

Itu dia!

Sekarang pergi dan lihat hasilnya

Opsi Kustomisasi Lainnya

CSS yang Anda masukkan memiliki komentar di seluruh sehingga Anda dapat membuat perubahan pada gaya ikon hamburger Anda. Di sinilah Anda dapat menemukan dua bagian utama CSS untuk menata ikon Anda:

Mengubah Ikon Hamburger

Divi hadir dengan berbagai ikon font yang dapat Anda gunakan untuk situs Anda. Jika Anda ingin mengubah ikon hamburger untuk gaya yang berbeda, yang perlu Anda lakukan adalah menemukan dan mengedit baris CSS yang diberi label dengan komentar “ubah ikon di sini”: 

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

Berikut adalah nilai konten yang berbeda untuk ikon hamburger yang berbeda. Cukup ganti “\61” dengan salah satu dari berikut ini:

Menu Ikon Kotak – \62

Menu Ikon Lingkaran – \63

ul Ikon – \64

ol Ikon – \65

Ikon Menu Kotak Gelap – \e056

Ikon Menu Lingkaran Gelap – \e057

Mengubah Ikon "X"

Jika Anda menggunakan ikon menu hamburger yang berbeda, Anda harus mengubah ikon "x" agar sesuai dengan desain. Cukup temukan temukan css berikut: 

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

Ganti “\4d” dengan salah satu nilai konten berikut:

Ikon Menu Tutup Lingkaran – \51

Lingkaran Tutup Ikon Menu Gelap – \e051

Seperti inilah tampilan ikon hamburger menu mega dengan gaya ikon lingkaran hitam gratis di tempatnya:

Mengubah Warna Ikon Hamburger Anda

Jika Anda ingin mengubah warna ikon hamburger Anda, edit baris CSS ini berlabel "ubah warna ikon": 

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

Mengubah Ukuran Ikon Hamburger Anda

Jika Anda ingin mengubah ukuran ikon hamburger Anda, edit baris CSS ini berlabel "ubah ukuran ikon di sini": 

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

Menambahkan Label ke Ikon Hamburger Anda

Sangat mudah untuk menambahkan label ke ikon Anda. Cukup kembali ke Appearance → Menus dan edit item menu paling atas yang Anda berikan pada kelas "mega-menu". Di kotak teks label navigasi, tambahkan teks label Anda di dalam div. Untuk contoh ini, saya menambahkan label “menu”.

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

Sekarang hamburger Anda memiliki label di sebelahnya.

Responsif?

Menu mega hanya berfungsi pada ukuran layar yang lebih lebar dari 980px. Untuk ukuran layar di bawah 980px (tablet dan smartphone), menu akan beralih ke menu bawaan ponsel.

Pikiran Akhir

Jika Anda menyukai menu mega dan ingin membuat desain yang bersih dan minimalis untuk header Anda, menambahkan ikon hamburger untuk menampilkan menu mega Anda adalah solusi yang bagus. Sekarang pengguna Anda dapat melihat semua tautan navigasi Anda sekaligus dengan satu klik sederhana.

Plus, ikon font bawaan Divi memudahkan untuk menyesuaikan ikon hamburger Anda menggunakan css, tanpa harus membuat ikon dari awal.

Anda juga dapat menambahkan gambar ke menu mega Anda untuk membuat menu mega yang lebih menonjol.

Itu dia!

Saya harap Anda menikmati fitur ini. Looking forward untuk mendengar dari Anda di komentar.