顶部导航对应侧边栏菜单切换

关于切换这个问题，已经在插件整合项目和演示网站上有了。详细大家可以去查看。

1、先将原有的侧边栏菜单拆分，这里将其分为三份，每一份就是一个 ul，这里的 id 分别为 menus-1，menus-2，menus-3。

代码中 id="menus-*" ，叫什么自己定义即可，ul 上的 class 加上 collapse 隐藏，第一个不用。

<nav class="sidebar-main">

  <ul class="nav-drawer" id="menus-1">
    <li class="nav-item active">
      <a class="multitabs" href="lyear_main.html" id="default-page">
        <i class="mdi mdi-home-city-outline"></i>
        <span>后台首页</span>
      </a>
    </li>
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)">
        <i class="mdi mdi-television-guide"></i>
        <span>布局示例</span>
      </a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_layout_form.html">表单布局示例</a> </li>
        <li> <a class="multitabs" href="lyear_layout_chat.html">聊天页面示例</a> </li>
        <li> <a class="multitabs" href="lyear_layout_logo_text.html">logo处使用文字</a> </li>
        <li> <a class="multitabs" href="lyear_layout_modal_tab.html">模态框中使用Tab标签页</a> </li>
        <li> <a class="multitabs" href="lyear_layout_modal_maximize.html">模态框最大化</a> </li>
        <li> <a class="multitabs" href="lyear_layout_search_1.html">搜索布局</a> </li>
        <li> <a class="multitabs" href="lyear_layout_search_2.html">搜索布局2</a> </li>
        <li> <a class="multitabs" href="lyear_layout_search_3.html">搜索布局3</a> </li>
        <li> <a class="multitabs" href="lyear_layout_chose_1.html">选择示例</a> </li>
        <li> <a class="multitabs" href="lyear_layout_chose_2.html">选择示例2</a> </li>
        <li> <a class="multitabs" href="lyear_layout_chose_3.html">选择示例3</a> </li>
        <li> <a class="multitabs" href="lyear_layout_chose_4.html">选择示例4</a> </li>
        <li> <a class="multitabs" href="lyear_layout_code.html">代码演示切换</a> </li>
        <li> <a class="multitabs" href="lyear_layout_message.html">留言列表布局</a> </li>
        <li> <a class="multitabs" href="lyear_layout_widgets_1.html">可用的布局(数据统计篇)</a> </li>
        <li> <a class="multitabs" href="lyear_layout_widgets_2.html">可用的布局(产品价格篇)</a> </li>
        <li> <a class="multitabs" href="lyear_layout_widgets_3.html">可用的布局(搜索框篇)</a> </li>
        <li> <a class="multitabs" href="lyear_layout_widgets_4.html">可用的布局(用户篇)</a> </li>
        <li> <a class="multitabs" href="lyear_layout_widgets_5.html">可用的布局(动画篇)</a> </li>
        <li> <a class="multitabs" href="lyear_layout_widgets_6.html">可用的布局(其他篇)</a> </li>
        <li> <a class="multitabs" href="lyear_layout_other_side.html">另一种侧边栏菜单</a> </li>
        <li> <a href="lyear_layout_header_sider.html" target="_blank">顶部和左侧联动</a> </li>
      </ul>
    </li>
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)">
        <i class="mdi mdi-file-code-outline"></i>
        <span>时间插件</span>
      </a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_js_daterangepicker.html">时间段选择器</a> </li>
        <li> <a class="multitabs" href="lyear_js_material_datetimepicker.html">Material Datetimepicker</a> </li>
      </ul>
    </li>
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)">
        <i class="mdi mdi-file-code-outline"></i>
        <span>上传插件</span>
      </a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_js_dropzone.html">dropzone插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_uploadify.html">uploadify插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_webuploader.html">webuploader插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_cropper.html">cropper图片裁剪</a> </li>
        <li> <a class="multitabs" href="lyear_js_h5_uploader.html">FormData上传</a> </li>
        <li> <a class="multitabs" href="lyear_js_webuploader_attachment.html">webuploader(附件)</a> </li>
        <li> <a class="multitabs" href="lyear_js_webuploader_images.html">webuploader(图片)</a> </li>
      </ul>
    </li>
  </ul>
  <ul class="nav-drawer collapse" id="menus-2">
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)">
        <i class="mdi mdi-file-code-outline"></i>
        <span>HTML编辑器插件</span>
      </a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_js_ckeditor.html">ckeditor</a> </li>
        <li> <a class="multitabs" href="lyear_js_editormd.html">editormd</a> </li>
        <li> <a class="multitabs" href="lyear_js_summernote.html">summernote</a> </li>
        <li> <a class="multitabs" href="lyear_js_tinymce.html">tinymce</a> </li>
        <li> <a class="multitabs" href="lyear_js_ueditor.html">ueditor</a> </li>
        <li> <a class="multitabs" href="lyear_js_wangeditor.html">wangeditor</a> </li>
      </ul>
    </li>
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)">
        <i class="mdi mdi-file-code-outline"></i>
        <span>表单验证</span>
      </a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_js_jquery_validate.html">jquery validate</a> </li>
        <li> <a class="multitabs" href="lyear_js_bootstrap_validate.html">bootstrap validate</a> </li>
        <li> <a class="multitabs" href="lyear_js_validate.html">联动插件的验证</a> </li>
      </ul>
    </li>
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)">
        <i class="mdi mdi-file-code-outline"></i>
        <span>下拉列表插件</span>
      </a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_js_bootstrap_selectN.html">联动插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_bootstrap_lyear_select.html">简单下拉插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_select2.html">select2下拉插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_dropdowntree.html">下拉树状菜单</a> </li>
      </ul>
    </li>
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)">
        <i class="mdi mdi-file-code-outline"></i>
        <span>树状插件</span>
      </a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_js_ztree.html">ZTree树形菜单插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_treeview.html">treeview树状插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_jstree.html">树状结构插件</a> </li>
      </ul>
    </li>
  </ul>
  <ul class="nav-drawer collapse" id="menus-3">
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)">
        <i class="mdi mdi-file-code-outline"></i>
        <span>滑块验证插件</span>
      </a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_js_img_verification.html">拼图滑块插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_slider_verification.html">滑块验证</a> </li>
      </ul>
    </li>
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)">
        <i class="mdi mdi-file-code-outline"></i>
        <span>弹窗插件</span>
      </a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_js_layer.html">layer弹窗插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_sweet.html">sweet弹窗插件</a> </li>
      </ul>
    </li>
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)">
        <i class="mdi mdi-file-code-outline"></i>
        <span>其他插件</span>
      </a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_js_touchspin.html">输入微调器组件</a> </li>
        <li> <a class="multitabs" href="lyear_js_toolbar.html">弹出式工具栏</a> </li>
        <li> <a class="multitabs" href="lyear_js_auto_complete.html">自动完成插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_fixedheadertable.html">固定表头插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_fontIconPicker.html">图标选择插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_jquery_raty.html">评分插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_range_slider.html">滑块插件</a> </li>
      </ul>
    </li>
  </ul>

