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

巴特西

js侧边菜单

最新文章

热门文章