How to Use CSS Naming Rules Basic Styles Components
Elements
Button Input Radio&Checkbox On-off Select Datetimepicker Dropdown
Layout
Grid Form
Data Display
Tab Table Pagination Badge Process
Feedback
Dialog Message Tooltip PopConfirm Loader
Other
Breadcrumb SideNav
I18N

SideNav

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>