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-autoexpanderscauses doc browser to automatically adds the css "expander" class to all contains nested divs. Without this you'll need to explicitly include
class="expander"on all contained div elements.
data-keyis 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">
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
in the tree. You can change the text used for an item's search
text, with a
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
<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
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)