Divi ile Hover'da Genişleyen Yapışkan Menü Nasıl Oluşturulur

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, Divi's Mechanic Layout Pack'i kullanarak fareyle üzerine gelindiğinde genişleyen bir yapışkan menünün nasıl oluşturulacağını göstereceğiz. Sıfırdan yeniden oluşturabileceğiniz ve oluşturduğunuz her tür web sitesine uygulayabileceğiniz iki farklı tasarım örneğini ele alacağız! Menü, masaüstü ekran boyutlarında üzerine gelindiğinde gösterilecek ve mobil cihazlarda tıklandığında etkinleştirilecektir.

Hadi hadi bakalım!

Ön izleme

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

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Genel Adımlar

Sabit Gezinmeyi Devre Dışı Bırak

Divi Tema Seçeneklerine Git

Bazı genel adımlarla başlayacağız. Bu adımlar her iki örnek için de aynıdır ve istenen sonuca ulaşmak için gereklidir.

Sayfanızın alt kısmında genişleyen bir yapışkan menü kullanmayı planlıyorsanız, üst kısımdaki birincil menü çubuğunu dışarıda bırakmak isteyebilirsiniz. Bunu yapmak için Divi'nin tema seçeneklerine gitmeniz gerekecek.

Sabit Gezinmeyi Devre Dışı Bırak

Burada, sayfanızın üst kısmında boşluk kalmadığından emin olmak için sabit gezinme çubuğu seçeneğini devre dışı bırakmak isteyeceksiniz.

• Sabit Gezinme Çubuğu: Devre Dışı

Sayfadaki Birincil Menü Çubuğunu Gizle

Sayfa Ayarlarını Aç

Genişleyen yapışkan menüyü eklemek istediğiniz sayfaya gidin ve sayfa ayarlarını açın.

Özel CSS Ekle

Aşağıdaki CSS kod satırlarını sayfanıza ekleyerek birincil menüyü gizleyin.

#main-header {
display: none;
}

Sayfanın Sonuna Yeni Bölüm Ekle

Hangi örneği yeniden oluşturmak isterseniz isteyin, bazı temel adımlar aynı kalır. İlk adım, sayfanın altına normal bir bölüm eklemektir.

aralık

Bölüm ayarlarını açın ve tüm özel üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

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

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Ana Eleman

Satırın ana öğesine iki tek satırlık CSS kodu ekleyerek tüm satırın sayfamızın altına yapışmasına izin veriyoruz.

bottom: 0px;
position: fixed;

Z İndeksi

Ve satırın görünürlük ayarlarında Z indeksini artırarak satırın (ve sonraki adımlarda ekleyeceğimiz Metin Modülünün) tüm sayfa içeriğinin üstünde kalmasını sağlayacağız.

• Z İndeksi: 99

Sütuna Kod Modülü Ekle

Stil Etiketleri Arasına CSS Kodu Ekle

Genel adımların son kısmı, yeni satıra bir Kod Modülü eklemektir. Bu Kod Modülünün içine eklediğimiz CSS kodu, fareyle üzerine gelindiğinde ortaya çıkan etkiyi elde etmemize yardımcı olacaktır. Aşağıdaki CSS kod satırlarını modülün içine yapıştırın:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

Örnek 1'i Yeniden Oluştur

Sütuna Metin Modülü Ekle

İçerik Ekle

Artık tüm adımları tamamladığımıza göre, ilkinden başlayarak iki farklı tasarım örneğine odaklanmaya başlayabiliriz! Satırınızın sütununa bir Metin Modülü ekleyin. İçerik kutusunda, '≡ Menü' kopyasını göstermek için paragraf stilini kullanıyoruz. O zaman tüm menü öğelerini sırasız bir listeye yerleştiriyoruz. Ayrıca sayfa başlıklarının her birine ayrı ayrı bir bağlantı ekleyeceğiz.

Varsayılan Arka Plan Rengi

Modülün arka plan ayarlarına geçin ve arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

Vurgulu Arka Plan Rengi

