Divi ve Anime.js ile Stagger-Animated Hamburger Menüsü Nasıl Oluşturulur

Yayınlanan: 2021-02-17

Geçmişte Divi ve Divi Tema Oluşturucu ile oluşturabileceğiniz farklı türde başlıklar paylaşmıştık. Aslında, bu gezinme gönderisinde listelenen tüm bu öğreticileri bulabilirsiniz. Bu gönderide, size tam ekran bir üstbilgiyi nasıl oluşturacağınızı gösterdiğimizi fark edeceksiniz, ancak başlık tasarımınızı daha da ileri götürmenize yardımcı olmak için, size özel animasyonlu bir hamburger menüsünün nasıl oluşturulacağını da göstereceğiz. Oluşturacağımız hamburger menüsü hakkında birkaç dikkate değer şey var:

Ziyaretçiler hamburger simgesine tıkladığı anda, tam ekran bir başlık geçiş yapacak ve her menü öğesi, özel animasyonlu bir görünüm ve his vererek tek tek ortaya çıkacak.
Menü her açıldığında özel animasyonlar tetiklenir
Ana menü öğelerine de açılır öğeler ekleyebileceksiniz, bunlar tıklandığında açılır ve birisi menüyü kapattığında veya bir gezinme öğesini tıkladığında otomatik olarak kapanır

Başka bir deyişle, bu kesinlikle web sitenize o gelişmiş görünümü ve hissi eklemenize yardımcı olacak bir başlık öğreticisidir. Öğeleri istediğiniz gibi şekillendirebileceksiniz ve JSON şablon dosyasını ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

hamburger menüsü

Mobil

hamburger menüsü

ÜCRETSİZ Global Başlık Şablonunu İndirin

Ücretsiz genel başlık şablonuna el koymak için önce aşağıdaki düğmeyi kullanarak bunları indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

1. Yeni Başlık Şablonu Oluşturun

Divi Tema Oluşturucu'ya Git ve Yeni Genel Başlık Şablonu Ekle

Divi Theme Builder'a giderek başlayın. Bir tane var, yeni bir genel başlık ekleyin.

hamburger menüsü

Sıfırdan İnşa Etmeye Başlayın

Ve başlık tasarımını sıfırdan oluşturmaya başlayın.

hamburger menüsü

2. Logo ve Hamburger Simgesi Oluşturun

Bölüm Ayarları

Arka plan rengi

Şablon düzenleyiciye girdikten sonra, logoyu ve hamburger simgesini oluşturarak başlayacağız. Orada zaten bir bölüm olduğunu fark edeceksiniz. Bölüm ayarlarını açın ve şeffaf bir arka plan rengi uygulayın.

Arka Plan Rengi: rgba(255,255,255,0)

hamburger menüsü

aralık

Bölümün tasarım sekmesine gidin ve sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

Üst Dolgu: 0px
Alt Dolgu: 0px

hamburger menüsü

Konum

Ardından, gelişmişe gidin ve bölümü sabitleyin.

Pozisyon: Sabit
Konum: Sol Üst
Z İndeksi: 13

hamburger menüsü

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

hamburger menüsü

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın, tasarım sekmesine geçin ve boyutlandırma ayarlarını buna göre değiştirin:

Özel Oluk Genişliğini Kullan: Evet
Oluk Genişliği: 1
Sütun Yüksekliklerini Eşitle: Evet
Genişlik: %95
Maksimum Genişlik: %100

hamburger menüsü

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

Üst Dolgu: 0px
Alt Dolgu: 0px

hamburger menüsü

Ana Eleman CSS

Daha küçük ekran boyutlarında hem logonun hem de hamburger simgesinin yan yana görünmesini sağlamak için satırın ana öğesine bir satır CSS kodu ekleyeceğiz.

display: flex;

hamburger menüsü

Sütun 1'e Görüntü Modülü Ekle

Logo Yükle

Sütun 1'deki Resim Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bir logo yükleyin.

hamburger menüsü

boyutlandırma

Tasarım sekmesine gidin ve sonraki boyutlandırma ayarlarını değiştirin.

Maksimum genişlik:
- Masaüstü: 80 piksel
- Tablet ve Telefon: 50px

hamburger menüsü

Konum

Ardından, tüm modülü yeniden konumlandırın.

Pozisyon: Mutlak
Konum: Sol Üst
Dikey Ofset: 20px

hamburger menüsü

Sütun 3'e Metin Modülü Ekle

