I took one example from one of my PHP Projects. The result of this Jquery plug-in is as follows:
As show above, I used the Treeview to build the side menus. When [+] is click, it will expand the sub menus as you can see at the Penyelenggaraan menu. This menu has three sub menus that are Profil, Tukar Katalaluan and Logout.
So now how I do it? It is actually rather simple, what need to do is to download the Jquery plug-in from http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ . I used only the following files and images folder from the plug-ins that being downloaded.
- jquery.treeview.css
- screen.css
- jquery.js
- jquery.treeview.js
- jquery.cookie.js
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>MENU</title>
<base target="main">
<link rel="stylesheet" href="js/jquery.treeview.css" />
<link rel="stylesheet" href="js/screen.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.treeview.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
</head>
<body>
<?php
echo "<font size=\"2\" face=\"Book Antiqua\">";
printf("Tarikh \n");
echo date("d-m-Y");
echo "<br>";
printf("Masa \n");
echo date("g:i A\n");
echo "</font><br><br>";
?>
<ul id="navigation">
<li><a href="?1">MENU</a>
<ul>
<li><?php
echo "<a href=\"javascript:top.parent.document.location.reload();\">";
?>
Muka Depan</a>
</li>
<li><?php
echo "<a href=\"askg.php?npelajar=".urlencode($nama4)."&idpelajar=".urlencode($nama5)."&idpelajar=".urlencode($nama6)."&kelaspelajar=".urlencode($nama5)."\">";
?>
Tanya Guru</a>
</li>
<li>
<?php
echo "<a href=\"askgxx.php?npelajar=".urlencode($nama4)."&idpelajar=".urlencode($nama5)."&idpelajar=".urlencode($nama6)."&kelaspelajar=".urlencode($nama5)."\">";
?>
Hantar Pesanan ke Pelajar Lain</a>
</li>
<li>
<?php
echo "<a href=\"http://www.smkagamainanam.edu.my/semaiweb/forum\">";
?>
Forum SEMAI</a>
</li>
</ul>
</li>
<li><a href="?2">PENYELENGGARAAN</a>
<ul>
<li><?php
echo "<a href=\"update.php?nama6=".urlencode($nama4)."&nama7=".urlencode($nama5)."\">";
?>
Profil</a>
</li>
<li>
<?php
echo "<a href=\"tukar.php?nama6=".urlencode($nama4)."&nama7=".urlencode($nama5)."\">";
?>
Tukar Katalaluan</a>
</li>
<li>
<?php echo "<a target=\"_top\" href=\"out.php\">Logout</a>"; ?>
</li>
</ul>
</li>
</body>
</html>
