JQuery ile Treeview Menü

 bcakir
 22 Ekim 2011

Bu yazımda JQuery ile farklı bir yapıda açılıp kapanır menü yapımını anlatacağım. Bu menüyle bütün içeriğinizi detaylı olarak gruplandırmanız çok kolay olacak. Yapacağımız uygulamayla bunu rahatlıkla öğreneceksiniz. Bir önceki menü yapımlarında olduğu gibi hazır JQuery kütüphanesi kullanacağız. Uygulamamızda ana kategoriler ve bunların alt kategorileri şeklinde sıralanarak devam edecek. Bu gruplandırmayı istediğiniz kadar uzatabilirsiniz, alt kategorinin de alt kategorileri gibi. Ayrıca, bunlara bağlantı da verebilirsiniz. Bu uygulamamızda da resimjs ve css dosyaları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>jQuery treeview</title>
<link rel="stylesheet" href="css/jquery.treeview.css" />
<link rel="stylesheet" href="css/screen.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script src="js/jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#tree").treeview({
		animated: "fast",
        persist: "cookie",
		collapsed: true,
		unique: true
	});
});
</script>
</head>
<body>
	<div id="main">
	<ul id="tree" class="treeview-red">
	<li class="open"><span>Teknoloji</span>
		<ul>
			<li><span>Mobil</span>
				<ul>
					<li><span>Android</span></li>
                    <li><span>IPhone</span></li>
				</ul>
			</li>
			<li><span>Donanım</span></li>
			<li><span>Yazılım</span>
				<ul>
					<li><span>Php</span></li>
                    <li><span>JQuery</span></li>
                    <li><span>Python</span></li>
				</ul>
			</li>
        </ul>
    </li>

	<li><span>Moda</span>
		<ul>
			<li><span>Bay</span>
				<ul>
					<li><span>Kol Saati</span></li>
                    <li><span>Ayakkabı</span></li>
                    <li><span>Gömlek</span></li>
                    <li><span>Ceket</span></li>
				</ul>
			</li>
			<li><span>Çocuk</span></li>
        </ul>
    </li>
</body>
</html>

Ben yukarıda basit bir kategorilendirme şekli oluşturdum. Siz bunu kolayca düzenleyip, kendin gruplarınızı oluşturursunuz. Bütün içeriğin olduğu çalışan dosyayı buradan indirebilirsiniz. Bir yazının daha sonuna gelmiş oldum. Yararlı bir uygulama olması dileğiyle.

 3.420 Okunma

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

  1. fazla kategorili menülere kısayol yapma ve gruplama için birebir olmuş. klavyene sağlık çok beğendim.

  2. klavyene sağlık, yine çok yararlı bir yazı yazmışsın.

  3. Gerçekten yararlı bir makale olmuş bende projem için kullandım
    Eline sağlık…

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

Daha fazla JQuery
Kapat