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

Scriptaculous kütüphanesinin bize sağladığı güzelliklerden yararlanarak açılır - kapanır menü yapalı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.


Başlayalım mı?


İlk olarak scriptaculous kütüphanesini indirmek için buraya 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>



Hepinize Kolay Gelsin.

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Teşekkürler, Emeğinize Sağlık...
ellerine sağlık çok güzel olmuş ama benim aklımdaki olay hani netlogta facebookta arkadaş ekleyince ortada çıkan bi pencere varya onun gibi bişiy yapmak istiyorum yardımcı olursanız sevinirim
basit bir işlem için dünya kadar javascript dosyaları var. Hiç gerek yok bu kadar zorlaştırmaya bu işi.
aslında o kadar js eklemeseniz de olur , scriptaculous.js, effect.js, ve prototype.js dosyalarını eklemenız yeterli olur ... bu tanıtım amaçlı bir yazı olduqundan bulunmasında bir sakınca görmedim ..
Kaynak dosyada, demo sitede çalışmıyor.
Peki bu uygulamanın tam tersi istikamete açılan şeklini nasıl yaparım, http://www.tagheuer.com/html.php/int-en/home adresindeki gibi menu yukarı doğru açılsın istiyorum, yardımlarınız için şimdiden teşekküeler...

Yukarı Git