Responsive Tasarımlarınız İçin SelectBox Menü (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.