Popper.js ile Divi'de Dinamik Popover (Kayan Menüler) Nasıl Oluşturulur

Popper.js isimli kütüphaneyi hiç duydunuz mu? Bu kitaplık, JavaScript üzerinde açılır pencere oluşturmanıza olanak sağlar. Popover kullanmak, özellikle belirli bir öğeyle (düğme, bağlantı vb.) İlgili daha fazla bilgi göstermeye yardımcı olduğu için bu günlerde oldukça yaygındır. Dinamik açılır pencereyi dikkate almanın nedeni, esas olarak ekrandaki konu konumuna göre doğru noktada görüntülenmesini sağlamaktır. Somut olarak, konu ekranın alt kısmındaysa, açılır pencere en üstte görüntülenecektir. Ekranın üst kısmında yer alıyorsa, açılır pencere en altta vb. Görüntülenir.

Bu eğitimde, bir düğme tıklandığında dinamik açılır menüler (kayan menüler) oluşturmak için Divi'deki Popper.js'nin gücünden yararlanacağız. Bu, herkesin bir düğmeye tıkladıktan sonra herhangi bir içeriği görüntülemek için Divi öğeleriyle bir açılır pencere oluşturmasına olanak tanır. Ayrıca, kullanıcı sayfanızla etkileşim kurarken en ideal görünürlüğü korumak için konumunu ayarlayacağından, açılır pencerenin dinamik olmasını da sağlayacağız.

İşte bu popover'ların konumlandırılmasına ilişkin bir örnek ...

Bunu başarmak için bazı özel CSS ve JavaScript'e ihtiyacımız olacak. Ancak, herhangi bir Divi öğesini kullanarak bir açılır pencere oluşturmak için Divi Builder'ın güçlü tasarım yeteneklerine yine de güvenebiliriz.

Başlayalım!

Kayan Menünün Önizlemesi

İşte bu eğitimde tasarlayacağımız kayan menüye hızlı bir bakış. Kullanıcı tarayıcı boyutunu kaydırırken veya değiştirirken yüzen menünün konumunun dinamik olarak nasıl değiştiğini görebilirsiniz. Ayrıca referansına dinamik olarak işaret edecek şekilde konumlandırılan küçük oku (veya bu durumda düğmeyi) kaçırmayın.

Divi'de Popper.js ile Popover Oluşturma

Daha önce de söylediğimiz gibi, dinamik olarak konumlandırılmış bir açılır pencere oluşturmak için Divi'de popper.js'yi kullanacağız, açılır konu (buton) tıklandığında ortaya çıkar. Divi ile kolayca kayan bir menü ve bir düğme oluşturabiliriz. Daha sonra her iki çalışmayı da uyumlu hale getirmek için gerekli olan kodu ekleyeceğiz.

Bölüm

Bu nedenle, varsayılan olarak hazır olan normal bölüme bir müşteri kimliği ekleyerek başlayacağız. Bölüm ayarlarını açın ve aşağıdaki kimliği ekleyin:

• CSS Kimliği: popper bölümü

Divi Row ile Popper Popover Oluşturun

Ardından, bölüme tek sütunlu bir satır ekleyeceğiz. Bu satır, bir düğmeye tıklandığında açılan Popper popover öğemiz olacaktır.

Satır ayarlarını açın ve stili aşağıdaki gibi güncelleyin:

• Arka Plan Rengi: # 333333

• Oluk Genişliği: 2
• Genişlik:% 100
• Maksimum Genişlik: 500 piksel
• Dolgu: 0px top, 0px bottom, 0px left, 0px right
• Yuvarlatılmış Köşeler: 10px

Bu satır popper popover öğemiz olacağından, kodumuzda seçici olarak hizmet vermesi için bir CSS Kimliği eklememiz gerekir. Ayrıca görünürlüğün taşmada kaldığından da emin olmamız gerekir (yuvarlak köşeler tarafından gizlenmiştir).

Gelişmiş sekmesine gidin ve aşağıdakileri güncelleyin:

• CSS Kimliği: popper-popup
• Yatay Taşma: görünür
• Dikey Taşma: görünür

Popover Satırına İçerik Ekleyelim

