jquery menü | bildirgec.org

Flash menüler çok ilgi çekici olabiliyor. Jquery kullanarak flash tarzı bir menü yapmak istiyorsanız aşağıdan gerekli bilgilere ulaşabilirsiniz.

Nasıl Çalışır?

• Sayfanızın head etiketleri bölümüne aşağıdaki kodları ekleyin.

• Eklemek istediğiniz menü sayısı kadar aşağıdaki kodu sitenizde görünmesini istediğiniz yere ekleyin.

not: i̇ndirmiş olduğunuz dosyada bütün kodlar bulunmaktadır.

Kişiselleştirmek

Javascript etkileşim ve geri bildirim eklemeniz için kolaylık sağlar. Bu yazıda javascript hakkında farklı ve çok güzel bilgiler edinebilirsiniz.

1 - MenuMatic

Dikey ve yatay şekilde bir menü örneğidir.

2 - Animated Menu using jQuery

Menünün üzerine gelindiğinde bir hareket verilmesini sağlayan örnekte bilgisayarınıza indirebilmeniz için psd dosyası da bulunmaktadır.

Gezinti (navigasyon), kullanılırlık açısından web tasarımında oldukça önemlidir. Buna rağmen bağlantılar ve gezinti menüleri bir sitenin görsel görünümünü daha da iyileştirebilir. Eğer herkesin yaptığından daha farklı bir gezinti menüsü oluşturmak istiyorsanız, jQuery bunun için size sayısız seçenek sunmaktadır. Bu yazıda jQuery ve CSS kullanarak gezinti menülerinde nasıl ilgi çekici efektler oluşturabileceğinizi göreceksiniz.

1. jQuery Kullanarak Nasıl Animasyonlu Menü Yapılır?

2. Digg Başlığını Tasarlamak: Nasıl Yapılır ve İndirme Bağlantısı

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.

• Demo | İndir | Detay

Mükemmel jQuery eklentilerine ve onları nerede bulabileceğine dair sayısız makale bulunuyor. Ancak bazen bu üçüncü parti kaynaklara ve eklentilere bel bağlamamak en iyisidir. Tıpkı eskiden olduğu gibi kendiniz yapın. Bugün, günümüz modern web siteleri ve uygulamalarında kullanılan 20'nin üzerinde yaratıcı ve pratik jQuery kullanım örneklerini listelemeye çalışacağız. Eminim bu örnekler size bir sonraki projeniz için ilham verecektir.

James Padolsey Renk Değiştiricisi

Nettuts yazarlarından James Padolsey'in web sitesinde güzel bir özellik bulunuyor. Sitenin sağ üst kısmında bulunan "özelleştir" çubuğu başlık kısmının arkaplan rengini değiştirmenizin sağlıyor.

• Siteyi ziyaret edin.

Dragon Interactive'in jQuery Navigasyonu

Bu elemanlar aşağı yukarı web tasarımının tanrılarıdır ve siteleri de bunu doğrular nitelikte. Bunun için sadece ana sayfalarının başlık kısmındaki jQuery navigasyonuna bakmak yeterli. Daha önce hiç bu kadar seksi bir navigasyon gördünüz mü?

• Siteyi ziyaret edin.

FamSpams Facebox

FamFamFam, sitenin FamSpam özelliği için özel bir lightbox betiğine ihtiyaç duydu. Site bunun üzerine FaceBox adı verilen bir yöntem oluşturmaya karar verdi. FaceBox, lightbox'un efektlerini kopyalıyor ancak statik html sayfalarını, iletişim formlarını; kısacası istediğiniz her şeyi gösterebilmenizi sağlıyor. Facebox günümüzde yoğun talebin ardından bir jQuery eklentisi olarak dağıtılıyor.

• Siteyi ziyaret edin.

jQuery'nin geliştiricilere sağladığı avantajlar saymakla bitmez... Flash'ın aksine web sitenizin içeriğini arama motorları tarafından erişilebilir kılarken güzel görünümlü animasyonları sitenize entegre edebilmenizin yanısıra, sitenizin kullanılırlığını da arttırması sebebiyle jQuery, modern web geliştiricilerinin bir numaralı tercihi olma yolunda hızla ilerliyor.

Bu yazıda jQuery kullanarak navigasyonu temiz, keskin ve etkin bir biçimde yansıtan 8 siteyi listelemeye çalıştım. Bu siteler, jQuery kütüphanesini sadece bazı temel efektleri eklemekten çok daha fazlasını yapmak için kullanmışlar ve bunu da başarmışlar.

Eğer siz de jQuery'nin büyülü dünyasındaki yerinizi almak istiyorsanız, daha önce yayımladığım size sıfırdan jquery öğretecek 15 kayna adlı makale size yardımcı olacaktır.

• Carrot Creative