Divi Mega Menünüz için Hamburger Simgesi Nasıl Oluşturulur

Yayınlanan: 2017-04-18

Hamburger ikonları menülerle eş anlamlı hale geldi. Yığılmış üç yatay çizgi, bir liste fikrini temsil eder ve bariz benzerlikleri nedeniyle “hamburger” lakabını almıştır. Divi, ana menünüzü mobil cihazlarda ve "kaydır" ve "tam ekran" gibi belirli başlık stillerinde geçiş yapmak için hamburger simgesini kullanır.

Bugün size, tıkladığınızda mega menü arasında geçiş yapmak için bir hamburger simgesinin nasıl kullanılacağını göstereceğim. Bu, çok sayıda menü seçeneğine sahip siteler için harika bir çözümdür. Hamburger simgesi, başlık dağınıklığını ücretsiz tutar. Ayrıca mega menünün düzenli 4 sütun düzeni, kullanıcıların ihtiyaç duyduklarını hızlı ve verimli bir şekilde bulmalarını sağlar.

Öncesi ve Sonrası

Varsayılan olarak mega menü, ana ana menü bağlantısının üzerine gelindiğinde çalışır:

Yeni tasarımı ve işlevselliği uyguladıktan sonra, mega menü yalnızca hamburger simgesine tıkladığınızda görünür.

Tasarımı Divi ile Uygulamak

Youtube Kanalımıza Abone Olun

Menünüzü Mega Menüye Dönüştürün

Öncelikle bir mega menü oluşturmanız veya mevcut menünüzü bir mega menüye dönüştürmeniz gerekir. Bu kısım oldukça basit.

WordPress kontrol panelinden Görünüm → Menüler'e gidin. Yeni Menü Oluştur'a tıklayın ve menünüze bir ad verin.

Menü Oluştur'a tıklayın

Menüler ekranının sağ üst köşesindeki Ekran Seçenekleri sekmesine tıklayarak ve CSS Sınıfları'nı işaretleyerek CSS Sınıfları menü özelliğini etkinleştirdiğinizden emin olun.

Artık menü öğelerinizi oluşturduğunuz yeni menüye ekleyebilirsiniz.

Öncelikle hamburger ikonumuz olacak menü maddesini ekleyelim. Bu menü öğesi, diğer tüm menü öğelerinin ebeveyni olacaktır.

Bu menü öğesini yapmak için aşağıdaki ayarlarla özel bir bağlantı oluşturun: 

URL: http://#

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

CSS Classes: mega-menu

