Scriptaculous JS Kütüphanesi ile Açılır - Kapanır Menü Yapımı

**KaRaqiZz** · 13-04-11, 11:37

Merhabalar,

AJAX?ın gelişmesiyle piyasa çıkan JavaScript Kütüphaneleri Bizlere Gerçekten Güzel Görsellikler Sağlıyor. Şimdi Bunlardan Biri Olan Scriptaculous?un Effect.SlideDown ve Effect.SlideUp efekleriyle Açılır Kapanır Menü Yapacağız.

Canlı Örnek İçin [Link Görmek ve Forumumuzdan Yararlanmak İçin Üye Olmasınız. ] Tıklayınız

Başlayalım mı ?

İlk olarak scriptaculous kütüphanesini indirmek için [Link Görmek ve Forumumuzdan Yararlanmak İçin Üye Olmasınız. ] tıklayınız.

Şimdi indirdiğiniz zipin içinde lib ve src adında iki klasör olacak. Bu Klasörler ve içindeki .js dosyaları bizim kütüphanelerimizdir.

Aşağıdaki Kodları index.html olarak kaydedelim.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Açılır - Kapanır Menu Uygulaması </title><script type="text/javascript" src="lib/prototype.js"></script><script type="text/javascript" src="src/builder.js"></script><script type="text/javascript" src="src/controls.js"></script><script type="text/javascript" src="src/effects.js"></script><script type="text/javascript" src="src/dragdrop.js"></script><script type="text/javascript" src="src/scriptaculous.js"></script><script type="text/javascript" src="src/slider.js"></script><script type="text/javascript" src="src/sound.js"></script><script type="text/javascript" src="src/unittest.js"></script></head><body></body></html>
Bildiğiniz gibi bunlar temel sayfa kodlarımız. Tek fark scriptaculous Kütüphanesinin JS dosyalarını entegre ettik. Bize gereken şeyse şimdi Menümüz. Bunun için bir div tagı oluşturup ID tanımlamasını Menu olarak atıyoruz.
<div id="Menu" style="display:none;background:#000;color:#FFF;">< ol><li>Anasayfa</li><li>Hakkimizda</li><li>Biz Kimiz</li><li>İletişim</li></ol></div>
Burda Dikkat Edeceğiniz Şey style kodlamasındaki display etiketinin none değerini almasıdır. Yani div tagımızı görünmez yapıyoruz. Diğer Style Ayarları Size ve Sizin Zevkinize Kalmış

Şimdi de ASIL MESELE Açma Kapama Linklerinin Yapılması ?

Scriptaculous?un bize sunduğu nimeti açıklamaya geldi ?

EFFECT.SLIDEDOWN ve EFFECT.SLIDEUP

Effect.SlideDown sayesinde belirtilen nesneyi aşağıya doğru kaydırırken, Effect.SlideUp ile de yukarıya doğru kaydırıyoruz. Kullanımı da gayet basit. Effect.SlideDown(?elementin-adı?) şeklinde kullanılıyor.

Şimdi Açma ve Kapama Linklerimizi Yapalım.

Yukarıda Oluşturduğumuz Menu Div Kodunun Üzerine Aşağıdaki Kodu Ekleyin.

Menuyü <a href="#" onclick="Effect.SlideDown('Menu'); return false;"> Aç </a> | <a href="#" onclick="Effect.SlideUp('Menu'); return false;">Kapat</a>

kalın yazılan yerlerde efektlerimiz uygulanıyor ve tamamdır. Artık Kaydedip Denemeyi Yapabilirsiniz.

KODLARIN TAMAMI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Açılır - Kapanır Menu Uygulaması </title><script type="text/javascript" src="lib/prototype.js"></script><script type="text/javascript" src="src/builder.js"></script><script type="text/javascript" src="src/controls.js"></script><script type="text/javascript" src="src/effects.js"></script><script type="text/javascript" src="src/dragdrop.js"></script><script type="text/javascript" src="src/scriptaculous.js"></script><script type="text/javascript" src="src/slider.js"></script><script type="text/javascript" src="src/sound.js"></script><script type="text/javascript" src="src/unittest.js"></script><style type="text/css"><!?#Menu {position:absolute;left:16px;top:45px;width:204px; height:284px;z-index:3;}?></style></head><body>Menuyü <a href="#" onclick="Effect.SlideDown('Menu'); return false;"> Aç </a> | <a href="#" onclick="Effect.SlideUp('Menu'); return false;">Kapat</a><div id="Menu" style="display:none; background:#000; color:#FFF;"><ol><li>Anasayfa</li><li>Hakkimizda</li><li>Biz Kimiz</li><li>İletişim</li></ol></div></body></html>

Yapmakta Zorlanan Arkadaşlar [Link Görmek ve Forumumuzdan Yararlanmak İçin Üye Olmasınız. ]tıklayarak çalışan örneğini indirebilirler.

Hepinize Kolay Gelsin.
Süleyman DENİZHAN [Link Görmek ve Forumumuzdan Yararlanmak İçin Üye Olmasınız. ]