Yüzen menüyü istediğimiz içerikle doldurmak için satırımıza istediğimiz modül (ler) ekleyebiliriz. Bu örnek için, açılır pencerede görünen özel bir menü olarak hizmet veren satıra bazı düğmeler ekleyeceğiz.

Başlamak için satırın sütununa bir düğme modülü ekleyin.

Şimdi düğmemize biraz stil ekleyelim. Düğme ayarlarını şu şekilde güncelleyeceğiz:

• Düğme Hizalama: merkez
• Düğme için Özel Stilleri Kullan: EVET
• Düğme Kenar Genişliği: 1px
• Düğme Kenar Rengi: # 555555
• Düğme Kenarlığı Yarıçapı: 10px
• Düğme Simgesi: ekran görüntüsüne bakın
• Kenar boşluğu: 20 piksel üst, 20 piksel alt, 20 piksel sol, 20 piksel sağ
• Dolgu: 0.5em üst, 0.5em alt, 2em sol, 2em sağ

Önemli: Satır boşluklarını kullanmak yerine boşluk oluşturmak için modülde kenar boşluğu kullanıyoruz çünkü satırın kenarına (mutlak konumla) yerleştirilmesi gereken bir ok (bölücü kullanarak) ekleyeceğiz. Herhangi bir satır veya sütun dolgusu oku kenardan uzağa itecektir.

Şimdi, düğmeyi sütun / satırın tam genişliğine yaymak için aşağıdaki özel CSS parçacığını Ana Öğeye eklememiz gerekiyor:

display: block !important

Menü açılır penceremize birkaç düğme daha eklemek için artık düğmeyi iki (veya daha fazla) kez kopyalayabilirsiniz.

Açılır Okun Oluşturulması

Popper.js, açılır pencere ile birlikte bir ok konumlandırmasını destekler. Oku oluşturmak için satırımızdaki son düğmenin altına yeni bir bölücü ekleyin.

Bölücü ayarlarında, ayırıcıyı göstermemeyi seçin. Ardından, gelişmiş sekmesinin altında aşağıdaki CSS kimliğini ekleyin:

• CSS Kimliği: popper-ok

Oku daha sonra biçimlendirmek ve konumlandırmak için özel bir harici CSS kullanacağız.

Açılır Düğme (veya Referans) Oluşturma

Açılır bilgi penceresinin iki temel öğesi, açılır pencere öğesini (veya açılır pencere öğesini) ve açılır bilgi penceresinin kendisini eklediği konuyu içerir. Herhangi bir Divi öğesini açılır pencereyi oluşturan bir referans olarak kullanabilirsiniz, ancak bu örnek için bir düğme kullanacağız.

Popper İçin Konu Oluşturma: Düğme

Düğmemizi oluşturmadan önce, açılır penceremizin altına yeni bir tek sütunlu satır eklememiz gerekiyor.

Ardından satıra yeni bir düğme modülü ekleyin.

Düğme ayarlarını aşağıdaki gibi bazı temel stillerle güncelleyin:

• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: # a043e8
• Düğme Kenarlık Genişliği: 0px
• Düğme Kenarlığı Yarıçapı: 10px

Ardından, düğmeyi daha sonra popover referansımız olarak hedeflememize ve kullanmamıza izin verecek gerekli CSS kimliğini ekleyin:

• CSS Kimliği: popper düğmesi

Kodu Ekleyelim

Artık açılır penceremiz ve düğmemiz tamamlandığına göre, sihri gerçekleştirmek için kodu eklemeye hazırız.

Bunu yapmak için, ikinci satırdaki referans düğme modülünün altına bir kod modülü ekleyin.

Kodun çalışması için sayfanın alt kısmında olması önemlidir.

Önce CSS'yi ekleyeceğiz.

Kod içeriği kutusunda, CSS'yi HTML'ye sarmak için gereken stil etiketlerini ekleyin. Ardından, aşağıdaki CSS'yi kopyalayıp stil etiketleri arasına yapıştırın:

/*hide and show popup styling*/ #popper-popup {display: none;}#popper-popup[data-popper-reference-hidden] {visibility: hidden;pointer-events: none;}#popper-popup[show-popper] {display: block;z-index: 9999;} /*keep popper visible in the Divi Builder for editing*/ #et-fb-app #popper-popup {display: block;}   /*build the arrow targeting the divider with class 'popper-arrow'*/ #popper-arrow,#popper-arrow::before {position: absolute;width: 8px;height: 8px;background: #333333;}#popper-arrow {visibility: hidden;}#popper-arrow::before {visibility: visible;content: "";transform: rotate(45deg);} /*position arrow using popper.js data-popper-placement attribute*/ #popper-popup[data-popper-placement^="top"] #popper-arrow {bottom: -4px;} #popper-popup[data-popper-placement^="bottom"] #popper-arrow {top: -4px;} #popper-popup[data-popper-placement^="left"] #popper-arrow {right: -4px;} #popper-popup[data-popper-placement^="right"] #popper-arrow {left: -4px;} /*hide arrow when reference outside of viewport*/#popper-popup[data-popper-reference-hidden] #popper-arrow::before {visibility: hidden;}

Daha sonra, Popper.js'yi CDN'lerinden (https://unpkg.com/@popperjs/core@2) içe aktaran bir komut dosyası ekleyerek popper.js kitaplığına erişmemiz gerekiyor. Bitiş stil etiketinin altında, aşağıdaki komut dosyasını kod kutusuna yapıştırın.

Kitaplığı içe aktarmak için bir komut dosyası etiketi içinde aşağıdaki src'yi kullanın:

src="https://unpkg.com/@popperjs/core@2"

Şöyle görünmeli:

Şimdi Popper.js'yi kullanacak kodu eklemeden önce içe aktaracağız. Bu nedenle, Popper.js'yi işaret eden komut dosyasından sonra, eklememiz gereken Javascript'i sarmak için gerekli komut dosyası etiketlerini ekleyin. Ardından, aşağıdaki Javascript'i komut dosyası etiketleri arasına yapıştırın.

const popperButton = document.querySelector("#popper-button");const popperPopup = document.querySelector("#popper-popup");const popperSection = document.querySelector("#popper-section");const popperArrow = document.querySelector("#popper-arrow"); let popperInstance = null; //create popper instancefunction createInstance() {popperInstance = Popper.createPopper(popperButton, popperPopup, {placement: "auto",//preferred placement of poppermodifiers: [{name: "offset",//offsets popper from the reference/buttonoptions: {offset: [0, 8],},},{name: "flip",//flips popper with allowed placementsoptions: {allowedAutoPlacements: ["right", "left", "top", "bottom"],rootBoundary: "viewport",},},],});} //destroy popper instancefunction destroyInstance() { if (popperInstance) {popperInstance.destroy();popperInstance = null;}} //show and create popperfunction showPopper() {popperPopup.setAttribute("show-popper", "");popperArrow.setAttribute("data-popper-arrow", "");createInstance();} //hide and destroy popper instancefunction hidePopper() {popperPopup.removeAttribute("show-popper");popperArrow.removeAttribute("data-popper-arrow");destroyInstance();} //toggle show-popper attribute on popper to hide or show it with CSS function togglePopper() {if (popperPopup.hasAttribute("show-popper")) {hidePopper();} else {showPopper();}}//execute togglePopper function when clicking the popper reference/buttonpopperButton.addEventListener("click", function (e) {e.preventDefault();togglePopper();});

Bu kadar! Hepimiz bitirdik. Şimdi nihai sonucu kontrol edelim.

Nihai Sonucu Önizleme

Bu eğitimin sonucunu görüntülemek için, popper açılır penceresinin konumlandırma büyüsünü test etmek için bir miktar kaydırma alanı oluşturmamız gerekiyor.

Bunu yapmak için, bölüm ayarlarını açın ve aşağıdaki gibi biraz kenar boşluğu ekleyin:

• Marj: 80vh üst, 80vh alt

İşlevsellik şu şekildedir:

Kullanıcı tarayıcı boyutunu kaydırırken veya değiştirirken açılır pencerenin (ve okun) konumunun dinamik olarak nasıl değiştiğine dikkat edin.

Özetleme

Divi'de popper.js kullanarak bir açılır pencere oluşturmak istiyorsanız, iyi bir Javascript'e güvenmeniz gerekir, ancak sonuç buna değer. Açılır bilgi penceresinin dinamik konumlandırması, herhangi bir web sitesine fayda sağlayacak harika bir UI bileşenidir. Bunun hakkında ne düşünüyorsun? Zaten denedin mi? Bilmemize izin ver.