İçerik Kutusundaki HTML Yapısı

Üçüncü sütunda bir Metin Modülü ekleyeceğiz. Hamburger simgemizi oluşturmak için bu Metin Modülünü kullanacağız. İçerik kutusundaki metin sekmesine geçerek başlayın ve aşağıdaki HTML etiketlerini ekleyin:

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

hamburger menüsü

boyutlandırma

Daha sonra modülün boyutlandırma ayarlarını değiştirin.

Genişlik: 80 piksel
Yükseklik: 80 piksel

hamburger menüsü

aralık

Ardından, farklı ekran boyutlarına özel dolgu değerleri uygulayın.

Üst Dolgu:
- Masaüstü: 10 piksel
- Tablet ve Telefon: 17px
Alt Dolgu:
- Masaüstü: 10 piksel
- Tablet ve Telefon: 17px
Sol Dolgu:
- Masaüstü: 15 piksel
- Tablet ve Telefon: 30 piksel
Sağ Dolgu:
- Masaüstü: 15 piksel
- Tablet ve Telefon: 10px

hamburger menüsü

Konum

Bu modülü de yeniden konumlandırın.

Pozisyon: Mutlak
Konum: Sol Üst Köşe

hamburger menüsü

3. Hamburger Menüsü Oluşturun

Yeni Bölüm Ekle

Degrade Arka Plan

Artık logoyu ve hamburger simgesini yerleştirdiğimize göre, hamburger menüsünü ve tüm öğelerini oluşturmaya adanmış bir sonraki bölüme geçebiliriz. Yeni bir bölüm ekleyerek başlayın, bölüm ayarlarını açın ve bir degrade arka planı uygulayın.

Renk 1: #000000
Renk 2: #111111
Gradyan Türü: Doğrusal
Gradyan Yönü: 90deg
Başlangıç Konumu: %50
Bitiş Konumu: %50

hamburger menüsü

boyutlandırma

Sonraki boyutlandırma ayarlarına minimum yükseklik ve maksimum yükseklik uygulayın.

Min Yükseklik: 100vh
Maksimum Yükseklik: 100vh

hamburger menüsü

aralık

Ardından, tüm varsayılan bölüm üst ve alt dolgularını kaldırın.

Üst Dolgu: 0px
Alt Dolgu: 0px

hamburger menüsü

taşmalar

Taşmaları da değiştirin.

Yatay Taşma: Gizli
Dikey Taşma: Otomatik

hamburger menüsü

Konum

Menünün her zaman açılabildiğinden emin olmak için, gelişmiş sekmesindeki bölümü yeniden konumlandıracağız.

Pozisyon: Sabit
Konum Üst Merkez

hamburger menüsü

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

hamburger menüsü

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın, tasarım sekmesine geçin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

Özel Oluk Genişliğini Kullan: Evet
Oluk Genişliği: 1
Sütun Yüksekliklerini Eşitle: Evet
Genişlik: %100
Maksimum Genişlik: %100

hamburger menüsü

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

Üst Dolgu: 0px
Alt Dolgu: 0px

hamburger menüsü

taşmalar

Ardından, gelişmiş sekmeye gidin ve taşmaları değiştirin.

Yatay Taşma: Gizli
Dikey Taşma: Otomatik

hamburger menüsü

Konum

Satırı da yeniden konumlandırın.

Pozisyon: Mutlak
Konum Üst Merkez

hamburger menüsü

Sütun 1 Ayarları

aralık

Ardından, satırımızın sütun 1 ayarlarını açacağız ve bazı özel duyarlı dolgu değerleri uygulayacağız.

Üst Dolgu:
- Masaüstü: 24vh
- Tablet & Telefon: 10vh
Alt Dolgu:
- Masaüstü: 24vh
- Tablet & Telefon: 5vh
Sol Dolgu: %13
Sağ Dolgu: %13

hamburger menüsü

Sınır

Bazı sınır ayarlarını da uygulayacağız:

Sağ Kenar Genişliği:
- Masaüstü: 2 piksel
- Tablet ve Telefon: 0px\
Sağ Kenar Rengi: #191919
Bottm Kenar Genişliği:
- Masaüstü: 0 piksel
- Tablet ve Telefon: 2px
Sağ Kenar Rengi: #191919

hamburger menüsü

Sütun 2 Ayarları

aralık

Ardından, 2. sütuna geçeceğiz ve orada da bazı özel dolgu değerleri uygulayacağız.

