摘要：
目标实现一个侧边栏菜单,最多二级,可以收起展开.用于系统左侧的主菜单.大多数系统都会有这样的菜单,用于导航功能,切换到不同的操作页面.在单页应用系统中,菜单一般是固定在左侧,分组节点上配图标,高亮显示当前选中菜单.可以收起菜单组.html菜单容器nav,里面每个ul是一组菜单,每个sidemenu-title是菜单组的标题,可以加图标.˂u
目标
实现一个侧边栏菜单,最多二级,可以收起展开.用于系统左侧的主菜单.
大多数系统都会有这样的菜单,用于导航功能,切换到不同的操作页面.在单页应用系统中,菜单一般是固定在左侧,分组节点上配图标,高亮显示当前选中菜单.可以收起菜单组.
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-box { background-color:#f8f9fa; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .sidemenu-group { margin:0; padding:0; 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:600; } .sidemenu-arrleft, .sidemenu-arrdown { float:right; margin-top:.3em; } .sidemenu-arrleft { display:inline-block; width:0; height:0; border:0.5em solid transparent; border-right-color:#6c757d; } .sidemenu-arrdown { display:inline-block; width:0; height:0; 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:500; 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; }