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.
2. CSS Açılır Menü Çatısı
Bu menü HTML'yi CSS'den ayırmakla kalmıyor, bunun yanısıra CSS tanımlamaları da yapısal ve tematik biçimlere ayrılmış durumda. Bu sayede yeni bir CSS açılır menü oluşturmak sadece yeni bir tema oluşturarak mümkün zire menünün altyapısı korunmaya devam ediyor. Farklı stiller sadece sınıf isimlerini değiştirerek kullanılabilir. Çatının desteklediği yönelmeler arasında, yatay, soldan sağa dikey, sağdan sola dikey, doğrusal yatay, yukarı yönlü yatay.
Menünün Özellikleri:
- Kod ve dosyalar iyi düzenlenmiş. Kullandığınız içerik yönetim sistemine ya da diğer araçlara entegre edebileceğiniz gibi, (X)HTML biçimindeki web siteleri üzerinde de kullanabileceğiniz kanallar mevcut.
- Menü stili sadece sınıf isimlerini değiştirerek özelleştirilebilir. Desteklenen yönelmeler arasında yatay, soldan sağa dikey, sağdan sola dikey, doğrusal yatay ve yukarı yönlü yatay yer alıyor.
- Windows Internet Explorer 5+, Mozilla Firefox 1.5+, Opera 7+, Apple Safari 2+, Google Chrome 1 vb. tarayıcılar destekleniyor.
- IE6 ve öncesi için küçük bir JavaScript kullanılıyor. Menü, jQuery ya da Scriptaculous gibi JavaScript kütüphaneleri ile rahatlıkla kullanılabilir. Geriye kalan her şey sadece CSS'den ibaret.
3. Çoklu Seviye JavaScript Açılır Menü
Bu çoklu seviye desteği olan açılır menünün kullandığı JavaScript'in dosya boyutu sadece 1.2 KB. Animasyon, aktif başlık belirleme, kolay aktarım ve birden fazla menü kullanabilme desteği gibi özellikleri bulunuyor. Betik Firefox 2+, IE6+, Opera, Safari ve Chrome üzerinde çalışıyor.
4. MenuMatic
MenuMatic bir mooTools 1.2 sınıfı olup sıralı ya da sırasız semantik listeleri alıp onları dinamik açılır menü sistemine dönüştürüyor. JavaScript'in etkin olmadığı tarayıcılarda ise menü, Patrick Griffiths ve Dan Webb tarafından geliştirilen Suckerfish Açılır Menüsü'ne klavye desteği kazandıran Matthew Carrol'un CSS tabanlı sürümünü kullanıyor.
Menünün Özellikleri
- Arama Motoru Dostu
- Erişilebilir: Menü bağlantıları üzerinde tab tuşu ile gezinin. Açılır menüler üzerinde ok tuşları ile gezinin.
- JavaScript'in etkin olmadığı tarayıcılarda otomatik olarak CSS menüsü haline gelme.
5. Alt Menüler İçeren Dairesel Menü
Bu güzel menü küçük simgeler içeren alt menü öğelerini, ana menü elementlerinin bulunduğu dairenin içine yerleştiriyor. Menü ayrıca her bir simgeye açıklama eklemenize de izin veriyor. IE6, IE7, Firefox, Opera, Safari ve Google Chrome üzerinde sorunsuz çalışıyor.
6. mooTools İçin Kayan Menü
mooTools JavaScript kütüphanesini kullanan bu menü fare imleci hareket etmediğinde ya da sizin belirleyeceğiniz belirli bir zamandan sonra tüm menü elementlerini orjinal boyutuna getiriyor.
Yumuşak Gezinti Menüsü çoklu seviye desteğine sahip ve CSS tabanlı bir menü olup, web site gezinti elementlerinin yumuşakça belirmesi için jQuery kullanıyor. Özellikle gezinti elementleri web sitelerinin genelinde önemli bir rol oynadığı için bu elementin güzel görünmesi ve işlemesi, sitenin geneli için de önemli hale geliyor.
Menü öğeleri dilerseniz doğrudan sayfa üzerindeki kod üzerinden, ya da AJAX aracılığı ile harici bir dosya üzerinde çağırılabilir. jQuery sayesinde de alt menüler hem kayarak (slide) hem de yavaşça belirerek (fade in) görüntülenebiliyor.
Bu menü aslında Antonio Lupetti'nin web projelerinizdeki kodları yeniden daha verimli bir şekilde kullanabilmenize yönelik hazırladığı rehberin bir parçası. Bu örnete Antonio, fare imlecinin menü öğeleri üzerine getirilmesinin ardından bir efekt içeriyor (farenizi "About Me" ve "Click Here" öğelerinin üzerine getirin).
9. Digg Başlığını Tasarlamak
Bu menü Digg web sitesi üzerinde yer alan menünün bir kopyası. Abonelik, arama ve hesap bilgileri gibi önemli öğeler, tam olmalarını beklediğiniz yerde, sayfanın üst kısmında yer alıyorlar. Belirli bir genişliğe kadar genişleyebilen genişlik, açılır menüler, çekici arama ve renklerin kolay değiştirilebilmesi, menünün sunduğu özellikler arasında yer alıyor.
jQuery Dosya Ağacı, jQuery için geliştirilmiş özelleştirilebilir bir AJAX dosya tarayıcı eklentisidir. Sadece bir satır JavaScript kodu ile tümüyle etkileşimli dosya ağaçlarını oluşturabilmeniz mümkün. Ayrıca bu betiğin sunucu taraflı dosya sistemlerine entegre edilebilmesi için PHP, ASP.NET, JSP ve Lasso eklentileri de bulunuyor.
Bu menünün sevdiğim yanı, AJAX aracılığı ile dosya uzantılarına bakıp onlara uygun simgeleri eş zamanlı olarak gösterebiliyor olması. Dahası da alt menü öğelerinin açılma ve kapanma efeklerini ve hızlarını belirleyebiliyorsunuz.