Üst Dolgu:
- Masaüstü: 24vh
- Tablet & Telefon: 5vh
Alt Dolgu:
- Masaüstü: 24vh
- Tablet & Telefon: 5vh
Sol Dolgu: %13
Sağ Dolgu: %13

hamburger menüsü

Metin Modülü #1'i Sütun 1'e ekleyin

H3 İçeriği Ekle

Sütun 1'deki ilk Metin Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bazı H3 içeriğini ekleyin.

hamburger menüsü

H3 Metin Ayarları

Tasarım sekmesine gidin ve H3 metin ayarlarını aşağıdaki gibi değiştirin:

Başlık 3 Yazı Tipi: Montserrat
Başlık 3 Yazı Tipi Ağırlığı: Ultra Kalın
Başlık 3 Yazı Tipi Stili: Büyük Harf
Başlık 3 Metin Rengi: #ffffff
Başlık 3 Metin Boyutu
- Masaüstü: 1vw
- Tablet: 2.5vw
- Telefon: 3.5vw
Başlık 3 Harf Aralığı: 5px

hamburger menüsü

aralık

Sonra biraz alt kenar boşluğu ekleyin.

Alt Marj: 5vh

hamburger menüsü

Metin Modülünü Klonla ve Çoğaltmayı Sütun 2'ye Yerleştir

Bu ilk modülü tamamladıktan sonra, onu bir kez klonlayabilir ve kopyayı 2. sütuna yerleştirebilirsiniz.

hamburger menüsü

İçeriği Değiştir

Bu yinelenen modüldeki içeriği değiştirdiğinizden emin olun.

hamburger menüsü

Metin Modülü #2'yi Sütun 2'ye ekleyin

İçerik Kutusundaki HTML Yapısı

Alt menü öğeleri dahil olmak üzere menü öğelerimizi sergilemek için yeni bir Metin Modülünün metin sekmesini kullanacağız. Devam edin ve 1. sütuna yeni bir Metin Modülü ekleyin ve aşağıdaki HTML'yi ekleyin:

<span style="color: #686868;">01—</span> <a href="#">Services</a> <span class="toggle-sub-menu" style="color: #ffff00;">+</span>
<ul>
	<li><a href="#">Web design</a></li>
	<li><a href="#">Branding</a></li>
</ul>

hamburger menüsü

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:

Metin Yazı Tipi: Montserrat
Metin Yazı Tipi Ağırlığı: İnce
Metin Rengi: #ffffff
Yazı Boyutu:
- Masaüstü: 2.7vw
- tablet: 4vw
- Telefon: 6vw
Metin Harf Aralığı: 0.1em
Metin Satırı Yüksekliği: 1em

hamburger menüsü

Bağlantı Metni Ayarları

Bağlantı metni rengini de değiştirin.

Lin Metin Rengi: #ffffff

hamburger menüsü

Sırasız Liste Metni Ayarları

Ardından, sırasız liste metni ayarlarını değiştirin.

Sırasız Liste Yazı Tipi: Montserrat
Sırasız Liste Yazı Tipi Ağırlığı: Kalın
Sırasız Liste Yazı Tipi Stili: Büyük Harf
Sırasız Metin Boyutu:
- Masaüstü: 1vw
- Tablet: 2.5vw
- Telefon: 3.5vw
Sırasız Liste Satır Yüksekliği: 1.5em
Sırasız Liste Stili Türü: Yok
Sırasız Liste Stili Konumu: İçeride

hamburger menüsü

aralık

Ve bazı özel üst ve alt dolgular ekleyerek modül ayarlarını tamamlayın.

Üst Dolgu: %5
Alt Dolgu: 5%

hamburger menüsü

Alt Menü Olmadan Varyasyon Oluşturmak için Metin Modülünü Klonla

İlk modülü tamamladıktan sonra bir kez klonlayabilirsiniz. Bu çoğaltmayı, alt menü öğeleri olmadan menü öğesinin bir varyasyonunu oluşturmak için kullanacağız.

hamburger menüsü

Alt Menüyü Bırak ve Simgeyi Değiştir

Bu yinelenen modülü alt menü öğeleri olmadan normal bir menü öğesine dönüştürmek için bunun yerine bu HTML yapısını kullanın:

<span style="color: #686868;">03—</span> <a href="#">Contact</a>

hamburger menüsü

Her İki Menü Öğesi Türünü de Yeniden Kullanın

