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-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; }