简单实用的jQuery左侧固定侧边栏插件

jquery-vertical-navigation是一款简单实用的jQuery左侧固定侧边栏插件。它可以制作多级子菜单，使用Font Awesome作为默认图标，通过简单的设置就可以生成一个漂亮的固定侧边栏菜单。

使用方法

使用该侧边栏插件需要引入jQuery，jquery.ssd-vertical-navigation.min.js文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.ssd-vertical-navigation.min.js"></script>                
              

HTML结构

该侧边栏菜单使用嵌套的无序列表作为菜单项和子菜单项。在菜单的外围，div.contentLeft是侧边栏的包裹容器。div.contentRight是正文内容。

<div id="contentWrapper">
  <div id="contentLeft">
    <ul id="leftNavigation">
      <li class="active"> <a href="#"><i class="fa fa-coffee leftNavIcon"></i> <a href="#">Menu</a> 1 </a>
        <ul>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 1.1 </a> </li>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 1.2 </a> </li>
        </ul>
      </li>
      <li> <a href="#"><i class="fa fa-flask leftNavIcon"></i> Menu 2 </a>
        <ul>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 2.1 </a> </li>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 2.2 </a> </li>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 2.3 </a> </li>
        </ul>
      </li>
      <li> <a href="#"><i class="fa fa-truck leftNavIcon"></i> Menu 3</a>
        <ul>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 3.1 </a> </li>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 3.2 </a> </li>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 3.3 </a> </li>
        </ul>
      </li>
      <li> <a href="#"><i class="fa fa-envelope-o leftNavIcon"></i> Menu 4 </a>
        <ul>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 4.1 </a> </li>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 4.2 </a> </li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="contentRight">
    Your main content goes here
  </div>
</div>    
              

CSS样式

为该侧边栏菜单添加下面的基本CSS样式。要做得更漂亮，你可以自定义这些样式。

#contentWrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
#contentLeft {
  z-index: 10;
  width: 250px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #283c51;
}
#contentRight {
  padding: 1.3rem 2rem;
  margin-left: 250px;
}
#leftNavigation {
  margin: 2rem 0;
}
#leftNavigation, #leftNavigation li ul {
  list-style: none;
  padding: 0;
}
#leftNavigation li a {
  font-size: 0.875rem;
  display: block;
  padding: 0.8rem 1rem 0.8rem 3rem;
  color: #adadad;
  border-bottom: solid 1px #395673;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
#leftNavigation li a, #leftNavigation li a .leftNavIcon {
  line-height: 120%;
}
#leftNavigation li a .leftNavIcon {
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  padding: 0.8rem 0;
  text-align: center;
}
#leftNavigation li a:hover {
  color: white;
}
#leftNavigation li ul {
  display: none;
  margin: 0;
  background-color: #17232f;
}
#leftNavigation li ul li a {
  border-bottom: solid 1px #233547;
}
#leftNavigation li ul li:last-child a {
  border-bottom: none;
}
#leftNavigation li ul li.active a {
  color: white;
}
#leftNavigation li.active > a {
  color: white;
}
#leftNavigation li.active ul {
  display: block;
}
#leftNavigation > li.active {
  background-color: #427c97;
}                
              

初始化插件

在页面DOM元素加载完毕之后，可以使用下面的方法来初始化该固定侧边栏插件。

$(function() {
    var verticalNavigation = new SSDSystem.VerticalNavigation();
    verticalNavigation.init();
});                
              

配置参数

• classMaster：自动添加到顶级ul元素上的class。默认值：'master'。
• classActive：添加到激活的菜单项li元素上的class。默认值：'active'。
• classClickable：添加到第一级li元素上的class。默认值：'clickable'。