WordPress için Özel Animasyonlu Burger Menüsü Nasıl Oluşturulur
İnterneti keşfetmek için mobil cihazlar kullanıyorsanız, burger menüsüne sahip birçok site göreceksiniz. Bu, tüm menüyü açmak için kullanıcı tarafından dokunabilen ‘burger’ simgesinin arkasında gizli bir menüdür. ‘Burger menüsü’ olarak adlandırmalarının nedeni, genellikle onları temsil eden simge – üç satırdır. Küçük bir hamburger gibi görünüyor, ya da en azından teori. Burgerlerimi biraz daha az seviyorum! Ancak adlardan bahsetmenin yanı sıra, WordPress sitenize bir Burger menüsü ekleyebilirsiniz, mobil cihazları ziyaret eden kişiler için kullanıcı deneyimini geliştirecek bir şeydir.
Burger menüsü oluşturmak için bir eklenti ekleyebilirsiniz. Ya da zaten orada olan temaları (bizden biri gibi) koyabilirsiniz. Peki ya kendi temanız varsa ve kendi burger menünüzü eklemeyi tercih ederseniz? Bu yazıda size nasıl yapılacağını göstereceğim. Standart WordPress menü ekranından eklenen menüyü alarak, menüyü küçük bir ekranda Burger menüsüne değiştirecek bazı CSS ve JavaScript ekleyeceğinizi göstereceğim. Bu gönderiyi takip etmeniz gereken şeylere ihtiyacınız var:
Oluşturulmuş bir menüye sahip siteleri çalıştıran WordPress geliştirme kurulumu.
Kendi temanız veya üçüncü taraf bir temadan çocukların teması. Üçüncü taraf bir temayı hemen düzenlemeyin, yoksa güncellendiğinizde değişiklikleriniz silinir. Bunun yerine, gerekirse bir çocuk teması yapın.
Bu kodu kendi web siteme uygulayacağım. Bu, benim durumumda bir CSS Menüsü. Mülkünüz farklıysa, bu sınıfları hedefleyen herhangi bir CSS’yi kendi temanıza doğru bir şekilde uygulanabilmesi için düzenlemeniz gerekir. Öyleyse başlayalım! Şu anda menümde olan menü masaüstünde iyi görünüyor – bu menü, içeriğin üzerindeki başlık afişinin altında:
Ama hücresel şeyler o kadar güzel değil. İPhone 7’de menü birkaç satıra ayrılmıştır ve tutarlı bir şekilde bile yapmaz, bu da içeriği önler:
Burger simgesini ekleyerek ilk adım bir burger simgesi eklemektir. Bunu header.php başlık dosyanızda yaparsınız. Not: Üçüncü taraf bir tema kullanıyorsanız, bir alt tema oluşturursanız, Header.php dosyasını üst temadan kopyalayın ve alt temanızda yeni bir dosya düzenleyin. Ana gezinme menüsünün hemen altına bir bağlantı ekleyin. Bu benim:
Çekirdek yükleme 0c50da9e9cc63f8d8846b58e68a3f09
Bu, Togglenav sınıfı ile bir bağlantı kurar – çünkü bu navigasyonu etkinleştirir ve devre dışı bırakır. Bu bağlantıda, HTML sembolleriyle yapılan bir burger simgesi vardır. Özel grafiğe gerek yok, ha? Bağlantının hiçbir yere yol açmadığını unutmayın-bu sadece bir hashtag, URL değil.
Başlık dosyasına eklemeniz gereken tek şey budur, böylece şimdi kaydedip kapatabilirsiniz. Ekranınızı yenilerseniz, burger simgesinin göründüğünü göreceksiniz: Sitenin masaüstü sürümünde görülmesini istemiyoruz, bu yüzden bir sonraki adımda düzelteceğiz. Burger simgesini birleştirmeye başladığı kısım için büyük ekranda gizlemek – düzenlemesi. Tüm bunları tema stili sayfanıza ekleyebilirsiniz. Çocuk temasını kullanırsanız, bunun için bir stil sayfası yaptınız ve her şeyi oraya ekleyebilirsiniz. Not: Temam duyarlı ama ilk hücresel değil, bu yüzden medya sorgularımdaki maksimum genişliği kullanacağım. Önce temanız hücreselse, bu kodu medya sorgusuna ekleme şeklinizi değiştirmeniz gerekir.
Anahtar simgesinden geniş bir ekran sürümü (veya masaüstü) ile başlayalım. Bunu stil sayfanıza ekleyin: Çekirdek yükleme 0c50da9e9cc63f8d8846b58e68a3f09
Bu, yeni bağlantıyı (ve simgeyi) varsayılan olarak görülmez. Dahil ettim! Önemli çünkü değilse, diğer bağlantılar tarafından üzerine yazılabilir. Şimdi bu benim sitem büyük bir ekranda:
Gitti. Daha küçük bir ekran için tekrar kapatmalıyız, ancak yakında yapacağız.
Mobil Burger menünüz için stil ekleme Şimdi, kullanıcı simgeye dokunduğunda görünecek menünün hücresel sürümü için tüm stilleri eklemeniz gerekir. İlk olarak, stil sayfanızda medya kuyruğunu yapın:
Çekirdek yükleme 0c50da9e9cc63f8d8846b58e68a3f09
Maksimum genişliğe sahip bir ekranı hedefledim, ancak isterseniz, özellikle menünüz büyükse daha geniş bir ekran kullanabilirsiniz. Şimdi medya sorgusuna bazı stiller ekleyelim. İlk olarak, simgeyi ve düzenlemeyi yeniden etkinleştireceğiz: Çekirdek 0C50DA9E9CC63F8D8846B58E68A3F09
Simgeyi küçük bir ekrana canlandıracak ve konum ve rengi ekleyecek ve bağlantının temasındaki stili değiştirmek için yüzen ve aktif stilini düzenleyecektir. Şimdi menünün kendisini ayarlayalım. Bunu medya kuyruğunuza ekleyin:
Çekirdek yükleme 0c50da9e9cc63f8d8846b58e68a3f09
Ne yaptığını keşfedelim:
Türev elemanlar için mutlak konumlandırmayı kullanabilmemiz için, menüyü sıralı blok olarak görüntülenir, sağlam beyaz arka plan ve göreceli konumlandırma ile görüntülenir.
Bu, UL öğesinin varsayılan olarak görünmez olmasını düzenler. JavaScript eklediğimizde değiştirecek, bu da görünmesini sağlayacak. Ayrıca kaydolmak için konumlar ve renk stilleri ekler.
Bu, liste öğesi için şamandırayı ortadan kaldırır ve bir blok olarak görüntüler.
Şimdi stil sayfanızı kaydedin. Burger menünüz iyi çalışmadan önce, son adımı eklemelisiniz – bir komut dosyası.
Komut Dosyası Ekleme Bu adım iki adımdan oluşur: komut dosyasını sormak ve kod eklemek. Bekleyerek başlayalım. Temanızda, komut dosyası ve içine burger-menu-script.js adlı boş bir dosya adlı bir klasör ekleyin. Şimdi tema fonksiyon dosyanızı açın ve bunu ekleyin:
Çekirdek yükleme 0c50da9e9cc63f8d8846b58e68a3f09
Bu, yeni oluşturduğunuz komut dosyasını doğru bir şekilde bekliyor. Şimdi buna biraz kod eklemeniz gerekiyor. Dosyayı açın ve bu komut dosyasını ekleyin: Core 0C50DA9EA9CC63F8D8846B58E68A3F09 içerir
Bu. Ardından, bağlantı tıkandığında gezinme menülerini içeri ve dışarı değiştirmek için Slidetoggle’ı kullanın. Ayrıca varsayılan olarak davranışsal bağlantıları durdurur.
Son olarak, dosyanızı kaydedin. Şimdi bu küçük bir ekranda bir site:
Küçük cihazlarda burger simgeleri.
Ve simgeyi çaldığımda menü ortaya çıktı:
Menüler görüntülenen hücresel bölgeler.
Ve bu, cep telefonumdaki siteyi ziyaret ettiğimde nasıl çalıştığının videosu (video oldukça sarsılmış, böylece doğrudan görmek için bir cep telefonunda siteyi ziyaret etmek isteyebilirsiniz).
Herşey bitti! Şimdi yapmam gereken, küçük bir ekranda çok çirkin görünen banner başlığım üzerinde çalışmak! Bir Burger Menüsü Ekle Hücreselde UX’i artıracaktır (Yukarıdaki adımları izlerseniz (gerekirse temanızla eşleşecek CSS düzenlemek), insanlar mobil cihazlarda ziyaret ettiğinde sitenizde kullanıcı deneyimini geliştiren basit bir burger menüsü oluşturacaksınız. Ve gerekirse, stili değiştirebilir, simgenin rengini değiştirebilir, menünün genişliğini ve sizin için çalışmasını sağlamak için ihtiyacınız olan her şeyi ayarlayabilirsiniz. Sitenizin hücresel sürümünde Burger menüsünü kullanıyor musunuz? Menünüz için başka hangi özelleştirme yapacaksınız? Düşüncelerinizi aşağıdaki yorumlarda paylaşın.
Etiket: hücresel
