Sidebar


Home for the things that navbar can't handle.

1. Complete Sidebar

Class sidebar is required for all types of Sidebar.

When the page is loaded, class sidebar-open is used to default the sidebar to be open unless toggled. Without the toggle, it will make the sidebar a fixed open sidebar.

Removing this makes the defalt behaviour of sidebar to be hidden unless toggled.

Toggling can be done easily by adding onclick="sidebar_toggle()" to your toggle button.

Class sidebar-section helps Fosterio to understand and style different sections of the sidebar. It is the most prominent in Partial Sidebar.

Class title is a generic class and when used anywhere, will give a Titled font.

Class sidebar-element is a special class and is like what List items (li) is for Unordered List(ul). The link text in the sidebar should be inside a span for proper styling.

2. Partial Sidebar

Partial Sidebar looks and behaves exactly like Complete Sidebar on a mobile.

When the page is loaded, class sidebar-partial is used to default the sidebar to be partially open unless toggled. Without the toggle, it will make the sidebar a fixed partial sidebar.

Removing this makes the defalt behaviour of sidebar to be hidden unless toggled.

Toggling can be done easily by adding onclick="sidebar_toggle('partial')" to your toggle button. Dont forget to pass 'partial' as an argument to the function. This tell the toggle not to close entirely instead make it a partial sidebar.

Class sidebar-section helps Fosterio to understand and style different sections of the sidebar. It is the most prominent in Partial Sidebar.

Class title is a generic class and when used anywhere, will give a Titled font.

Class sidebar-element is a special class and is like what List items (li) is for Unordered List(ul). The link text in the sidebar should be inside a span for proper styling.

3. Hybrid Sidebar

Click the Toggle Button

It starts being a Complete Sidebar then after toggling it once it becomes a Partial Sidebar.

The only difference between Hybrid Sidebar and Partial Sidebar is that, Hybrid Sidebar does not have class sidebar-partial.

The only difference between Hybrid Sidebar and Complete Sidebar is that, Hybrid Sidebar passes 'partial' as a parameter to the function onclick="sidebar_toggle('partial')".