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

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

3、點擊子菜單，以Tab頁的形式打開對應的頁面

4、支持菜單折疊

5、打開的菜單過多時自動換行顯示，折疊后自適應

二、代碼示例
有現(xiàn)成的東西用很方便的，總的來說Bootstrap Ace模板的功能還是比較強大的，并且支持各種終端設備。本文主要使用的它的菜單的效果，下面就來看看Ace模板菜單效果的實現(xiàn)代碼。
1、菜單效果
由于Ace是基于Bootstrap的，所以首先需要引用jquery和bootstrap組件，先來總的看看它需要引用哪些文件吧。　　

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