13-04-11, 11:37	#1
KaRaqiZz Üyelik tarihi: Feb 2011 Yaş: 23 Mesajlar: 11.519 Konular: 10981 Aldığı Teşekkür : 18 NF Puanı : 32293 NF Seviyesi :	Scriptaculous JS Kütüphanesi ile Açılır - Kapanır Menü Yapımı Merhabalar, AJAX?ın gelişmesiyle piyasa çıkan JavaScript Kütüphaneleri Bizlere Gerçekten Güzel Görsellikler Sağlıyor. Şimdi Bunlardan Biri Olan Scriptaculous?un Effect.SlideDown ve Effect.SlideUp efekleriyle Açılır Kapanır Menü Yapacağız. Canlı Örnek İçin [Link Görmek ve Forumumuzdan Yararlanmak İçin Üye Olmasınız. ] Tıklayınız Başlayalım mı ? İlk olarak scriptaculous kütüphanesini indirmek için [Link Görmek ve Forumumuzdan Yararlanmak İçin Üye Olmasınız. ] tıklayınız. Şimdi indirdiğiniz zipin içinde lib ve src adında iki klasör olacak. Bu Klasörler ve içindeki .js dosyaları bizim kütüphanelerimizdir. Aşağıdaki Kodları index.html olarak kaydedelim. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Açılır - Kapanır Menu Uygulaması </title><script type="text/javascript" src="lib/prototype.js"></script><script type="text/javascript" src="src/builder.js"></script><script type="text/javascript" src="src/controls.js"></script><script type="text/javascript" src="src/effects.js"></script><script type="text/javascript" src="src/dragdrop.js"></script><script type="text/javascript" src="src/scriptaculous.js"></script><script type="text/javascript" src="src/slider.js"></script><script type="text/javascript" src="src/sound.js"></script><script type="text/javascript" src="src/unittest.js"></script></head><body></body></html> Bildiğiniz gibi bunlar temel sayfa kodlarımız. Tek fark scriptaculous Kütüphanesinin JS dosyalarını entegre ettik. Bize gereken şeyse şimdi Menümüz. Bunun için bir div tagı oluşturup ID tanımlamasını Menu olarak atıyoruz. <div id="Menu" style="display:none;background:#000;color:#FFF;">< ol><li>Anasayfa</li><li>Hakkimizda</li><li>Biz Kimiz</li><li>İletişim</li></ol></div> Burda Dikkat Edeceğiniz Şey style kodlamasındaki display etiketinin none değerini almasıdır. Yani div tagımızı görünmez yapıyoruz. Diğer Style Ayarları Size ve Sizin Zevkinize Kalmış Şimdi de ASIL MESELE Açma Kapama Linklerinin Yapılması ? Scriptaculous?un bize sunduğu nimeti açıklamaya geldi ? EFFECT.SLIDEDOWN ve EFFECT.SLIDEUP Effect.SlideDown sayesinde belirtilen nesneyi aşağıya doğru kaydırırken, Effect.SlideUp ile de yukarıya doğru kaydırıyoruz. Kullanımı da gayet basit. Effect.SlideDown(?elementin-adı?) şeklinde kullanılıyor. Şimdi Açma ve Kapama Linklerimizi Yapalım. Yukarıda Oluşturduğumuz Menu Div Kodunun Üzerine Aşağıdaki Kodu Ekleyin. Menuyü <a href="#" onclick="Effect.SlideDown('Menu'); return false;"> Aç </a> \| <a href="#" onclick="Effect.SlideUp('Menu'); return false;">Kapat</a> kalın yazılan yerlerde efektlerimiz uygulanıyor ve tamamdır. Artık Kaydedip Denemeyi Yapabilirsiniz. KODLARIN TAMAMI <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Açılır - Kapanır Menu Uygulaması </title><script type="text/javascript" src="lib/prototype.js"></script><script type="text/javascript" src="src/builder.js"></script><script type="text/javascript" src="src/controls.js"></script><script type="text/javascript" src="src/effects.js"></script><script type="text/javascript" src="src/dragdrop.js"></script><script type="text/javascript" src="src/scriptaculous.js"></script><script type="text/javascript" src="src/slider.js"></script><script type="text/javascript" src="src/sound.js"></script><script type="text/javascript" src="src/unittest.js"></script><style type="text/css"><!?#Menu {position:absolute;left:16px;top:45px;width:204px; height:284px;z-index:3;}?></style></head><body>Menuyü <a href="#" onclick="Effect.SlideDown('Menu'); return false;"> Aç </a> \| <a href="#" onclick="Effect.SlideUp('Menu'); return false;">Kapat</a><div id="Menu" style="display:none; background:#000; color:#FFF;"><ol><li>Anasayfa</li><li>Hakkimizda</li><li>Biz Kimiz</li><li>İletişim</li></ol></div></body></html> Yapmakta Zorlanan Arkadaşlar [Link Görmek ve Forumumuzdan Yararlanmak İçin Üye Olmasınız. ]tıklayarak çalışan örneğini indirebilirler. Hepinize Kolay Gelsin. Süleyman DENİZHAN [Link Görmek ve Forumumuzdan Yararlanmak İçin Üye Olmasınız. ] ________________

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal Hybrid-Şeklinde gösterime geç Ağaç şeklinde gösterime geç

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
Ilk Popüler Bilim Kütüphanesi Açılıyor	Şirine	Flash Haberler	0	21-01-09 13:50
Sothink DHTML Menü - Yeni menü şablonları ekleme	NFCİNİ	Genel Konular	0	05-01-09 00:30
Sol taraftan açılan sayfayla beraber hareket eden açılır kapanır menü	BlackDark	vBulletin Mod & Hack & Eklenti	0	19-12-08 14:13
Türkiye'nin Oyuncak Kütüphanesi	Şirine	Flash Haberler	0	07-12-08 11:30
iTunes Store Kapanır mı?	BlackDark	Bilim ve Teknik	0	05-10-08 18:54

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

Etiketlenen Kullanıcılar
Input each user name separated by a comma, like so: User1,User2,User3.