Sitenizde bir menüye ait alt kategorileri açılır menü(dropdown menu) şeklinde yapılandırmak estetik ve kullanılabilirlik açısından ziyaretçilerinize çok yardımcı oluyor. Bu yazımda size birbirinden güzel açılır menü örnekleriyle daha ilgi çekici menüler oluşturabilmeniz için ilham sağlayacak örnekler göstereceğim.
Web geliştiricileri kullanıcı dostu dikey ve yatay gezinti (navigasyon) menülerini CSS kullanarak oluşturabiliyorlar. JavaScript sayesinde de bu menüler daha etkileşimli, yanıt veren ve değişken hale geliyorlar.
Bugünkü yazıda jQuery, mooTools gibi JavaScript kütüphanelerinin yanısıra CSS ile oluşturulmuş 10 mükemmel çoklu seviye gezinti menüsü tekniğine yer vereceğiz.
1. Vimeo Benzeri Navigasyon Oluşturmak
Vimeo.com üzerindeki menünün neredeyse aynısı Janko tarafından geliştirilmiş durumda. Bu menünün en güzel tarafı menü öğesi üzerine fare imleci getirildiğinde menünün beliriyor olması. Ayrıca menünün sunduğu farklı arama seçenekleri sayesinde menü elementlerini eleyebiliyorsunuz.
Bu rehberin temelinde sırasız listeye dayalı CSS tabanlı bir açılır menü yatmaktadır. Menünün yapısı aşağıdaki görsel üzerinde açıklanmış.
Sizin de göreceğiniz üzere UL elementinin dört öğesi bulunuyor. Bunlardan ilki kısa bir alt menü içeren logo. Ardından giriş bağlantısı, alt menü içeren yardım bağlantısı ve yine alt menü çeren arama öğesi yer alıyor. Her bir alt menü, dahili olduğu menü elementinin üzerine fare imleci götürüldüğünde beliriyor.
Tomas Bagdanavicius tarafından geliştirilmiş ve ücretsiz olarak sunulan, aralarında NVIDIA.com, Adobe.com, MTV.com sitelerinin menü örneklerinin de yer aldığı, Aşağı Açılır (Drop-Down) css menüler, hız, kullanım ve düzenleme esneklikleri ile site menüleriniz için güzel alternatifler olacaklar.
NVIDIA.com sitesinin menü örneğini görmek için buraya tıklayabilirsiniz.
Bir dosya üstüne sağ tıklandığında çıkan "send to" (gönder) menüsü genellikle e-posta gönderirken kullanılır. Fakat bu menü özelleştirilebiliyor. Örneğin bazı dosyaları sürekli aynı klasöre taşıyorsanız o klasörü "send to" menüsüne ekleyip sağ tıkla taşıma işini kolayca halledebilirsiniz. Nasıl özelleştirilebileceği burada anlatılmış.
css ile menüler yapımı konusunda internette onlarca ücretsiz kaynağa rastlamak mümkün. şurada çeşitli örnekler görebilir; şurada ve şurada kendiniz için menüler yapabilirsiniz. konuyla ilgili bir diğer güzel kaynak ve yazımızın konusu da css menu builder.
gibi başlıklar altında sıralanmış birbirinden güzel 46 kolleksiyon listelenmiş..
bildirgec.org içeriği kullanıcıları tarafından üretilen kolektif bir blogdur.