Fareyle üzerine gelindiğinde bu arka plan rengini değiştirin.

• Arka Plan Rengi: rgba(255,255,255,0.83)

Degrade Arka Plan

Ve varsayılan bir degrade arka planı da ekleyin.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #ffffff
• Bitiş Konumu: %60

Varsayılan Metin Ayarları

Tasarım sekmesine gidip metin ayarlarını değiştirerek devam edin.

• Metin Yazı Tipi: Khand
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #021827
• Metin Boyutu: 3vh
• Metin Yönü: Merkez

Fareyle Üzerine Gelme Metin Ayarları

Fareyle üzerine gelindiğinde bazı metin ayarlarını değiştirin.

• Metin Rengi: rgba(255,255,255,0)
• Metin Boyutu: 0vh

Bağlantı Metni Ayarları

Ardından, bağlantı metni ayarlarına gidin ve bağlantı metni rengini değiştirin.

• Bağlantı Metni Rengi: #000000

Varsayılan Liste Metni Ayarları

Varsayılan liste metin ayarlarına geçin ve istediğiniz gibi biçimlendirin. Metin boyutu için varsayılan durumunda '0px' kullandığınızdan emin olun.

• Sırasız Liste Yazı Tipi: Khand
• Sırasız Liste Yazı Tipi Stili: Büyük Harf
• Sırasız Liste Metni Hizalama: Merkez
• Sırasız Liste Metin Rengi: rgba(255,255,255,0)
• Sırasız Liste Metin Boyutu: 0px
• Sırasız Liste Satır Yüksekliği: 0em
• Sırasız Liste Stili Konumu: İçeride

Gezinme Listesi Metin Ayarları

Ardından, menü öğelerinin görünmesine izin vermek için fareyle üzerine gelindiğinde bazı değerleri değiştirin.

• Sırasız Liste Metin Rengi: #000000
• Sırasız Liste Metin Boyutu: 2vh
• Sırasız Çizgi Yüksekliği: 2.1em

Varsayılan Aralık

Sonraki boşluk ayarlarına gidin ve Metin Modülüne bir şekil verin.

• Sol Kenar Boşluğu: 45vw (Masaüstü), 39vw (Tablet), 33vw (Telefon)
• Sağ Kenar Boşluğu: 45vw (Masaüstü), 39vw (Tablet), 33vw (Telefon)
• Üst Dolgu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
• Alt Dolgu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)

Vurgu Aralığı

Fareyle üzerine gelindiğinde bu aynı değerleri değiştirin.

• Sol Kenar Boşluğu: 14vw
• Sağ Kenar Boşluğu: 14vw
• Üst Dolgu: 8vw
• Alt Dolgu: 8vw

Varsayılan Kenarlık

Kenarlık ayarlarına gidin ve yuvarlatılmış köşelerin her birinin '0px' değerine sahip olduğundan emin olun.

fareyle üzerine gelin

Yuvarlatılmış köşelerde fareyle üzerine gelme seçeneklerini etkinleştirin ve sol üst ve sağ üst değerleri değiştirin.

• Sol Üst: 50vw
• Sağ Üst: 50vw

Kutu Gölge

Bir kutu gölgesi kullanarak modüle biraz derinlik vererek devam edin. Bu, menünün sayfada fark edilmemesini sağlayacaktır.

• Kutu Gölge Bulanıklığı Gücü: 1000ms
• Gölge Rengi: rgba(0,0,0,0.68)

CSS Sınıfı

Modüle bir CSS sınıfı da ekliyoruz.

• CSS Sınıfı: dt-menüsü

geçişler

Son olarak, geçiş ayarlarında geçiş süresini azaltın.

• Geçiş Süresi: 100ms

Örnek 2'yi Yeniden Oluştur

Sütuna Metin Modülü Ekle

İçerik Ekle

İkinci örneğe geçelim! Burada yine paragraf metin stilini kullanarak '≡ Menü' ve sırasız bir liste kullanarak menü öğelerini ekleyeceğiz. Ayrıca menü öğelerinin her birine ayrı ayrı bir bağlantı ekleyeceğiz.

