首先请自行导入相关的文件，主要用到的是MetisMenu。
效果图如下：
导航栏结构：
<span id="leftpane-toggle" class="glyphicon glyphicon-align-justify"></span><ul id="left-sider-menu" class="left-sider"><li><a href="#"><%= content_tag(:i, "", :class => "fa fa-dashboard fa-fw") %>Overview</a></li><li><a href="#"><i class="fa fa-table fa-fw"></i> A<span class="fa arrow"></span></a><ul class="left-sider nav-second-level"><li><a href="/test/a"> a </a></li></ul></li><li><a><i class="fa fa-users fa-fw"></i> B<span class="fa arrow"></span></a><ul class="left-sider nav-second-level"><li><a href="/test/b"> b </a></li></ul></li><li><a href="/test/c"><%= content_tag(:i, "", :class => "fa fa-cloud-download") %><span style="margin-left:4px;"> C</span></a></li><li><a href="#"><i class="fa fa-table fa-fw"></i> D <span class="fa arrow"></span></a><ul class="left-sider nav-second-level"><li class="left-sider nav-second-level"><a href="/test/d1"> d1 </a></li><li><a href="/test/d2"> d2</a></li><li><a href="/test/d3"> d3 </a></li><li><a href="/test/d4"> d4</a></li><li><a href="/test/d5"> d5 </a></li></li></ul>
CSS代码：
$grey: #F8F8F8;$dark-grey: #EEEEEE;$transparent-grey: #EEEEEE;$grey-blue: #428BCA;$white: #FFFFFF;$black: #333333;.navbar {margin: 0;background:$grey;}#main {background: $white;height: 100%;position: relative;margin-top:0;&.toggle {#leftpane {left: -230px;}#content { margin-left: 0; }}}#leftpane {background: $grey;height: 100%;left: 0;overflow-x: hidden;padding-top: 45px;position: absolute;top: 0;// transition: .5s;width: 275px;z-index: 1;ul {list-style: none;padding: 0;}}.left-sider {background-color: $grey;li{border-color:$dark-grey;border-width:1px;border-top-style: solid;}a {color: $grey-blue;display: block;font-size: 14px;padding: 10px 10px 10px 24px;text-decoration: none;transition: .3s;}a:hover {background-color: $transparent-grey;} }.left-sider .nav-second-level {background-color: $grey; li{border-color:$dark-grey;border-width:1px;//border-bottom-style: solid;}a {color: $grey-blue;display: block;font-size: 13px;padding: 10px 10px 10px 44px;text-decoration: none;transition: .3s;}a:hover {background-color: $transparent-grey;}}#leftpane-toggle {color: $grey-blue;font-size: 16px;left: 240px;position: absolute;top: 15px;}#content {min-height: 600px;margin-top: 0px;margin-left: 250px;margin-right: 5px;padding: 1px 40px 1px 80px;// transition: margin-left .5s;}.left-sider .arrow {float: right;}.left-sider .fa.arrow:before {content: "\f104";}.left-sider .active > a > .fa.arrow:before {content: "\f107";}.left-sider li.active {background-color: $grey;}.left-sider .nav-second-level li.active {background-color: $transparent-grey;}
JS代码：
$(document).ready(function () {$('#leftpane-toggle').on('click', function(e) {e.preventDefault();$('#main').toggleClass('toggle');$('.navbar-brand').toggleClass('toggle');if (sessionStorage.getItem('isToggled') == 'true') {sessionStorage.setItem('isToggled', 'false');} else {sessionStorage.setItem('isToggled', 'true');$('.navbar-brand').addClass('toggle');}});$('#left-sider-menu').metisMenu();$( ".left-sider .nav-second-level li" ).click(function(){//$(".left-sider li").removeClass("active");$(".left-sider .nav-second-level li").removeClass("active");$(this).addClass("active");});var window_url = window.location.toString();var temp = window_url.split("//",2)[1];var url = "/" + temp.split("/",2)[1];$('.left-sider li a').filter(function() {return $(this).attr("href") == url;}).parent().addClass('active');var element = $('.left-sider .nav-second-level li a').filter(function() {return $(this).attr("href") == url;}).parent().addClass('active');var window_url = window.location.toString();var temp = window_url.split("//",2)[1];var url = "/" + temp.split("/",2)[1];$('.left-sider li a').filter(function() {return $(this).attr("href") == url;}).parent().addClass('active');var element = $('.left-sider .nav-second-level li a').filter(function() {return $(this).attr("href") == url;}).parent().addClass('active');while (true) {if (element.is('li')) {element = element.parent().addClass('in');element = element.parent().addClass('active');} else {break;}}});
