JQuery ile Accordion Menü

 bcakir
 22 Ekim 2011

Merhaba arkadaşlar yeni bir menü yapım uygulamasında tekrar buluştuk. Bu yazımda JQuery ile açılıp kapanır menü yapımını anlatacağım. Bu menüyü sitenizdeki kategorilere hızlı erişim sağlamak için kullanabilirsiniz. Bu yazıyla bunun nasıl yapıldığını kolayca öğreneceksiniz. Bundan sonra ki makalemde de treeview menü yapımını da anlatacağım. Yapacağımız bu uygulamalarda yine hazır kütüphanelerden yararlanacağız. Uygulamamızda ana kategoriler ve bunların altında bağlantılar olacak. Hangi kategoriyi seçersek onun altındaki bağlantılar gözükecek ve bu menü sayesinde hızlıca başka sayfaya geçebileceğiz. Bu uygulamayı site içi veya site dışı sayfalara yönlendirme amacıyla kolayca kullanabilirsiniz. Uygulamamızın çalışabilmesi için js ve css dosyasına ihtiyacınız olduğundan dolayı çalışır halini yazının sonunda sizlere vereceğim. Şimdi uygulamamızı yapmaya başlayabiliriz.

<!DOCTYPE html>
<html>
<head>
<title>Accordion Menü Yapımı</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
ddaccordion.init({
	headerclass: "expandable",
	contentclass: "categoryitems",
	revealtype: "click",
	mouseoverdelay: 200,
	collapseprev: true,
	defaultexpanded: [0],
	onemustopen: false,
	animatedefault: false,
	persiststate: true,
	toggleclass: ["", "openheader"],
	togglehtml: ["prefix", "", ""],
	animatespeed: "fast",
	oninit:function(headers, expandedindices){},
	onopenclose:function(header, index, state, isuseractivated){}
});
</script>
</head>
<body>
<div class="arrowlistmenu">
    <h3 class="menuheader expandable">Web Sitleri</h3>
    <ul class="categoryitems">
    <li><a href="http://www.bcakir.com">bcakir</a></li>
    <li><a href="http://www.egitimmateryalleri.com">egitimmateryalleri</a></li>
    </ul>

    <h3 class="menuheader expandable">Facebook Yazıları</h3>
    <ul class="categoryitems">
    <li><a href="http://bcakir.com/?p=835">Facebook Tarzı Resim Galerisi</a></li>
    <li><a href="http://bcakir.com/?p=858">Video Oyunları Kan Kaybediyor</a></li>
    <li><a href="http://bcakir.com/?p=833">Sosyal Oyun Pazarı Büyüklüğü</a></li>
    </ul>

    <h3 class="menuheader expandable">Css Yazıları</h3>
    <ul class="categoryitems">
    <li><a href="http://bcakir.com/?p=650">Sabit Reklam Alanı Yapma</a></li>
    <li><a href="http://bcakir.com/?p=653">Css ile Tarayıcı Sıfırlama</a></li>
    </ul>
</div>
</body>
</html>

Uygulamamızı JQuery kütüphanesinden yararlanarak kolayca yaptık. Kategorileri kendinize göre ayarlarsınız. Ayrıca, dışarıdan çağırdığımız css dosyasında değişiklik yaparak menümüze farklı bir görünüm de verebilirsiniz. Bütün içeriğin olduğu çalışan dosyayı buradan indirebilirsiniz. Bu yazıda anlatacaklarımın sonuna gelmiş oldum. Yararlı bir uygulama olması dileğiyle.

 5.615 Okunma

Bu yazıya 5 yorum yapılmış.

  1. kategorileme için süper bir uygulama olmuş. teşekkür ederim kolayca kendime uyarladım

  2. çok süper teşekkürler

  3. Hocam her şey çok güzel ama ben açılır menünün sayfa ilk açıldığında tamamen kapalı olmasını bir ziyaretçi tıklayınca ilgili alanın açılmasını istiyorum. Bunu nasıl yapabilirim.

  4. İlk menu açık geliyor bunun sebebi nedir yada hangi kod bloğu ile gerçekleşiyor. Teşekkürler..

  5. İlk açılışta hepsi kapalı gelsin istiyorsanız, index.html içerisinde

    Bu satırı bulun
    defaultexpanded: [0],

    bu şekilde değiştirin.
    defaultexpanded: false,

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery
Kapat