nav.css

(sidebar)

static sidebar

The sidebar is based on the same nav.js as the navbars. The key difference of the sidebar is to:
- wrap the html inside a <ul> tag (instead of <nav>) and
- use <li> tags (instead of <a>) for the sidebar items.

The dropdown behavior is realized by adding addEventListener to the li elements that are inside a drop element.

The class sidebar is used to style the sidebar (see nav.css). The sidear is intended to call functions via onclick. The sidebar is not intended to be used for links. The sidebar is staticly defined in the html part. Here's an example:

Optionally you can add NAV_Sidebar_AddGenericClickFunction to proved a function that will be called when you click on any sidebar item. You need to provide the id of the sidebar as first parameter and the function as second parameter.

HTML

JS

JS OPTIONAL

CSS

dynamic sidebar

nav_AutoFillSidebar(targetID, data, clickfunction, {numbering = true, idPrefix = "", idPostfix = ""} = {})

The content of this sidebar is generated from data. The data is an array of objects (=list of dictionaries), where each object represents a sidebar item. Each item has the key 'name' and optionally the key 'children', which again can be a list of items, creating a dropdown.

As this dynamics sidebar is no longer defined in html, assigning functions to the sidebar items works differently. One function must provided as parameter to nav_AutoFillSidebar which will be called for all sidebar items when clicked. nav_AutoFillSidebar will link your function to the li elements using addEventListener.

As fourth parameter, you can provide an object with additional options.
numbering will add a number to the sidebar items.
idPrefix and idPostix will add a prefix to the id of the sidebar items. When no prefix and postfix is provided, the li elements will have no id.

Within your function, the clicked item can be identified and the appropriate action taken.

In the below example, the function foo will be called every time when you click on the first item of the sidebar changing the content of the sidebar. Inside foo (or the function you have defined) you have access to the event object, and such to the <li> respectivley.

HTML
JS

DATA Munich


{{id-end}}

{{very-end}}