MetisMenu : Jquery + CSS 实现可隐藏的二级侧边栏导航

首先请自行导入相关的文件，主要用到的是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;}}});

MetisMenu : Jquery + CSS 实现可隐藏的二级侧边栏导航相关推荐

HTML如何实现多级水平导航栏,jQuery+css实现的蓝色水平二级导航菜单效果代码
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格 ...
html二级页面内容滑动,jQuery+CSS实现的网页二级下滑菜单效果
本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款简洁型的 jQuery+CSS网页二级下滑菜单,练手写的,有需要的自己拿去美化吧,基本的动画效果 ...
css基础：样式之定位、样式之隐藏、二级菜单、多个列表转表格、图片精灵技术
<html lang="en"> <head> <meta charset="UTF-8"> <tit ...
css基础：样式之定位、样式之隐藏、二级菜单、多个列表转表格、图片精灵技术...
<html lang="en"> <head> <meta charset="UTF-8"> <tit ...
jQuery css()选择器使用说明
css选择器只是jquery中的一个功能罢了,下面我来给各位朋友详细介绍jQuery css()选择器使用方法与说明详解,有需要了解学习的同学可参考. CSS操作有一个重要的方法:CSS() CSS( ...
推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
300+Jquery, CSS, MooTools 和 JS的导航菜单资源
如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手.本文要为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以应用于自己的网站了. ...
jQuery css
jQuery css模块用于css属性的修改操作. jQuery.fn.css jQuery.fn.css = function( name, value ) {//又是用access来操作retur ...
jQuery学习-显示与隐藏
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>显示与 ...

MetisMenu : Jquery + CSS 实现可隐藏的二级侧边栏导航

效果图如下：

导航栏结构：

CSS代码：

JS代码：

MetisMenu : Jquery + CSS 实现可隐藏的二级侧边栏导航相关推荐

最新文章

热门文章