EasyTree is a JavaScript Menu handling mechanism that is concise but easy to configure. It has a comprehensive set of options that can be tweaked according to the complexity of the requirement: anything from a basic tree menu to being able to handle the firing of events to the dragging and dropping of tree elements.
You can download the set of EasyTree themes and core JavaScript files from here:
http://www.easyjstree.com/EasyTree.zip
However in my simple example I just link to the EasyTree web site when setting the href attributes, scripts etc.
Example html showing a basic tree menu as shown:
easyjstree.html
<doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EasyTree - Free jquery tree menu</title>
<meta name="keywords" content="EasyTree free jquery tree menu js javascript" />
<meta name="description" content="EasyTree, free jquery tree menu" />
<link href="http://www.easyjstree.com/content/style.css" rel="stylesheet" type="text/css" />
<link href="http://www.easyjstree.com/content/skin-win8/ui.easytree.css" rel="stylesheet" class="skins" type="text/css" />
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="http://www.easyjstree.com/bundles/jquery?v=5r0dFjH__tJcUIAQyQUG4tMptq0H5PoqgaCRzuzpfIs1"></script>
<script src="http://www.easyjstree.com/Scripts/jquery.easytree.min.js"></script>
</head>
<body>
<h5>Demo 1, created from an html list</h5>
<div id="demo1_menu">
<ul>
<li><a href="http://www.easyjstree.com" target="_blank">Home</a></li>
<li class="isFolder isExpanded" title="Bookmarks">
Folder 1
<ul>
<li><a href="http://www.google.com" target="_blank">Go to Google.com</a></li>
<li><a href="http://www.yahoo.com" target="_blank">Go to Yahoo.com</a></li>
</ul>
</li>
<li>
Node 1
<ul>
<li>Sub Node 1</li>
<li>Sub Node 2</li>
<li>Sub Node 3</li>
</ul>
</li>
<li>Node 2</li>
</ul>
</div>
<script>
$('#demo1_menu').easytree();
</script>
(function ($) {
function init() {
$('.easy-tree').EasyTree({
addable: true,
editable: true,
deletable: true
});
}
window.onload = init();
})(jQuery)
</script>
</body>
</html>
Opening the html file in the web browser shows the EasyTree menu items as shown:
