ace bootstrap后台框架-左侧菜单

最外围的样式.sidebar，将菜单浮动到左边，190px的宽度，银灰色的背景色。

.sidebar  {

1. width: 190px;
2. float: left;
3. position: relative;
4. border: 1px solid  #ccc ;
5. border-width: 0 1px 0 0;
6. background-color:  #f2f2f2 ;

}

ul菜单样式，使用.nav .nav-list，其中.nav是bootstrap原有样式,.nav-list为ace新增样式.

.nav  {

1. padding-left: 0;
2. margin-bottom: 0;
3. list-style: none;

}

.nav-list  {

1. margin: 0;
2. padding: 0;
3. list-style: none;

｝

有多级级菜单的菜单项，.dropdown-toggle要加到上级菜单的li下的第一个元素上

.arrow .icon-angle-down是下拉的图标

.submenu要加到二级菜单ul上。

对应的案例

<div class="sidebar" id="sidebar">
    <ul class="nav nav-list">
<li class="active">
<a href="index.html">
<i class="icon-dashboard"></i>
<span class="menu-text"> 控制台 </span>
</a>
</li>


<li>
<a href="#" class="dropdown-toggle">
<i class="icon-desktop"></i>
<span class="menu-text"> UI 组件 </span>


<b class="arrow icon-angle-down"></b>
</a>


<ul class="submenu">
<li>
<a href="elements.html">
<i class="icon-double-angle-right"></i>
组件
</a>
</li>


<li>
<a href="#" class="dropdown-toggle">
<i class="icon-double-angle-right"></i>


三级菜单
<b class="arrow icon-angle-down"></b>
</a>


<ul class="submenu">
<li>
<a href="#">
<i class="icon-leaf"></i>
第一级
</a>
</li>
</ul>
</li>
</ul>
</li>
                    </ul>
 </div>