JDocs menu

by chrisjg

HTML

<link rel="stylesheet" href="http://developer.docs.joomla.org/css/bootstrap.css">
<link rel="stylesheet" href="http://developer.docs.joomla.org/css/app.css">
<script src="http:////cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css">
<div ng-controller="MenuController" id="menu" class="span3 well ng-scope">
	<!-- <span ng-bind-html-unsafe="menu | marked"></span> -->
	<span ng-bind-html-unsafe="treeJSONarray" class="ng-binding">
		<ul class="nav nav-list">
			<li><label class="
nav-header"><a title="Home" href="/joomla-developer-docs/#/en/home.md">Home</a></label></li>
			<li><label class="tree-toggler nav-header">CMS</label>
				<ul class="nav nav-list tree">
					<li><a title="extensions.md" href="/joomla-developer-docs/#/en/cms/extensions.md">extensions</a></li>
					<li><a title="platform.md" href="/joomla-developer-docs/#/en/cms/platform.md">platform</a></li>
					<li><label class="tree-toggler nav-header">PLATFORM</label>
						<ul class="nav nav-list tree">
							<li><a title="crypt.md" href="/joomla-developer-docs/#/en/cms/platform/crypt.md">crypt</a></li>
							<li><a title="data.md" href="/joomla-developer-docs/#/en/cms/platform/data.md">data</a></li>
							<li><a title="database.md" href="/joomla-developer-docs/#/en/cms/platform/database.md">database</a></li>
							<li><a title="date.md" href="/joomla-developer-docs/#/en/cms/platform/date.md">date</a></li>
							<li><a title="facebook.md" href="/joomla-developer-docs/#/en/cms/platform/facebook.md">facebook</a></li>
							<li><a title="feed.md" href="/joomla-developer-docs/#/en/cms/platform/feed.md">feed</a></li>
							<li><label class="tree-toggler nav-header">FORM</label>
								<ul class="nav nav-list tree">
									<li><a title="field-accesslevel.md"...

CSS

ul.tree{display:none}
label.tree-toggler:before {
    content: "+";
    padding-right: 5px;
    color: green;
    font-family: monospace;
    font-weight: bold;
    font-size: 1.1em;
}
label.tree-toggler.open:before {
    content: "-";
    color: red;
}

JavaScript

$(document).ready(function () {
	$('label.tree-toggler').click(function () {
		$(this).parent().children('ul.tree').toggle(300);
        $(this).toggleClass('open');
	});
});