The SideNav is fixed on the left of the window. The navigation menu of this document is a sideNav.
The toggle effect of the sub menu is initialized via event delegation inzui.js.
Use.z-nav-headon the items with a sub-navigation. Use.z-sub-navon the sub-navigation.
Add class.lv2on level2 navigations, and add class.lv3on level3 navigations.
You can replace the color classlightwithdarkordarkblueto create a sideNav with different color.
<div class="z-side-nav light">
<a href="./index.html" class="z-logo">Zero-UI</a>
<a href="./index.html#how-to-use" class="z-nav-item">How to Use</a>
<a href="./index.html#css-rule" class="z-nav-item">CSS Naming Rules</a>
<a href="./basic.html" class="z-nav-item">Basic Styles</a>
<a class="z-nav-head active">Components</a>
<div class="z-sub-nav">
<div class="z-nav-label lv2">Elements</div>
<a href="./button.html" class="z-nav-item lv3">Button</a>
<a href="./input.html" class="z-nav-item lv3">Input</a>
<a href="./radio_checkbox.html" class="z-nav-item lv3">Radio&Checkbox</a>
<a href="./switch.html" class="z-nav-item lv3">On-off</a>
<a href="./select.html" class="z-nav-item lv3">Select</a>
<a href="./datetimepicker.html" class="z-nav-item lv3">Datetimepicker</a>
<a href="./dropdown.html" class="z-nav-item lv3">Dropdown</a>
<div class="z-nav-label lv2">Layout</div>
<a href="./grid.html" class="z-nav-item lv3">Grid</a>
<a href="./form.html" class="z-nav-item lv3">Form</a>
<a href="./panel.html" class="z-nav-item lv3">Panel</a>
<div class="z-nav-label lv2">Data Display</div>
<a href="./tab.html" class="z-nav-item lv3">Tab</a>
<a href="./table.html" class="z-nav-item lv3">Table</a>
<a href="./pagination.html" class="z-nav-item lv3">Pagination</a>
<a href="./badge.html" class="z-nav-item lv3">Badge</a>
<a href="./process.html" class="z-nav-item lv3">Process</a>
<div class="z-nav-label lv2">Feedback</div>
<a href="./dialog.html" class="z-nav-item lv3">Dialog</a>
<a href="./message.html" class="z-nav-item lv3">Message</a>
<a href="./tooltip.html" class="z-nav-item lv3">Tooltip</a>
<a href="./pop_confirm.html" class="z-nav-item lv3">PopConfirm</a>
<a href="./loader.html" class="z-nav-item lv3">Loader</a>
<div class="z-nav-label lv2">Other</div>
<a href="./breadcrumb.html" class="z-nav-item lv3">Breadcrumb</a>
<a href="./side_nav.html" class="z-nav-item lv3 active">SideNav</a>
</div>
<a href="./index.html#i18n" class="z-nav-item">I18N</a>
</div>