Cara Membuat Menu TreeView (Menu Bertingkat) Dengan JQuery

JQuery TreeView Menu
Membuat TreeView Menu dengan JQuery

TreeView Menu atau yang biasa disebut dengan menu bertingkat adalah menu interaktif aplikasi website yang dibuat dengan coding JQuery. Dimana dengan TreeView Menu ini memungkinkan untuk menampilkan child menu lainnya dalam bentuk hirarki (bertingkat) dengan effect yang menarik layaknya aplikasi dekstop komputer.

Fitur TreeView Menu

  • Menu bisa ditampilkan dan disembunyikan secara interaktif dengan cara mengklik option menu.
  • Navigasi yang mudah dari beberapa menu yang kompleks (dalam jumlah yang banyak).
  • Efek menampilkan dan menyembunyikan menu bisa disesuaikan.
  • Mudah dan jelas untuk mengkonfigurasi script JQuery
Contoh Demo Enter
Berikut adalah contoh Source code lengkapnya.
<style>
.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}

.treeview ul {
background-color: white;
margin-top: 4px;
}

.treeview li {
margin: 0;
padding: 3px 0pt 3px 16px;
}
.treeview li:hover { cursor: pointer; }
.treeview li { background: url(./images/treeview-default-line.gif) 0 0 no-repeat;width:100px; }
.treeview li.last { background-position: 0 -1766px }
.treeview li span.plus {
background:url('./images/plus.gif') no-repeat;
cursor: pointer;
padding-left:10px;
vertical-align:middle;
color:green;
}
.treeview li span.minus{
background:url('./images/minus.gif') no-repeat;
cursor: pointer;
vertical-align:middle;
padding-left:10px;
color:red;
}



</style>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {


$("#treeview li").toggle(
function() {
$(this).children('ul').slideDown()
if ($(this).hasClass('inner')) {
$(this).removeClass('inner').addClass('innerview');
$idd=$(this).children('span').attr('id');

$('#'+$idd).removeClass('plus').addClass('minus');

}
},
function() {
$(this).children('ul').slideUp()
if ($(this).hasClass('innerview')) {
$(this).removeClass('innerview').addClass('inner');
$idd=$(this).children('span').attr('id');
$('#'+$idd).removeClass('minus').addClass('plus');
}
}
);
});
</script>
</head>
<body>
<span style="font-size:15px; "><b> TreeView Menu Dengan JQuery </b></span><br><br>
<ul id="treeview" class='treeview'>
<li class="inner"><span class='plus' id="kucing">Menu1</span>
<ul style="display: none">
<li class="inner"><span class='plus' id="rini">Submenu1</span>
<ul style="display: none" >
<li><span id="">Submenu1</span></li>
<li class="inner"><span class='plus' id="Syafaatfm">Submenu1</span>
<ul style="display: none">
<li><span id="haha">Syafaatfm</span></li>
<li><span id="hihi">Jegulo</span></li>
</ul>
</li>
</ul>
</li>
<li><span id="sinau">Lainnya</span></li>
</ul>
</li>
<li><span id="belajar">Example1</span></li>
<li><span id="merdeka">Example2</span></li>
<li class="inner"><span class='plus' id="mertua">Menu2</span>
<ul style="display:none">
<li><span id="indonesia">Rini</span></li>
<li><span id="Surabaya">Endang</span></li>
<li><span id="jatim">kiswati</span></li>
</ul>
</li>
<li ><span>Pimpit</span></li>
</ul>
<div valign=top style="font-size: 10px;color: #dadada;" id="dumdiv">
</div>

</body>
</head>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *