Tree Menu dengan jQuery akan terlihat lebih menarik dan memudahkan user dalam menuju link yang dipilih...
silahkan download source code disini
nah contoh pembuatannya adalah sebagai berikut:
<!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>Kota Di Indonesia</title>
<link type="text/css" rel="stylesheet" media="all" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function() {
$("#root ul").each(function() {$(this).css("display", "none");});
$("#root .category").click(function() {
var childid = "#" + $(this).attr("childid");
if ($(childid).css("display") == "none") {$(childid).css("display", "block");}
else {$(childid).css("display", "none");}
if ($(this).hasClass("cat_close")) {$(this).removeClass("cat_close").addClass("cat_open");}
else{$(this).removeClass("cat_open").addClass("cat_close");}
});
});
//--><!]]>
</script>
</head>
<body>
<h2>Kota di Indonesia</h2>
<div class="content">
<ul id="root" class="menu">
<li>
<a href='javascript:void(0);' childid = 'c_12' class='cat_close category'> </a>
<a href='javascript:void(0);'>Jawa Timur</a>
</li>
<ul id='c_12'></ul>
<li>
<a href='javascript:void(0);' childid = 'c_13' class='cat_close category'> </a>
<a href='javascript:void(0);'>Jawa Tengah</a>
</li>
<ul id='c_13'>
<li>
<a href='javascript:void(0);' class='product'> </a>
<a href='javascript:void(0);'>Semarang</a>
</li>
</ul>
<li>
<a href='javascript:void(0);' childid = 'c_8' class='cat_close category'> </a>
<a href='javascript:void(0);'>Jawa Barat</a>
</li>
<ul id='c_8'>
<li>
<a href='javascript:void(0);' childid = 'c_11' class='cat_close category'> </a>
<a href='javascript:void(0);'>Bandung</a>
</li>
<ul id='c_11'></ul>
<li>
<a href='javascript:void(0);' childid = 'c_10' class='cat_close category'> </a>
<a href='javascript:void(0);'>Cirebon</a>
</li>
<ul id='c_10'></ul>
<li>
<a href='javascript:void(0);' childid = 'c_9' class='cat_close category'> </a>
<a href='javascript:void(0);'>Indramayu</a>
</li>
<ul id='c_9'></ul>
</ul>
<li>
<a href='javascript:void(0);' childid = 'c_5' class='cat_close category'> </a>
<a href='javascript:void(0);'>Yogyakarta</a>
</li>
<ul id='c_5'>
<li>
<a href='javascript:void(0);' childid = 'c_7' class='cat_close category'> </a>
<a href='javascript:void(0);'>Jogja</a>
</li>
<ul id='c_7'>
<li>
<a href='javascript:void(0);' class='product'> </a>
<a href='javascript:void(0);'>Malioboro</a>
</li>
<li>
<a href='javascript:void(0);' class='product'> </a>
<a href='javascript:void(0);'>Kaliurang</a>
</li>
</ul>
</ul>
<li>
<a href='javascript:void(0);' childid = 'c_3' class='cat_close category'> </a>
<a href='javascript:void(0);'>Aceh</a>
</li>
<ul id='c_3'></ul>
<li>
<a href='javascript:void(0);' class='product'> </a>
<a href='javascript:void(0);'>Jambi</a>
</li>
<li>
<a href='javascript:void(0);' class='product'> </a>
<a href='javascript:void(0);'>Sumatera Barat</a>
</li>
<li>
<a href='javascript:void(0);' class='product'> </a>
<a href='javascript:void(0);'>Sumatera Utara</a>
</li>
<li>
<a href='javascript:void(0);' class='product'> </a>
<a href='javascript:void(0);'>Riau</a>
</li>
</ul>
</div>
</body>
</html>
SAYA COBA ... MAKASIH
ReplyDeleteawas virus jgn didownload
ReplyDelete