WordPress Notları

WordPress Haberleri,İpuçları,Eklentileri,Temaları ve dahası

  • Haberler
  • İpuçları
  • Nasıl Yapılır
  • Eklentiler
  • Temalar
  • Multisite
  • Güvenlik

03 Şubat 2014 tarihinde Tarık Çayır yazdı Yorum yapın

Responsive Tasarımlarınız İçin SelectBox Menü (Walker)

SelectBox Menu Walker

Uzun süredir sizlerle paylaşmak istediğim bir menü walker’ından bahsetmek istiyorum.

Bootstrap vs. hazır framework’leri kullanmayıp kendinizde duyarlı (responsive) tasarımlar yapmak isteyebilirsiniz. Bunun için varolan menünüzü css’le düzenlemek yerine direk selectbox menu walker’ını kullanmanızı tavsiye ederim. Tek taşla bir çok kuş vurmuş olabilirsiniz. 

Menümüzdeki bütün elamanları hiyerarşik (ilk versiyonunda bu özellik çok sağlıklı çalışmıyordu ben bir güncelleme yaptım, şuan sorunsuzca çalışıyor, her ne kadar commit onaylanmasa bile…) bir düzende bizlere selectbox çıktısı olarak veren bir menü sınıfımız.

Dosyamızı functions.php’e ekliyoruz.

Kullanmak istediğimiz menüde bu şekilde tanımlıyoruz.

<?php
echo wp_nav_menu( array(
	'theme_location' => 'primary',
	'container_class' => 'selectbox-menu', 
	'walker' => new SelectBox_Menu_Walker, 
	'items_wrap' => '<select id="menu-header-selectbox" class="%2$s"><option value="" disabled>Menü</option>%3$s</select>',) );

Sonrasında @Media sorgularımıza class’larımızı display none diplay block yaparsanız bu iş tamamdır 😛

NOT:  @takien daha commit’i onaylamadığı için gist’e koydum, onayladığında repo linkini’de koyacağım.

Bunu paylaş:

  • Tweet
  • Daha fazla
  • Tumblr' da Paylaş
  • Reddit üzerinde paylaşmak için tıklayın (Yeni pencerede açılır) Reddit
  • Arkadaşınıza e-posta ile bağlantı göndermek için tıklayın (Yeni pencerede açılır) E-posta

İlgili

Kategori:Genel, İpuçları, Nasıl Yapılır Etiketler: selectbox menu walker, selectbox walker, wordpress selectbox menu

Hakkımda Tarık Çayır

2012 yılında dijital medya çözümleri ve hizmeti verdiği Momoth şirketini kurdu. 8 yıl boyunca yönettiği Momoth’ta 300’den fazla yazılım projesine imza attı. 2020’de Momoth’u şekillendirerek Girişim Stüdyosu’na dönüştürdü.

Şu an Momoth Girişim Stüdyosu çatısı altında Çay Kahve İnsan ve Çay Kahve Stüdyo girişimleri ile ilgileniyor.

Bir yanıt yazın Yanıtı iptal et

Lütfen gerçek bilgilerinizi kullanın. Herhangi bir site adı ile yazılan yorumlar onaylanmayacaktır!

Popüler Yazılar & Sayfalar

  • Amelia: WordPress Rezervasyon Eklentisi
    Amelia: WordPress Rezervasyon Eklentisi
  • wpDataTables: Çok Kullanışlı Harika WordPress Tablo Eklentisi!
    wpDataTables: Çok Kullanışlı Harika WordPress Tablo Eklentisi!
  • Powered Cache 2.0 Yayınlandı!
    Powered Cache 2.0 Yayınlandı!
  • WordPress 5.8 "Tatum" Yayınlandı!
    WordPress 5.8 "Tatum" Yayınlandı!
  • WordPress 5.7 "Esperanza" Yayınlandı!
    WordPress 5.7 "Esperanza" Yayınlandı!

Bloga e-posta ile abone ol

Bu bloga abone olmak ve e-posta ile bildirimler almak için e-posta adresinizi girin.

Blogroll

  • HandyPlugins
  • NoCodeWP
  • Powered Cache
  • WholeStuff
  • WPHandle
  • Hakkımızda
  • İletişmeyin!
  • Bülten Gönder
  • Site Haritası
  • Gizlilik Politikası

© 2025 - WPNotlari

Bu internet sitesinde, kullanıcı deneyimini geliştirmek ve internet sitesinin verimli çalışmasını sağlamak amacıyla çerezler kullanılmaktadır.