Menü öğelerinin her iki varyasyonunu da yerleştirdikten sonra, klonlayarak ve içeriği değiştirerek her ikisini de uygun şekilde yeniden kullanabilirsiniz.

hamburger menüsü

Metin Modülü #2'yi Sütun 2'ye ekleyin

H4 ve Paragraf İçeriğini İçerik Kutusuna Ekle

2. sütunda, seçtiğimiz bazı H4 ve paragraf içeriğine sahip başka bir Metin Modülü ekleyeceğiz.

hamburger menüsü

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

Yazı Tipi: Alata
Metin Rengi: #cecece
Yazı Boyutu:
- Masaüstü: 0.8vw
- Tablet: 2.4vw
- Telefon: 3.4vw
Metin Harf Aralığı: 1px
Metin Satırı Yüksekliği: 1.5em
Metin Rengi: Açık

hamburger menüsü

H4 Metin Ayarları

H4 metin ayarlarında da bazı değişiklikler yapın.

Başlık 4 Metin Boyutu:
- Masaüstü: 1vw
- Tablet: 3vw
- Telefon: 4vw

hamburger menüsü

boyutlandırma

Ardından, boyutlandırma ayarlarında modülün genişliğini değiştirin.

Genişlik: %48

hamburger menüsü

Ana Eleman CSS

Ve modülün ana öğesine bir satır CSS kodu ekleyin. Bu CSS kodu satırı, iki Metin Modülünü yan yana yerleştirmemize yardımcı olacaktır.

display: inline-block;

hamburger menüsü

Klon Metin Modülü #2

Kopyayı Değiştir

Metin Modülünü tamamladığınızda, onu bir kez kopyalayabilir ve içeriği buna göre değiştirebilirsiniz.

hamburger menüsü

2. Sütun'a Sosyal Medya Takip Modülü Ekleyin

Seçtiğiniz Sosyal Ağları Ekleyin

Bu tasarımda ihtiyacımız olan son modül 2. sütundaki Sosyal Medya Takip Modülüdür. İstediğiniz sosyal ağları ekleyin.

hamburger menüsü

Her Sosyal Ağın Arka Plan Rengini Tek Tek Kaldırın

Her sosyal ağın arka plan rengini tek tek kaldırın.

hamburger menüsü

aralık

Ardından, genel modül ayarlarına geri dönün ve biraz üst kenar boşluğu uygulayın.

Üst Marj: 5vh

hamburger menüsü

4. İşlevsellik Ekleyin

Hamburger Simge Metin Modülüne CSS Sınıfı Ekleme

Hamburger menü tasarımımızın temeli atıldığına göre, artık işlevsellik eklemeye odaklanabiliriz! Yapmanız gereken ilk şey, hamburger simgesini içeren Metin Modülünü açmak ve aşağıdaki CSS sınıfını eklemek:

CSS Sınıfı: tam genişlikte açık

hamburger menüsü

Bölüm #2'ye CSS Sınıfı Ekle

Ardından, hamburger menü bölümü, bölüm #2'yi açın ve aşağıdaki CSS sınıfını ekleyin:

CSS Sınıfı: tam genişlik menüsü

hamburger menüsü

Tam Genişlik Menüsünde Her Modüle CSS Sınıfı Ekle

Özel kademeli animasyon efekti oluşturmak için, 2. bölümdeki her modüle aşağıdaki CSS sınıfını uygulamamız gerekecek.

CSS Sınıfı: şaşırtma etkisi

hamburger menüsü

Menü Öğelerine Ekstra CSS Sınıfı Ekleme

Sütun 1'deki menü öğelerinin her birine "ana menü öğesi" adı verilen fazladan bir CSS sınıfı ekleyin.

CSS Sınıfı: sendeleme efektli ana menü öğesi

hamburger menüsü

Bölüm #1'e Kod Modülü Ekle

İşlevselliği uygulamak için özel CSS ve JQuery kodu kullanacağız. Bu kodu, bölüm #1'deki satırın ikinci sütunundaki yeni bir Kod Modülüne yerleştireceğiz.

hamburger menüsü

CSS Kodu Ekle

Aşağıdaki yazdırma ekranında görebileceğiniz gibi , aşağıdaki CSS kodunu stil etiketleri arasına Kod Modülüne ekleyin.

/* enable class below once you're done editing the menu */

/*
.fullwidth-menu {
opacity: 0;
top: 0vh;
visibility: hidden;
}
*/