URL sadece bir hashtag(#) çünkü bu menü öğesi belirli bir sayfaya bağlantı vermeyecektir. Mega menümüzü tıklamayla dağıtmak için bu menü öğesini kullanacağız.

Gezinme etiketinin bazı basit html kodları vardır ("hamburger" sınıfına sahip bir div). Özel CSS kullanarak hamburger simgemizi göstermek için kullanacağımız şey bu olacak.

CSS sınıfı "mega-menü", mega menü işlevini dağıtan şeydir. Bu css sınıfı, herhangi bir alt öğeye değil, ana üst menü öğesine yalnızca bir kez uygulanmalıdır.

Şimdi mega menünüzü oluşturacak menü öğelerini ekleme zamanı. Bu örnek için ana mega menü öğesinin altında aşağıdaki ana ve alt menü öğelerini kullanıyorum:

  • Mega Menü Hamburger Simgesi Bağlantısı
    • Hakkımızda
      • Bizim takım
      • Görevimiz
      • Şirket Geçmişi
    • Hizmetler
      • Web Tasarım
      • Web Geliştirme
      • SEO
    • İşimiz
      • Bloglar
      • e-ticaret
      • Kurumsal
    • Bizimle iletişime geçin
      • Destek
      • Talimatlar
      • Meslekler

Şimdi ana ana Mega Menü bağlantısının alt öğeleri olmak için dört menü öğesini (her biri kendi üç alt öğesi olan) düzenleyin/sürükleyin.

Menüyü düzenlemeyi tamamladığınızda, Menü ayarları altında Birincil Menü'yü kontrol ettiğinizden emin olun.

Menüyü Kaydet

Vurgulu Olmak Yerine Tıklamada Menüyü Göstermek için jQuery Ekleme

Artık mega menünüz oluşturulduğuna göre, mega menümüzün üzerine gelmek yerine simgeye tıkladığınızda (varsayılan olan) gösterilmesini sağlamak için biraz jQuery eklememiz gerekiyor. Bunu yapmak için Tema Seçenekleri → Entegrasyon'a gidin ve aşağıdaki komut dosyasını “Blogunuzun başlığına kod ekleyin” bölümüne ekleyin: 

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

Özel CSS Ekleme

Tema Seçenekleri'ndeyken, Genel Ayarlar altında aşağıdaki Özel CSS'yi ekleyin: 

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

Bu kadar!

Şimdi git ve sonuçlarına bak

Daha Fazla Özelleştirme Seçeneği

Girdiğiniz CSS, hamburger simgesi stilinizde değişiklik yapabilmeniz için yorumlara sahiptir. Simgenizi biçimlendirmek için CSS'nin iki ana bölümünü burada bulabilirsiniz:

Hamburger Simgesini Değiştirme

Divi, siteniz için kullanabileceğiniz çeşitli yazı tipi simgeleriyle birlikte gelir. Hamburger ikonunu farklı bir stil için değiştirmek isterseniz, tek yapmanız gereken “buradaki simgeyi değiştir” yorumuyla etiketlenmiş CSS satırını bulup düzenlemek: 

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

İşte farklı hamburger simgeleri için farklı içerik değerleri. “\61” ifadesini aşağıdakilerden biriyle değiştirmeniz yeterlidir:

Kare Simge menüsü – \62

Daire Simgesi Menüsü – \63

ul Simgesi – \64

ol Simge – \65

Kare Menü Simgesi Koyu – \e056

Daire Menü Simgesi Koyu – \e057

“X” Simgesini Değiştirme

Farklı hamburger menü ikonu kullanıyorsanız “x” ikonunu tasarıma uygun şekilde değiştirmelisiniz. Basitçe aşağıdaki css'yi bulun: 

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

“\4d”yi aşağıdaki içerik değerlerinden biriyle değiştirin:

Daire Kapat Menü Simgesi – \51

Daire Kapat Menü Simgesi Koyu – \e051

Ücretsiz koyu daire simgesi stilleriyle birlikte mega menü hamburger simgesi şöyle görünür:

Hamburger Simgenizin Rengini Değiştirme

Hamburger simgenizin rengini değiştirmek istiyorsanız, "simge rengini değiştir" etiketli bu CSS satırını düzenleyin: 

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

Hamburger Simgenizin Boyutunu Değiştirme

Hamburger simgenizin boyutunu değiştirmek istiyorsanız, "simge boyutunu buradan değiştir" etiketli bu CSS satırını düzenleyin: 

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

Hamburger Simgenize Etiket Ekleme

Simgenize bir etiket eklemek kolaydır. Basitçe Görünüm → Menüler'e geri dönün ve “mega-menü” sınıfına verdiğiniz en üstteki menü öğesini düzenleyin. Gezinme etiketi metin kutusunda, etiket metninizi div'in içine ekleyin. Bu örnek için “menü” etiketini ekledim.

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

Artık hamburgerinizin yanında bir etiket var.

Duyarlı mı?

Mega menüler yalnızca 980 pikselden daha geniş ekran boyutlarında çalışır. 980 pikselin altındaki ekran boyutu (tabletler ve akıllı telefonlar) için menü, varsayılan mobil menüye geçecektir.

Son düşünceler

Mega menüleri seviyorsanız ve başlığınız için temiz ve minimalist bir tasarım oluşturmak istiyorsanız, mega menünüzü görüntülemek için bir hamburger simgesi eklemek harika bir çözümdür. Artık kullanıcılarınız, basit bir tıklama ile tüm gezinme bağlantılarınızı aynı anda görebilir.

Ayrıca Divi'nin yerleşik yazı tipi simgeleri, sıfırdan simgeler oluşturmak zorunda kalmadan hamburger simgelerinizi css kullanarak özelleştirmenizi kolaylaştırır.

Daha da çarpıcı mega menüler oluşturmak için mega menülerinize resimler de ekleyebilirsiniz.

Bu kadar!

Umarım bu özelliği beğenirsiniz. Yorumlarda sizden haber bekliyorum.