Varsayılan Arka Plan Rengi

Arka plan ayarlarına geçin ve arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

Vurgulu Arka Plan Rengi

Fareyle üzerine gelindiğinde arka plan rengini değiştirin.

• Arka Plan Rengi: #f71535

Varsayılan Metin Ayarları

Ardından, tasarım sekmesine gidin ve paragraf kopyasının görünümünde bazı değişiklikler yapın.

• Metin Yazı Tipi: Khand
• Metin Rengi: #021827
• Metin Boyutu: 3vh

Fareyle Üzerine Gelme Metin Ayarları

Fareyle üzerine gelindiğinde bu ayarları değiştirin.

• Metin Rengi: rgba(255,255,255,0)
• Metin Boyutu: 0vh

Bağlantı Metni Ayarları

Metin ayarlarına gidin ve bağlantı metni rengini değiştirin.

• Bağlantı Metni Rengi: #ffffff

Varsayılan Liste Metni Ayarları

Sırasız liste öğelerinin tasarım ayarlarını da değiştirin.

• Sırasız Liste Yazı Tipi: Khand
• Sırasız Liste Yazı Tipi Stili: Büyük Harf
• Sırasız Liste Metni Hizalama: Merkez
• Sırasız Liste Metin Rengi: rgba(255,255,255,0)
• Sırasız Liste Metin Boyutu: 0px
• Sırasız Liste Satır Yüksekliği: 0em
• Sırasız Liste Stili Konumu: İçeride

Gezinme Listesi Metin Ayarları

Ve fareyle üzerine gelindiğinde bu değerlerden bazılarını değiştirin.

• Sırasız Liste Metin Rengi: #ffffff
• Sırasız Liste Metin Boyutu: 2vh
• Sırasız Liste Satır Yüksekliği: 2.1em

Varsayılan Aralık

Ardından, boşluk ayarlarına gidin ve modüle biraz boşluk bırakın.

• Sağ Kenar Boşluğu: 88vw (Masaüstü ve Tablet), 71vw (Telefon)
• Üst Dolgu: 6vw (Masaüstü), 10vw (Tablet), 18vw (Telefon)
• Alt Dolgu: 4vw (Masaüstü), 10vw (Tablet), 12vw (Telefon)
• Sol Dolgu: 1vw

Vurgu Aralığı

Üzerine gelindiğinde değerleri değiştirin.

• Sağ Kenar Boşluğu: 59vw
• Üst Dolgu: 13vw
• Alt Dolgu: 8vw
• Sol Dolgu: 1vw
• Sağ Dolgu: 13vw

Sınır

Ve bu çeyrek daire tasarımını oluşturmak için, kenarlık ayarlarında sağ üst kenarlığı değiştireceğiz.

• Sağ Üst: 50vw

Kutu Gölge

Ayrıca sayfada derinlik oluşturmak için bir kutu gölgesi ekleyeceğiz.

• Kutu Gölge Bulanıklığı Gücü: 1000 piksel
• Gölge Rengi: rgba(0,0,0,0.68)

CSS Sınıfı

Ardından, gelişmiş sekmeye bir CSS sınıfı ekleyeceğiz.

• CSS Sınıfı: dt-menüsü

geçişler

Ve hızlı bir geçiş oluşturmak için gelişmiş sekmesinde geçiş süresini azaltın.

• Geçiş Süresi: 100ms

Ön izleme

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

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Son düşünceler

Bu yazıda, Divi's Mechanic Layout Pack'i kullanarak genişleyen bir yapışkan menünün nasıl oluşturulacağını gösterdik. Oluşturduğunuz her tür web sitesinde yeniden oluşturabileceğiniz ve kullanabileceğiniz iki farklı tasarım örneğini ele aldık! Her hafta tasarım araç kutunuza ekstra bir şeyler koymaya çalıştığımız bu devam eden Divi tasarım girişiminden keyif almanızı bekliyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

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.