</nav>

2、其次，添加顶部导航，这里放到 navbar-left 里面。

<div class="dropdown">
  <span class="header-icon-menu" data-bs-toggle="dropdown"><i class="mdi mdi-apps"></i></span>
  <ul class="lyear-topbar dropdown-menu">
    <li class="dropdown-item"><a class="nav-link active" href="javascript:void(0)" data-menuid="1">默认</a></li>
    <li class="dropdown-item"><a class="nav-link" href="javascript:void(0)" data-menuid="2">菜单一</a></li>
    <li class="dropdown-item"><a class="nav-link" href="javascript:void(0)" data-menuid="3">菜单二</a></li>
  </ul>
</div>

这里需要增加几行样式

.lyear-topbar {
    margin: 0px;
    padding: 0px;
}
.lyear-topbar .nav-link {
    padding: 0 1rem;
    line-height: 30px;
    color: var(--bs-body-color);
}
.lyear-topbar .nav-link:hover,
.lyear-topbar .nav-link.active {
    color: var(--bs-primary)
}

@media screen and (max-width: 980px) {
    .header-icon-menu {
        display: block;
        height: 68px;
        line-height: 68px;
        font-size: 1.5em;
        cursor: pointer;
        padding: 0 12px;
        text-align: center;
    }
    .navbar-left .lyear-topbar li {
        float: none;
    }
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a,
    [data-theme*='dark'] .navbar-left .lyear-topbar a {
        color: rgba(255, 255, 255, .75);
    }
    [data-theme*='translucent-'] .lyear-topbar .nav-link.active,
    [data-theme*='dark'] .lyear-topbar .nav-link.active {
        color: #fff;
    }
}
@media (min-width: 980px) {
    .header-icon-menu {
        display: none;
    }
    .navbar-left .lyear-topbar {
        display: block;
        position: inherit;
        top: 0px;
        box-shadow: none;
        background-color: transparent;
        padding: 0px;
        margin: 0px;
    }
    .navbar-left .lyear-topbar .dropdown-item {
        display: inline-block;
        width: auto;
        padding: 0px;
    }
    .navbar-left .lyear-topbar .dropdown-item.active,
    .navbar-left .lyear-topbar .dropdown-item:active {
        background-color: transparent;
    }
    .navbar-left .lyear-topbar .dropdown-item:hover,
    .navbar-left .lyear-topbar .dropdown-item:focus {
        background-color: transparent;
    }
    [data-headerbg*='color_'] .navbar-left .lyear-topbar a.nav-link,
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a.nav-link,
    [data-theme*='dark'] .navbar-left .lyear-topbar a.nav-link {
        color: rgba(255, 255, 255, .75);
    }
    [data-headerbg*='color_'] .navbar-left .lyear-topbar a:focus,
    [data-headerbg*='color_'] .navbar-left .lyear-topbar a:hover,
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a:focus,
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a:hover,
    [data-theme*='dark'] .navbar-left .lyear-topbar a:focus,
    [data-theme*='dark'] .navbar-left .lyear-topbar a:hover {
        color: #fff;
    }
    [data-headerbg*='color_'] .navbar-left .lyear-topbar a.active,
    [data-headerbg*='color_'] .navbar-left .lyear-topbar a.active:focus,
    [data-headerbg*='color_'] .navbar-left .lyear-topbar a.active:hover,
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a.active,
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a.active:focus,
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a.active:hover,
    [data-theme*='dark'] .navbar-left .lyear-topbar a.active,
    [data-theme*='dark'] .navbar-left .lyear-topbar a.active:focus,
    [data-theme*='dark'] .navbar-left .lyear-topbar a.active:hover {
        color: #fff;
    }
    [data-theme*='translucent-'] .navbar-left .lyear-topbar,
    [data-theme*='dark'] .navbar-left .lyear-topbar {
        background-image: none;
    }
}

