正文
js侧边菜单
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
目标
实现一个侧边栏菜单,最多二级,可以收起展开.用于系统左侧的主菜单.
大多数系统都会有这样的菜单,用于导航功能,切换到不同的操作页面.在单页应用系统中,菜单一般是固定在左侧,分组节点上配图标,高亮显示当前选中菜单.可以收起菜单组.
html
菜单容器nav,里面每个ul是一组菜单,每个sidemenu-title是菜单组的标题,可以加图标.
<nav class="sidemenu-box gray">
<ul class="sidemenu-group">
<li>
<a class="sidemenu-title">
<li class="sidemenu-icon fa fa-home"></li><span class="sidemenu-label">分组标题</span><i class="sidemenu-arrdown"></i>
</a>
</li>
<li><a class="sidemenu-item active">活动菜单项</a></li>
<li><a class="sidemenu-item">菜单项</a></li>
<li><a class="sidemenu-item">菜单项</a></li>
....
</ul>
...
</nav>
使用
// 实例化
$('#sidemenu1').sidemenu();
// 传一个参数{ <b>menuClick</b> : fn } 该函数参数在点击菜单后执行.
$('#sidemenu2').sidemenu({menuClick:function(menuJQ){alert('点击了菜单')}});
这个插件非常简单,仅实现了菜单的点击反色,收起展开功能
/**
* 侧边菜单
*/
$.fn.extend({
// let sidemenu = $('#sidemenu1').sidemenu(cfg);
// {menuClick:fn(菜单点击后事件)}
sidemenu: function (config)
{
let menuJQ = $(this);
// 菜单点击事件
menuJQ.find('.sidemenu-item').on('click', function ()
{
let clsN = 'active';
$(this).closest('.sidemenu-box').find('.sidemenu-item').removeClass(clsN);
$(this).addClass(clsN);
if (config && typeof config.menuClick == 'function')
{
config.menuClick($(this));
}
})
// 一级菜单收起与展开
menuJQ.find('.sidemenu-title').on('click', function ()
{
let showClsN = 'sidemenu-arrdown', hideClsN = 'sidemenu-arrleft';
let arrJQ = $(this).find('.' + showClsN + ',.' + hideClsN);
if (arrJQ.hasClass(showClsN))
{
arrJQ.addClass(hideClsN).removeClass(showClsN);
$(this).closest('.sidemenu-group').find('.sidemenu-item').hide();
} else
{
arrJQ.addClass(showClsN).removeClass(hideClsN);
$(this).closest('.sidemenu-group').find('.sidemenu-item').show();
}
})
}
})
sidemenu.js
.sidemenu-box {
background-color: #f8f9fa;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.sidemenu-group {
margin:;
padding:;
list-style: none; }
.sidemenu-item, .sidemenu-title {
display: block;
color: #6c757d;
cursor: pointer; }
.sidemenu-item:hover, .sidemenu-title:hover {
text-decoration: none;
color: #212529; }
.sidemenu-title {
padding: .8em; }
.sidemenu-label {
font-weight:; }
.sidemenu-arrleft, .sidemenu-arrdown {
float: right;
margin-top: .3em; }
.sidemenu-arrleft {
display: inline-block;
width:;
height:;
border: 0.5em solid transparent;
border-right-color: #6c757d; }
.sidemenu-arrdown {
display: inline-block;
width:;
height:;
border: 0.5em solid transparent;
border-top-color: #6c757d; }
.sidemenu-icon {
margin: 0 .4em 0 -.4em; }
.sidemenu-item {
padding: .4em 0 .4em 2.4em;
font-weight:;
color: #adb5bd; }
.sidemenu-item.active {
background-color: #007bff;
color: #fff; }
.sidemenu-box.gray .sidemenu-item.active {
background-color: #6c757d; }
.sidemenu-box.green .sidemenu-item.active {
background-color: #28a745; }
.sidemenu-box.red .sidemenu-item.active {
background-color: #dc3545; }
.sidemenu-box.yellow .sidemenu-item.active {
background-color: #ffc107; }
css