.line{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.fullwidth-open.open .line{
background: white; 
}

.line-1 {
top: 15px;    
}
  
.line-2 {
top: 25px;
width: 80%;
}
 
.line-3 {
top: 35px;
width: 50%;
}
 
.fullwidth-open.open .line-1 {
top: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
 
.fullwidth-open.open .line-2 {
display: none;
}
 
.fullwidth-open.open .line-3 {
top: 25px;
width: 100%;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
 
.fullwidth-menu-open {
opacity: 1 !important;
top: 0 !important;
visibility: visible !important;
}
 
.fullwidth-menu {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
  
.main-menu-item ul {
display: none; 
padding: 0;
margin-top: 50px;
}
  
.toggle-sub-menu {
cursor: pointer;
}

hamburger menüsü

Anime.js Kitaplığı Ekle

Aşağıdaki yazdırma ekranında görebileceğiniz gibi, komut dosyası etiketlerini kullanarak Anime JavaScript kitaplığını ekleyerek devam edin. Eğiticinin bir sonraki adımında sendeleme efekti oluşturmak için bu harika kitaplığı kullanacağız.

src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

hamburger menüsü

JQuery Kodu Ekle

Hamburger menümüzdeki tıklama işlevleri aşağıdaki JQuery koduyla desteklenmektedir. Aşağıdaki yazdırma ekranında görebileceğiniz gibi bu kodu script etiketleri arasına yerleştirdiğinizden emin olun.

jQuery(function($){
$(document).ready(function(){  

// All variables needed in functions  
var menuSection = $('.fullwidth-menu');
var hamburgerIcon = $('.fullwidth-open');
var menuLink = $('.fullwidth-menu a');
var subMenu = $('.main-menu-item ul');
var toggleIcon = $('.toggle-sub-menu');
  
  
// Open fullwidth menu & animate items  
hamburgerIcon.click(function(){
	$(this).toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');
	if (menuSection.hasClass("fullwidth-menu-open")) {
		anime({
  		targets: '.stagger-effect',
  		translateY: [150, 0],
  		opacity: [0, 1],
  		loop: false,
  		delay: anime.stagger(100, {easing: 'easeOutQuad'})
		});

	} else { 
		subMenu.slideUp();  
		toggleIcon.text($(this).text() == '+' ? '-' : '+');  
	}
});

// Close fullwidth menu when clicking an item
menuLink.click(function(){
	hamburgerIcon.toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');  
  subMenu.slideUp();  
	toggleIcon.text($(this).text() == '+' ? '-' : '+');  
});
  
// Change icon when toggling the submenu  
toggleIcon.click(function(){  
	var subMenu = $(this).parent().find("ul");
	subMenu.slideToggle(); 
	$(this).text($(this).text() == '-' ? '+' : '-'); 
});  
  
});
});

hamburger menüsü

Tam Ekran Başlık Tasarımınızı Tamamlar Tamamlamaz CSS Sınıfını Etkinleştirin

Son olarak, Kod Modülünde ilk bölümde bulabileceğiniz bir CSS sınıfını etkinleştireceğiz. Kod Modülünü açın ve sınıfın başındaki ve sonundaki “/* */” işaretini kaldırın. Bu sınıfın etkinleştirilmesi (zaten etkin olan bazı JQuery kodlarıyla birlikte), biri sayfalarınızdan birini ziyaret ettiğinde menü öğelerini içeren bölümün hemen yüklenmemesini sağlar. Bu sınıfı etkinleştirdiğinizde, sayfanızdaki ikinci bölüm Visual Builder'dan kaybolacaktır, ancak yine de buna Tel Çerçeve Modunda erişebilir veya ek değişiklikler yapmak istiyorsanız CSS sınıfını kapatabilirsiniz.

hamburger menüsü

5. Başlık ve Tema Oluşturucu Değişikliklerini Kaydet

Bu kadar! Yapmanız gereken tek şey şablonu ve Divi Theme Builder'ı kaydetmek ve sonucu web sitenizde görüntülemek!

hamburger menüsü

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

hamburger menüsü

Mobil

hamburger menüsü

Son düşünceler

Bu gönderide, Divi başlığınızla nasıl yaratıcı olunacağını gösterdik. Daha spesifik olarak, size özel animasyonlu bir hamburger menüsünün nasıl oluşturulacağını gösterdik. Bir ziyaretçi hamburger simgesine tıkladığı anda, tam ekran bir menü geçiş yapar ve menü öğelerini birer birer gösterir, bu da güzel bir kullanıcı deneyimi ile sonuçlanır. Şablon JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.