Javascript ile dökülen menü

27 / Nisan / 2008 Author

İsa Engiz

javascript Tags

javascript

Yorumlar kapalı

Dökülen menülerin en önemli tarafı her halde kullanıcının tıklayabileceği pek çok bağlantı varsa, bunları tek bir çatı altında toplayabilmesidir. Böylece bağlantılar daha düzenli gözükür, birbirleriyle alakalı olanlar aynı grupta buluştuğu için kullanıcı ilgilenmiyorsa, o tıklamadıkça gözükmez.

dokulenmenu-resim

Biz de şimdi javascript yardımıyla döküen bir menü yapacağız. Uygulamanın canlı haline buradan göz atabilirsiniz ya da dosyaları buradan indirerek inceleyebilirsiniz.

HTML kodu

Oluşturacağımız bu basit uygulamanın html kodu da aynı şekilde basit:

<ul><li>
<a href="#" id="ornekmenu" onclick="menugostergizle()">Koodla | Blog</a>
<div id="altmenu">
<a href="#">Javascript</a><br />
<a href="#">PHP</a><br />
<a href="#">Ajax</a><br />
<a href="#">MySQL</a><br />
<a href="#">Teknoloji</a><br />
<a href="#">Web 2.0</a><br />
</div>
</li>
</ul>
Yukarıdaki örnek menüye tıklayınız. Dökülen menüyü göreceksiniz.

3 önemli noktamız var bu kodu yazarken:

1- Menümüzü < li> etiketi içerisine yazıyoruz ve bu etiketin özelliklerini de css dosyasından ayarlıyoruz.
2- menüyü göstermek için javascript fonksiyonumuzu ekliyoruz, menugostergizle().
3- Dökülerek açılan menüyü, önceden ilgili yere yazmamıza rağmen, gözükmüyor çünkü sitil dosyasında “display:none;” olarak belirtilmiş. Javascript fonksiyonunun yapacağı iş ise bunu “block” yapmak.

Javascript

Javascript kodlarımız ise şu şekilde:

var durum = "none";
 
function menugostergizle()
{
	if (durum == "none")
	{
		document.getElementById("altmenu").style.display = "block";
		durum = "block";
	}
	else
	{
		document.getElementById("altmenu").style.display = "none";
		durum = "none";
	}
}

Bu kodun da yaptığı iş çok basit, doküman ilk yüklendiğinde “durum” değişkeni “none” olarak tanımlanmış, sonrasında da bunu ya “block” yapıyoruz ya da yine “none”. (bu method hakkında daha fazla bilgi/örnek için bu yazıya bakabilirsiniz.)

İşte bu kadar. CSS dosyasını da incelemek için kodları buradan indirebilirsiniz.

NOT: Javascript ile ilgili diğer yazılara göz atmak için bu kategoriye bakabilirsiniz.

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!

Bu yazı yorumlara kapalı.

Arama

E-Posta Aboneliği

RSS Aboneliği

En Çok Yorumlanan Yazılar

Etiketler

404 ajax apache arama butonu as astrofizik açık kaynak banner blogger blogger/blogspot Blogger / Blogspot blogspot case chmod css date dosya yükleme editör etiket etkinlik favicon featured form ftp galeri Genel gimp hata sayfası header htaccess htpasswd ilişkisel veritabanı index innodb javascript join JQuery kategori koodla linux mysql opacity php resim url

Son Yorumlar

Murat: Güzel bir teknik, şu ana kadar sınırsız alt kategori lazım olmadı ama olmayacağı anlamına gelmiyor
iilyas: Bu kodlar çalışmıyor arkadaşım. Localde olduğu içinmi acaba ?
iilyas: Arkadaşım çok teşekkür ediyorum. Harika anlatmışsın ajaxla çalışmalara başlamak lazım estetik açısından.....
Nuri: bende bu şekilde bir çalışma yaptım ancak bir sorunum var ne yaptıysam url den index.php bölümünü kaldıramadım....
Kemal: Makale için çok teşekkürler, resimleri div tagları ile yapabilirmiyiz. Bu arada imagelara link verirsek daha...

KOODLA | BLOG