页面的head部分，需要引入4个CSS样式文件，然后设置好侧边栏的显示样式，代码如下：

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="css/sidebar-menu.css">
<style type="text/css">
.main-sidebar{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-height: 100%;
    width: 230px;
    z-index: 810;
    background-color: #222d32;
 }
</style>

页面的body部分，需要根据菜单的层级设置好菜单对应的容器，代码如下：

<aside class="main-sidebar">
<section  class="sidebar">
    <ul class="sidebar-menu">
      <li class="header">导航菜单</li>
      <li class="treeview">
        <a href="#">
          <i class="fa fa-files-o"></i>
          <span>界面选项</span>
          <span class="label label-primary pull-right">4</span>
        </a>
        <ul class="treeview-menu" style="display: none;">
          <li><a href="#"><i class="fa fa-circle-o"></i> 置顶</a></li>
          <li><a href="#"><i class="fa fa-circle-o"></i> 盒子</a></li>
          <li><a href="#"><i class="fa fa-circle-o"></i> 固定</a></li>
          <li class=""><a href="#"><i class="fa fa-circle-o"></i> 折叠</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-th"></i> <span>窗口小部件</span>
          <small class="label pull-right label-info">新</small>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-calendar"></i> <span>日历</span>
          <small class="label pull-right label-danger">3</small>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-envelope"></i> <span>邮箱</span>
          <small class="label pull-right label-warning">12</small>
        </a>
      </li>
      <li class="treeview">
        <a href="#">
          <i class="fa fa-share"></i> <span>多级</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="treeview-menu">
          <li><a href="#"><i class="fa fa-circle-o"></i> 一级菜单1</a></li>
          <li>
            <a href="#"><i class="fa fa-circle-o"></i> 一级菜单2 <i class="fa fa-angle-left pull-right"></i></a>
            <ul class="treeview-menu">
              <li><a href="#"><i class="fa fa-circle-o"></i> 二级菜单1</a></li>
              <li>
                <a href="#"><i class="fa fa-circle-o"></i> 二级菜单2 <i class="fa fa-angle-left pull-right"></i></a>
                <ul class="treeview-menu">
                  <li><a href="#"><i class="fa fa-circle-o"></i> 三级菜单1</a></li>
                  <li><a href="#"><i class="fa fa-circle-o"></i> 三级菜单2</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#"><i class="fa fa-circle-o"></i> 一级菜单3</a></li>
        </ul>
      </li>
      <li><a href="#"><i class="fa fa-book"></i> <span>文档</span></a></li>
      <li class="header">标签</li>
      <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>重要</span></a></li>
      <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>警示</span></a></li>
      <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>提示</span></a></li>
    </ul>
  </section>
 </aside>
<div class="htmleaf-container">
	<header class="htmleaf-header">
		<h1>精美的多级侧边栏导航菜单<span>菜单图标可以自由设置</span></h1>
	</header>
</div>

页面的底部，需要引入jQuery库和JS插件，并启用插件，代码如下：

<script src="js/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="js/sidebar-menu.js"></script>
<script>
	$.sidebarMenu($('.sidebar-menu'));
</script>