oluşturmak ister misin sürgülü ve itmeli menü DIVI'da hangisi sayfanızın öğelerini gizlemez?
Çok sayıda gezinme bağlantısına sahip büyük başlıklar, bilgisayarınızda değerli yer kaplayabilir. Site Web. Bu nedenle içerik ve kayar menüler giderek daha popüler hale geliyor. Çoğu zaman, görüntülenmek üzere kayan menüler ekranın üstünde kalır. içindekiler sayfanın belirli öğelerini gizleyerek.
Ancak kayan menü biraz farklı çalışır. Kaydırmalı itme efekti, menünün sayfanın üst kısmından içeri doğru kayarken aynı anda da düğmeye basması açısından benzersizdir. içindekiler sayfadan aşağıya doğru, böylece hiçbir şey görünümden gizlenmez.
Bu eğitimde, Divi Theme Builder'ı kullanarak sıfırdan kayan bir itme menüsünün nasıl oluşturulacağını göstereceğiz.
Gidelim!
anket
İşte bu eğitimde oluşturacağımız kayan itme menüsüne hızlı bir bakış.
Divi tema oluşturucu ile kayan itme menüsünü oluşturun
Yeni bir global menü oluşturma
Menüyü oluşturmak için Divi Theme Builder'da yeni bir genel başlık oluşturacağız.
Divi > Tema Oluşturucu'ya gidin.
Ayrıca Oku: DIVI'da oturum açma formuyla genel başlık nasıl oluşturulur
Ardından, "Global bir başlık ekle" alanına tıklayın. web sitesi şablonu varsayılan olarak. Açılır listeden "Global Başlık Oluştur" seçeneğini seçin.
Push menüsünün oluşturulması
Birlikte oluşturacağımız ilk öğe, basmalı menü bölümüdür. Bu bölüm, menü geçiş düğmesine tıkladığınızda yukarı ve aşağı geçiş yapacak menü öğelerini içerecektir.
Bölüm ayarları
Varsayılan bölüm ayarlarını açın ve ayarları aşağıdaki gibi güncelleyin:
Arka fon
- Arka plan: #1a1e36
İç marj
- İç Kenar Boşluğu: 0px Üst, 0px Alt
CSS sınıfı
Gelişmiş sekmesinin altına, daha sonra JS kodumuzda kullanılacak olan aşağıdaki CSS sınıfını ekleyin.
- CSS sınıfı: et-push-menü
1 satırını ekle
Bölüm parametreleri tanımlandıktan sonra, bölümde tek sütunlu bir satır oluşturun.
Satır 1 Parametreleri
Ardından, satır parametrelerini aşağıdaki gibi güncelleyin:
boyutlandırma
- Özel Oluk Genişliğini Kullan: EVET
- Sütun aralığı: 1
- Maksimum genişlik: %100
- Maksimum genişlik: 1 piksel
aralık
- Marj: Üst 3vh, Alt 3vh
sınır
- Alt kenarlık genişliği: 1 piksel
- Alt kenarlık rengi: rgba(255,255,255,0.2)
Özel CSS
Gelişmiş sekmesinin altında, ana öğeye aşağıdaki özel CSS'yi ekleyin:
display:flex;
justify-content:center;
align-items:center;
Sütun parametreleri
Satır ayarları tanımlandıktan sonra, sütun ayarlarını açın ve ana öğeye özel bir CSS parçacığı ekleyin:
display:flex;
align-items:center;
justify-content:center;Bu, merkezi içindekiler Sütunun hem dikey hem de yatay olarak.
Bir düğme ekleyin
Artık Düğme modülünü kullanarak menü öğelerimizi eklemeye hazırız. Sütuna yeni bir düğme ekleyerek başlayın.
Ayrıca şu konudaki kılavuzumuza bakın: DIVI'da dikey gezinme menüsü nasıl oluşturulur
Düğme ayarları
Ardından, düğme ayarlarını aşağıdaki gibi güncelleyin:
içindekiler
- Düğme metni: Tasarım
- Düğme Bağlantı URL'si: # (daha sonra kendi özel URL'nizle değiştirin)
stil
- Düğme için özel stiller kullanın: EVET
- Düğme metin rengi: #ffffff
- Düğme Kenar Genişliği: 0 piksel
- Düğme Yazı Tipi: Montserrat
- Yumuşak Işık Düğmesi: Ağır
- Simge düğmesi: EVET
- Simge düğmesi: [Seçiminiz]
- Yalnızca Fareyle Üzerine Gelme Düğmesinde Simgeyi Göster: HAYIR
- Düğme Simge yerleşimi: Sol
Yinelenen sütun
Şimdi, menü için ek düğmeler oluşturmak için sütunu çoğaltabiliriz. Bu tasarım için, bize beş sütunluk bir satırda toplam 4 menü öğesi/düğmesi verecek şekilde sütunu 5 kez çoğaltalım.
2 satırını ekle
İlk satır tamamlandığında, farklı menü öğeleri için kullanılabilecek başka bir düğme satırı eklemeye hazırız.
Ayrıca okuyun: DIVI'da genel bir başlığa iletişim formu nasıl eklenir
Bir sonraki satırı oluşturmak için 1. satırı çoğaltın.
Biri hariç tüm sütunları sil
Ardından, yinelenen satırdaki bir sütun hariç tümünü silin.
Satır 2 Parametreleri
2. satır parametrelerini aşağıdaki gibi güncelleyin:
- Maksimum genişlik: 1 piksel
- Alt kenarlık genişliği: 0px
Sütun parametreleri
Ardından sütuna aşağıdaki gibi bir kenarlık ekleyin:
- Sağ kenarlık genişliği: 1 piksel
- Sağ kenarlık rengi: rgba(255,255,255,0.2)
Düğme ayarlarını güncelle
Sütun sağ kenarlığa sahip olduğunda, düğme ayarlarını açın ve aşağıdakileri güncelleyin:
- Düğme metin boyutu: 14 piksel
- Yumuşak Işık düğmesi: kalın metin
- Düğme harf aralığı: 2 piksel
- Düğme kopyalama stili: TT
- Simge düğmesi: HAYIR
Yinelenen sütun
Daha önce yaptığımız gibi, ek düğmeler ve sütunlar oluşturmak için sütunu çoğaltalım. Bu tasarım için, 3 sütunlu bir satırda bize toplam 4 düğme verecek şekilde sütunu 4 kez çoğaltalım.
Son sütundan kenarlığı kaldır
Son sütunun doğru kenarlığa sahip olmasını istemediğimizden, 4. sütun için ayarları açın ve kenarlık genişliğini güncelleyin:
- Sağ kenarlık genişliği: 0 piksel
Ana Başlık Çubuğunu Oluşturma
Ardından, ana başlık çubuğu bölümünü oluşturacağız. Bu başlık çubuğu her zaman görünür kalacak ve site logomuzu, harekete geçirici mesajı ve menü geçiş düğmemizi içeren şey olacaktır.
Bölüm ekle
Yeni bölümü eklemeden önce, önceki bölümün etiketini "Push Menü Bölümü"nü okuyacak şekilde güncellemek iyi bir fikirdir.
Ayrıca bakınız: DIVI'da Tema Oluşturucu ile Global Başlık Nasıl Oluşturulur
Ardından, ilk bölümün altında yeni bir bölüm oluşturun.
Bölüm ayarları
Şimdi yeni bölümün etiketini "Başlık Bölümü" okuyacak şekilde güncelleyin. Ardından bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
aralık
- İç Kenar Boşluğu: 0px Üst, 0px Alt
Satır ekle
Bölüm dolgusu ayarlandıktan sonra bölüme üç sütunlu bir satır ekleyin.
Satır Parametreleri
Satır parametresini açın ve aşağıdakileri güncelleyin:
boyutlandırma
- Oluk genişliği: 1
- Genişlik: %90
- Yükseklik: 70 piksel
aralık
- İç Kenar Boşluğu: 0px Üst, 0px Alt
Özel CSS
Gelişmiş sekmesinin altında, ana öğeye aşağıdaki özel CSS'yi ekleyin:
display:flex;
align-items:center;Bu, satırdaki sütunları dikey olarak ortalayacaktır.
Bir düğme ekleyin
Başlık bölümünde ana CTA'yı oluşturmak için üst bölümde ikinci bir satır butonunu kullanabiliriz. Düğmeyi üst bölümün 1. satırının 2. sütunundan kopyalayın ve başlık bölümünün satırının 1. sütununa yapıştırın.
Düğme ayarlarını güncelle
Ardından yinelenen düğme ayarlarını açın ve aşağıdakileri güncelleyin:
- Düğme metni: Kayıt
- Düğme metin boyutu: 14 piksel
- Düğme metin rengi: #1a1e36
- Simge düğmesi: EVET
- Simge düğmesi: Sağ ok (ekran görüntüsüne bakın)
Logo ekleyin
Orta sütuna bir Görüntü modülü ekleyin. Site logosunu dinamik olarak bu şekilde ekleyeceğiz.
Görüntü alanının üzerine gelin ve "Dinamik İçeriği Kullan" simgesini tıklayın. Açılır menüden "Site Logosu"nu seçin.
Görüntü Ayarları
Ardından, Stil sekmesi altında aşağıdakileri güncelleyin:
- Görüntü hizalama: ortalanmış
- Maksimum yükseklik: 55 piksel
Özel bir hamburger simgesi ekleyin
Menü geçişi olarak bir düzen modülü aracılığıyla normal bir simge kullanabilirdik, ancak bu eğitim için harika bir geçiş efektine sahip özel bir menü geçişi ekleyeceğimizi düşündüm.
Metin modülü ekle
Menü simgesini oluşturmak için, harici CSS ile stillendirilecek özel HTML kodlu bir metin modülü kullanacağız.
Devam edin ve sütun 3'e bir metin modülü ekleyin.
Metin modülüne HTML kodu ekleyin
Ardından, metin modülünün içeriğine aşağıdaki HTML kodunu ekleyin:
<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>
Arka fon
Metin modülüne bir arka plan rengi verin:
- Arka Plan Rengi: #1a1e36
Metni biçimlendirme
Ardından, Stil ayarlarını aşağıdaki gibi güncelleyin:
- Genişlik: 70 piksel
- Modül hizalaması: sağ
- Yükseklik: 70 piksel
- İç Kenar Boşluğu: 20px Üst, 20px Alt, 16px Sol, 16px Sağ
CSS sınıfı
Gelişmiş sekmesinin altına aşağıdaki CSS sınıfını ekleyin:
- CSS sınıfı: et-push-menü-toggle
kod ekle
Bu kayan basmalı menünün çalışması için ihtiyacımız olan işlevselliği eve getirmek için, bir Kod modülüne özel CSS ve jQuery'mizi ekleyeceğiz.
Devam edin ve Metin modülünün altındaki sütun 3'e bir Kod modülü ekleyin.
Ardından aşağıdaki kodu yapıştırın (Not: bu kodu etiketlere sarın stil düzgün çalışması için):
.line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #ffffff;
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;
}
.line-2 {
top: 10px;
}
.line-3 {
top: 20px;
}
.et-push-menu-toggle.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.et-push-menu-toggle.open .line-2 {
display: none;
}
.et-push-menu-toggle.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.et-push-menu {
display:none;
}
.et-fb .et-push-menu {
display:block;
}
.et-push-menu-toggle {
cursor:pointer;
}
Ardından, bu kodu doğrudan aşağıya kopyalayıp yapıştırın (önemli: düzgün çalışması için bu kodu komut dosyası etiketlerine sarın):
(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );
Düğme metnini ve bağlantılarını güncelle
Son olarak gerekli buton metni ve link URL'leri ile tüm butonları güncelleyebiliriz.
Tamamdır !
Ayarları kaydet
Tema Oluşturucu düzenini ve ayarlarını kaydetmeyi unutmayın.
Nihai sonuç
Nihai sonucu görmek için, sayfanızdaki sayfayı kontrol edin. web sitesi.
Yapışkan Yap
Menünün "yapışkan" bir versiyonunu istiyorsanız, aşağıdaki CSS kod parçasını kod modülüne (stil etiketlerinin arasına) eklemeniz yeterlidir:
header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
overflow-y: visible !important;
}
İşte sonuç.
DIVI'yı Şimdi İndirin !!!
Sonuç
Bu kayan basmalı menüyü beğeneceğinizi umuyoruz. Efekt benzersizdir ve daha yaratıcı başlıkların kapısını açar. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
