mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Accordion Menü - Alan Hazırlama
Bu yazımda jquery kullanarak accordion denilen dinamik olan alanı yapıyı nasıl yapabilceğimizi göstereceğim. Jquery ile ajax işlemlerini yaptıktan sonra artık görsel olarak birşeyler yapmaya karar verdim. İlk olarakta bazı projelerde kullanmayı düşündüğüm accordion uygulamasını inceledim. Bilindiği gibi birçok internet sitesinde kullanılıyor. Kullanılmasa da adını çok sık duymuşuzdur. Şimdi bu yapıyı nasıl yapacağımıza bakalım.

Öncelikle bu yapıyı kullanmamız için jquery javascript kütüphanesini ve accordion olayını gerçekleştirecek olan javascript kodlarını tutan accordion kütüphanesini projemize ekliyoruz.

Daha sonra script kodlarımızı ve html kodlarımızı yazıyoruz.

Script kodumuz şöyle olacak: 
        $(document).ready(function(){
            jQuery('#list1b').accordion({
			autoheight: false
			});
        });
Html kodlarımız ise şöyle olacak:

<div class="basic" id="list1b">
  <a>Başlık</a>
  <div>
    <p>
      İçerik
    </p>
  </div>
  <a>Başlık</a>
  <div>
    <p>
      İçerik
    </p>
  </div>
</div>

Html yapımız bir standart ve incelediğiniz zaman bu yapıyı anlayıp, çok daha kapsamlı uygulamalar geliştirebilirsiniz. Bu accordion uygulamasını buradan ve buradan faydalanarak kendim uyarladım ve bir örnek hazırladım. Buradan hazırlamış olduğum örneğin dosyalarına, buradan da çalışır halde ki görünümüne ulaşabilirsiniz.



Görüldüğü yaptığımız uygulama gibi birçok uygulamalar geliştirebiliriz. Menülerimizi böyle tasarlayabiliriz, manşet şeklinde alanlar tasarlayabiliriz.
İyi Çalışmalar!
Mehmet Duran 01 Ekim Çarşamba 2008 12 40175 4,7
Web Tasarım Javascript jQuery Jquery Tasarım-Görsellik Plugin Eklenti
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar jQuery ile Dinamik Alanlar Oluşturma (Scroll Olmadan ve Yatay) Jcrop ve Asp.net ile Resimleri Kesme (Örnek Dahil) Reflection (Resim Yansıması) The Ultimate Css (E-Book) Jquery ile Tab Şeklinde Menü Hazırlama
Yorumlar
Yorum Yaz
RSS Yorum Takibi
lilyum 11 Kasım Salı 2008 22:40 #1
acilll... bi sorum olucak.bu aradaki deneme yazılarına nasıl link vericez bu şekli bozmadan. cevaplarsanız sevinirim..
Mehmet Duran 11 Kasım Salı 2008 23:05 #2
Merhabalar. Dediğiniz gibi linkleri koyunca biraz değişiklikler yapmak gerekiyor. Değişiklikleri yaptım ve linkli halini buradan indirebilirsiniz. Ayrıca css dosyasıyla oynayarak tasarımı değiştirebilirsiniz. Ben biraz acele ile yaptım.
lilyum 11 Kasım Salı 2008 23:23 #3
çok çok teşekkür ederim.ben biraz yeniyimde kusura bakmayın.şimdi de ana başlıklara link veremiyorum??
Mehmet Duran 11 Kasım Salı 2008 23:30 #4
Merhabalar! Bu uygulamada ana başlıklara link vermek biraz saçma olur. Çünkü; ana başlıklara tıklayıp alt başlıkları açıyorsunuz. Eğer link verirseniz accordion uygulaması olmaz.
lilyum 11 Kasım Salı 2008 23:40 #5
en tepedekini Home Page linki yapmak istiyorum.onun altında da açılan bişey koymıcam tabi.ama alttakiler de sizin dediğiniz gibi tabiki.
Mehmet Duran 11 Kasım Salı 2008 23:48 #6
Evet doğru söylemişsin. Bunu yapman mümkün. İlk yorumumda verdiğim linkteki örneğe bakabilirsin tekrar. Dediğin gibi düzelttim.
lilyum 12 Kasım Çarşamba 2008 00:03 #7
Gerçekten çok teşekkür ederim.Ellerine sağlık :)
Mehmet Duran 12 Kasım Çarşamba 2008 00:04 #8
Rica ederim. İyi Çalışmalar.
sitemerkez 16 Şubat Pazartesi 2009 15:12 #9
Türkçe karakterleri yazamıyorum bunu nasıl çözeceğim
Mehmet Duran 16 Şubat Pazartesi 2009 22:19 #10
Merhaba. Türkçe karakter sorunu bu uygulamanın dışında bir sorun. O sorunu kullandığın sayfanın veya projenin kodlama dilini Türkçe destekli bir dil olarak ayarlarsan aşarsın.
Can Özkaymak 14 Aralık Salı 2010 13:06 #11
Simdi hocam postback olduktan sonra querystring e gore nasil acik tutucaz accordiondaki headeri die bi sorum olucak? Bu arada elinize saglik anlatm icin cok guzel.
Mehmet Duran 06 Ocak Perşembe 2011 10:58 #12
@Can, gittiğin sayfada hangi menüden gelindiğini querystring ile gönderdiğin değerden veya sayfa isminden öğrenebilirsin. Bu değeri aldıktan sonra menü içinde o değere veya safya ait olan menü kısmını bulup istediğin şekilde biçimlendirebilirsin.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Bazı yıkılışlar daha parlak kalkınışların teşvikçisidir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009