3、最后针对顶部菜单绑定 click 事件。

$(document).on('click', '.lyear-topbar .nav-link', function () {
    var $this = $(this),
        $menuid = $this.data('menuid');
    $('.sidebar-main .nav-drawer').slideUp('slow');
    $('#menus-' + $menuid).slideDown('slow');
    $this.parents('ul.lyear-topbar').find('a.nav-link').removeClass('active');
    $this.addClass('active');
    $('.lyear-layout-sidebar-scroll').animate({scrollTop: 0}, 300);  // 处理滚动条到最上方
});

4、找到 js\bootstrap-multitabs\multitabs.js 新增一段代码（大概588行）：

            $('.nav-drawer').find('li').removeClass('active');
            $navObj.parent('li').addClass('active');
            $navHasSubnav.addClass('active');

// 以下是新增代码，别复制错了
            var $thisDrawer   = $navHasSubnav.parent('.nav-drawer'),
                $thisDrawerId = $thisDrawer.attr('id'),
                $thisIdArr    = $thisDrawerId.split('-');
            $.each($('.nav-drawer'), function (i, v) {
                var $thisUl = $(v);
                if ($thisUl.attr('id') == $thisDrawerId) {
                    $thisDrawer.stop(true, true).show();
                } else {
                    $thisUl.slideUp('500');
                    //console.log('===', $('.nav-drawer'))
                }
            });
            $.each($('.lyear-topbar li'), function (inx, ve) {
                var $thisLink = $(ve).find('a');
                $thisLink.removeClass('active');
                if ($thisLink.data('menuid') == $thisIdArr[1]) {
                    $thisLink.addClass('active');
                }
            });
// 以上是新增代码，别复制错了

            // 当前菜单无子菜单
            if (!$navObj.parents('.nav-item').first().is('.nav-item-has-subnav')) {
                var hht = 48 * ( $navObj.parents('.nav-item').first().prevAll().length - 1 );
                $('.lyear-layout-sidebar-info').animate({scrollTop: hht}, 300);
            }

// 另外还要注意这里的一句代码（复制了上面的代码后是618行），增加了一个stop(false, true)
            var $sideDownObj = $navObj.parents('ul.nav-subnav').stop(false, true).filter(':hidden');

如果你的实际应用中引入的是 multitabs.min.js 文件，那么请在修改后，重新压缩代码到该文件中。

演示效果：