一、效果展示
1、初始加載出來的效果

2、展開菜單（支持多級(jí)展開，后面代碼介紹）

3、點(diǎn)擊子菜單，以Tab頁的形式打開對(duì)應(yīng)的頁面

4、支持菜單折疊

5、打開的菜單過多時(shí)自動(dòng)換行顯示，折疊后自適應(yīng)

二、代碼示例
有現(xiàn)成的東西用很方便的，總的來說Bootstrap Ace模板的功能還是比較強(qiáng)大的，并且支持各種終端設(shè)備。本文主要使用的它的菜單的效果，下面就來看看Ace模板菜單效果的實(shí)現(xiàn)代碼。
1、菜單效果
由于Ace是基于Bootstrap的，所以首先需要引用jquery和bootstrap組件，先來總的看看它需要引用哪些文件吧?！　?br/>
<script src="/Scripts/jquery-1.9.1.min.js"></script>

<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<link href="/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="/Content/ace/css/ace-rtl.min.css" rel="stylesheet" />
<link href="/Content/ace/css/ace-skins.min.css" rel="stylesheet" />
<link href="/Content/sidebar-menu/sidebar-menu.css" rel="stylesheet"/>

<script src="/Content/ace/js/ace-extra.min.js"></script>
<script src="/Content/ace/js/ace.min.js"></script>

　 <script src="/Content/sidebar-menu/sidebar-menu.js"></script>