1.布局
用于侧边栏的默认HTML布局是:
- 快捷按钮:可选
- .nav-list:包含侧边栏项目
- 展开/折叠按钮:可选
< div class = “ sidebar responsive ” id = “ sidebar ” > < div class = “ sidebar-shortcuts ” id = “ sidebar-shortcuts ” > ... < / div > < ul class = “ nav nav-list ” > ... < / ul > < div class = “ sidebar-toggle sidebar-collapse ” > ... < / div > < / div > <! - /.sidebar - >
2.菜单项
一级菜单如下
<li> <a href="#"> <i class="menu-icon fa fa-leaf"></i> <span class="menu-text"> Item text </span> <b class="arrow fa fa-angle-down"></b> <!-- arrow down icon if there's a submenu --> </a> <b class="arrow"></b> <!-- optional arrow for minimized menu & hover submenu --> <ul class="submenu"> .... </ul> </li>图标应该有
.menu-icon class
。
一级菜单项的文本应该位于
.menu-text
元素内部,但深层次不需要:
<!-- first level item --> <li> <a href="#"> <i class="menu-icon fa fa-caret-right"></i> <span class="menu-text">level 2 item text</span> <b class="arrow fa fa-angle-down"></b> </a> </li> <!-- second level item --> <li> <a href="#"> <i class="menu-icon fa fa-caret-right"></i> level 2 item text <b class="arrow fa fa-angle-down"></b> </a> </li>
4.最小化按钮
<div class="sidebar responsive" id="sidebar"> . . . <div id="sidebar-collapse" class="sidebar-toggle sidebar-collapse"> <i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i> </div> </div><!-- /.sidebar -->