DocBrowser v0.9

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 include class="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:

        [[Nest other items here]]

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)

Subscribe for more like this. No spam, just fun tech stuff :)

Or, find me on Twitter: @toptensoftware.