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

有小伙伴提到了在顶部导航增加几个导航，点击导航左侧显示对应的菜单，普通版本可以增加url的参数，根据参数输出不同的左侧菜单，这里就不细说，主要说一下iframe版本的大概写法。

其实也改动不大，并不难，这里主要讲v3。(v4拉倒最下面看演示示例)

1、首先，把左侧菜单处理下，以模板项目里面的菜单为例，这里把它拆成三份。如下：

<nav class="sidebar-main">
  <ul class="nav nav-drawer" id="menus-1"> <!--默认菜单内容-->
    <li class="nav-item active"> <a class="multitabs" href="lyear_main.html"><i class="mdi mdi-home"></i> <span>后台首页</span></a> </li>
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)"><i class="mdi mdi-palette"></i> <span>UI 元素</span></a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_ui_buttons.html">按钮</a> </li>
        <li> <a class="multitabs" href="lyear_ui_cards.html">卡片</a> </li>
        <li> <a class="multitabs" href="lyear_ui_grid.html">格栅</a> </li>
        <li> <a class="multitabs" href="lyear_ui_icons.html">图标</a> </li>
        <li> <a class="multitabs" href="lyear_ui_tables.html">表格</a> </li>
        <li> <a class="multitabs" href="lyear_ui_modals.html">模态框</a> </li>
        <li> <a class="multitabs" href="lyear_ui_tooltips_popover.html">提示 / 弹出框</a> </li>
        <li> <a class="multitabs" href="lyear_ui_alerts.html">警告框</a> </li>
        <li> <a class="multitabs" href="lyear_ui_pagination.html">分页</a> </li>
        <li> <a class="multitabs" href="lyear_ui_progress.html">进度条</a> </li>
        <li> <a class="multitabs" href="lyear_ui_tabs.html">标签页</a> </li>
        <li> <a class="multitabs" href="lyear_ui_typography.html">排版</a> </li>
        <li> <a class="multitabs" href="lyear_ui_step.html">步骤</a> </li>
        <li> <a class="multitabs" href="lyear_ui_other.html">其他</a> </li>
      </ul>
    </li>
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> <span>表单</span></a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_forms_elements.html">基本元素</a> </li>
        <li> <a class="multitabs" href="lyear_forms_radio.html">单选框</a> </li>
        <li> <a class="multitabs" href="lyear_forms_checkbox.html">复选框</a> </li>
        <li> <a class="multitabs" href="lyear_forms_switch.html">开关</a> </li>
      </ul>
    </li>
  </ul>
  <ul class="nav nav-drawer collapse" id="menus-2"> <!--第三个菜单内容-->
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i> <span>示例页面</span></a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_pages_doc.html">文档列表</a> </li>
        <li> <a class="multitabs" href="lyear_pages_gallery.html">图库列表</a> </li>
        <li> <a class="multitabs" href="lyear_pages_config.html">网站配置</a> </li>
        <li> <a class="multitabs" href="lyear_pages_rabc.html">设置权限</a> </li>
        <li> <a class="multitabs" href="lyear_pages_add_doc.html">新增文档</a> </li>
        <li> <a class="multitabs" href="lyear_pages_guide.html">表单向导</a> </li>
        <li> <a class="multitabs" href="lyear_pages_data_table.html">表格插件</a> </li>
        <li> <a href="lyear_pages_login.html" target="_blank">登录页面</a> </li>
        <li> <a href="lyear_pages_error.html" target="_blank">错误页面</a> </li>
      </ul>
    </li>
  </ul>
  <ul class="nav nav-drawer collapse" id="menus-3"> <!--第三个菜单内容-->
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i> <span>JS 插件</span></a>
      <ul class="nav nav-subnav">
        <li> <a class="multitabs" href="lyear_js_datepicker.html">日期选取器</a> </li>
        <li> <a class="multitabs" href="lyear_js_sliders.html">滑块</a> </li>
        <li> <a class="multitabs" href="lyear_js_colorpicker.html">选色器</a> </li>
        <li> <a class="multitabs" href="lyear_js_chartjs.html">Chart.js</a> </li>
        <li> <a class="multitabs" href="lyear_js_jconfirm.html">对话框</a> </li>
        <li> <a class="multitabs" href="lyear_js_tags_input.html">标签插件</a> </li>
        <li> <a class="multitabs" href="lyear_js_notify.html">通知消息</a> </li>
      </ul>
    </li>
    <li class="nav-item nav-item-has-subnav">
      <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> <span>多级菜单</span></a>
      <ul class="nav nav-subnav">
        <li> <a href="#!">一级菜单</a> </li>
        <li class="nav-item nav-item-has-subnav"> 
          <a href="#!">一级菜单</a>
          <ul class="nav nav-subnav">
            <li> <a href="#!">二级菜单</a> </li>
            <li class="nav-item nav-item-has-subnav"> 
              <a href="#!">二级菜单</a>
              <ul class="nav nav-subnav">
                <li> <a href="#!">三级菜单</a> </li>
                <li> <a href="#!">三级菜单</a> </li>
              </ul>
            </li>
          </ul>
        </li>
        <li> <a href="#!">一级菜单</a> </li>
      </ul>
    </li>
  </ul>
</nav>

代码中 id="menus-*" ，叫什么自己定义即可，后面的菜单内容加上 collapse 隐藏。

2、其次，添加顶部导航，这里放到 topbar-left 里面（v4的版本是 navbar-left）。

<div class="topbar-left">
  <div class="lyear-aside-toggler">
    <span class="lyear-toggler-bar"></span>
    <span class="lyear-toggler-bar"></span>
    <span class="lyear-toggler-bar"></span>
  </div>
  <div class="dropdown">
    <span class="header-icon-menu" data-toggle="dropdown"><i class="mdi mdi-apps"></i></span>
    <ul class="nav navbar-nav dropdown-menu icon-menu-ul">
      <li class="active"><a href="javascript:void(0)" onclick="showMenus(this, 1)">默认</a></li>
      <li><a href="javascript:void(0)" onclick="showMenus(this, 2)">菜单一</a></li>
      <li><a href="javascript:void(0)" onclick="showMenus(this, 3)">菜单二</a></li>
    </ul>
  </div>
</div>

3、菜单上有 onclick 事件，对应的方法如下：

function showMenus(obj, id)
{
    $('.sidebar-main .nav-drawer').slideUp('slow');
    $('#menus-'+id).slideDown('slow');
    $(obj).parent('li').addClass('active').siblings().removeClass('active');
    $('.lyear-layout-sidebar-scroll').animate({scrollTop: 0}, 300);  // 处理滚动条到最上方
}

4、针对顶部菜单，还需要写一些响应式的样式，避免在手机上的错位

.topbar-left .navbar-nav {
    margin: 0px;
}
.topbar-left .navbar-nav a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}
.topbar-left .navbar-nav a i {
    display: none;
}
.topbar-left .navbar-nav li {
    float: left;
}
@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;
    }
    .topbar-left .icon-menu-ul li {
        float: none;
    }
}
@media (min-width: 980px) {
    .header-icon-menu {
        display: none;
    }
    .topbar-left .navbar-nav.dropdown-menu {
        display: block;
        position: inherit;
        box-shadow: none;
        background-color: transparent;
    }
    [data-headerbg*='color_'] .topbar-left .navbar-nav a {
        color: rgba(255, 255, 255, .75);
    }
    [data-headerbg*='color_'] .topbar-left .navbar-nav a:focus,
    [data-headerbg*='color_'] .topbar-left .navbar-nav a:hover {
        color: #fff;
    }
    [data-headerbg*='color_'] .topbar-left .navbar-nav>.active>a,
    [data-headerbg*='color_'] .topbar-left .navbar-nav>.active>a:focus,
    [data-headerbg*='color_'] .topbar-left .navbar-nav>.active>a:hover {
        background-color: rgba(255,255,255,.125);
        color: #fff;
    }
}

5、这里还需要对tab插件做一些简单的修改，找到 bootstrap-multitabs/multitabs.js，新增js代码（大概567行）：

            $('.nav-drawer').find('li').removeClass('active');
            $navObj.parent('li').addClass('active');
            $navHasSubnav.first().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');
                }
            });
            $.each($('.navbar-nav li'), function (inx, ve) {
                var $thisLi = $(ve);
                $thisLi.removeClass('active');
                if ((inx+1) == $thisIdArr[1]) {
                    $thisLi.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-scroll').animate({scrollTop: hht}, 300);
            }

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

如果你使用的是 .min.js 的压缩文件，请在修改完后自行压缩到 .min.js 文件当中。

效果图如下：

点击查看V3的演示示例

V4跟上面的代码稍微有一些不同，这里摘抄出来了，具体内容大家看演示

点击查看V4的演示示例

1、v4的版本同样需要对tab插件做一些简单的修改，找到 bootstrap-multitabs/multitabs.js，新增js代码（大概570行）：

            $('.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');
                }
            });
            $.each($('.lyear-topbar li'), function (inx, ve) {
                var $thisLi = $(ve);
                $thisLi.removeClass('active');
                if ((inx+1) == $thisIdArr[1]) {
                    $thisLi.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);
            }

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

如果你使用的是 .min.js 的压缩文件，请在修改完后自行压缩到 .min.js 文件当中。

2、这里是菜单内容，有一个地方要注意的是，第一行代码，比v4原版的多了一个 class 类 align-items-center，一定要注意别遗漏了。

        <div class="navbar-left d-flex align-items-center">
          <div class="lyear-aside-toggler">
            <span class="lyear-toggler-bar"></span>
            <span class="lyear-toggler-bar"></span>
            <span class="lyear-toggler-bar"></span>
          </div>
          <div class="dropdown">
            <span class="header-icon-menu" data-toggle="dropdown"><i class="mdi mdi-apps"></i></span>
            <ul class="lyear-topbar dropdown-menu">
              <li class="dropdown-item nav-item active">
                <a class="nav-link" href="javascript:void(0)" onclick="showMenus(this, 1)">默认</a>
              </li>
              <li class="dropdown-item nav-item">
                <a class="nav-link" href="javascript:void(0)" onclick="showMenus(this, 2)">菜单一</a>
              </li>
              <li class="dropdown-item nav-item">
                <a class="nav-link" href="javascript:void(0)" onclick="showMenus(this, 3)">菜单二</a>
              </li>
            </ul>
          </div>
        </div>