Membuat Menu Tree dengan JQuery


Saya sedikit mau membahas, bagaimana membuat menu tree. Menu nya terbentuk seperti kesatuan hirarki, seakan seperti menu di Windows Explorer di komputer anda. Dengan sedikit teknik jQuery kita akan melihat menu tree yang cukup bagus. Dan tentunya dengan hasil yang maksimal, karena meman untuk itu jQuery dibuat, sesuai dengan slogan nya “Write Less Do More”. Kita hanya membutuhkan 3 file, yaitu file index.html, style.css, dan jMenu.js.

index.html


jQuery Drop Down Menu -- Manguri

<!-- CSS For The Menu -->

<!-- Add jQuery From the Google AJAX Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"><!--mce:0--></script>

<!-- Import The jQuery Script -->
<script src="jMenu.js" type="text/javascript"><!--mce:1--></script>

<!-- Menu Start -->
<div id="jQ-menu">
 <!-- Main Unordered List -->
<ul>
 <!-- Regular List Item -->
	<li><a href="#">Menu Tree - Manguri</a></li>
 <!-- List Item With A Sub-Menu - Note The toggle And sub-menu Class -->
	<li>Bahasa Pemrograman
<ul>
 <!-- A Sub-Menu In A Sub-Menu - Any Number of Nested Menus Will Work -->
	<li>Desktop
<ul>
	<li><a href="#">C++</a></li>
	<li><a href="#">C#</a></li>
	<li><a href="#">Delphi</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">Visual Basic</a></li>
</ul>
</li>
	<li>Web
<ul>
	<li><a href="#">ASP</a></li>
	<li><a href="#">JSP</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</li>
</ul>
</li>
	<li>Eleifend
<ul>
	<li><a href="#">Pretium</a></li>
	<li><a href="#">Ornare</a></li>
	<li><a href="#">Est</a></li>
	<li><a href="#">Pellentesque</a></li>
	<li><a href="#">Habitant</a></li>
</ul>
</li>
</ul>
 <!-- End Unordered List --></div>
<!-- End Menu -->

style.css

body {
 font-family: "Trebuchet MS", Helvetica, Sans-Serif;
 font-size: 14px;
}

#jQ-menu ul {
 list-style-type: none;
}

#jQ-menu a, #jQ-menu li {
 color: gray;
 text-decoration: none;
 padding-bottom: 3px;
}

#jQ-menu ul {
 padding-left: 15px;
}

jMenu.js

$(function() {
 // hide all the sub-menus
 $("span.toggle").next().hide();

 // add a link nudging animation effect to each link
 $("#jQ-menu a, #jQ-menu span.toggle").hover(function() {
 $(this).stop().animate( {
 fontSize:"17px",
 paddingLeft:"10px",
 color:"black"
 }, 300);
 }, function() {
 $(this).stop().animate( {
 fontSize:"14px",
 paddingLeft:"0",
 color:"#808080"
 }, 300);
 });

 // set the cursor of the toggling span elements
 $("span.toggle").css("cursor", "pointer");

 // prepend a plus sign to signify that the sub-menus aren't expanded
 $("span.toggle").prepend("+ ");

 // add a click function that toggles the sub-menu when the corresponding
 // span element is clicked
 $("span.toggle").click(function() {
 $(this).next().toggle(1000);

 // switch the plus to a minus sign or vice-versa
 var v = $(this).html().substring( 0, 1 );
 if ( v == "+" )
 $(this).html( "-" + $(this).html().substring( 1 ) );
 else if ( v == "-" )
 $(this).html( "+" + $(this).html().substring( 1 ) );
 });
});

menu tree - manguri

 

, , , , ,

  1. #1 by apitsaepulloh on 26 November, 2011 - 5:27 am

    cara pasang kode html dan javascript d blog kayak di atas caranya gimana bos…share dong ke email saya : redfoot3099@gmail.com…..
    d tunggu kunjungan baliknya yaaa di…

    http://infokomputer1001.wordpress.com/

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: