Navigation Tree
The navigation tree is the primary navigation mechanism for DocBrowser. It supports a heirarchial tree of links to documents.
The root of the navigation tree is the div#nav-tree
element. The element has
two data attributes:
-
data-autoexpanders
causes doc browser to automatically adds the css "expander" class to all contains nested divs. Without this you'll need to explicitly includeclass="expander"
on all contained div elements. -
data-key
is the key name used for session storage. If your site has multiple docbrowsers, each should have a unique key here.
<div id="nav-tree" data-autoexpanders data-key="docbrowser">
Within the div#nav-tree
element define the tree heirarchy. Each item in the
tree should be either a leaf node of the form:
<li><a href="file.html">My File</a></li>
or an expandable group of elements of the form:
<div>
<label>Text</label>
<ul>
[[Nest other items here]]
<ul>
</div>
Navigation Tree Filtering
DocBrowser allows the user to filter the navigation tree by typing in search field at the top of the navigation tree.
By default, the navigation tree filtered using the text of <a>
elements
in the tree. You can change the text used for an item's search
text, with a data-filter-text
attribute.
eg: this element will be included in the filtered tree results if the
user was to search for MyClass
(even though the displayed text is
"Constructors")
<a href="MyClass" data-filter-text="MyClass">Constructors</a>
Hiding the Navigation Tree
The navigation tree can be hidden by setting the nonav
class on body
element.
This can be handy for pages that require similar styling but don't have enough content to require the navigation tree.
<body class="nonav">
.
.
.
(NB: this also removes the button to show the navigation tree on narrow screens)