ace admi 三 侧边栏

1.布局

用于侧边栏的默认HTML布局是：

1. 快捷按钮：可选
2. .nav-list：包含侧边栏项目
3. 展开/折叠按钮：可选

< 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 -->