Membuat Menu Tree dengan JQuery

mSaya 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

[sourcecode language="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 –>
[/sourcecode]

style.css

[sourcecode language="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;
}
[/sourcecode]

jMenu.js

[sourcecode language="javascript"]
$(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 ) );
});
});
[/sourcecode]

menu tree - manguri