本节介绍B-JUI框架的左右导航菜单：

<ul id="bjui-hnav-navbar">
  <li class="active"><a href="form-select.html" data-options="{id:'home'}"><i class="bjicon-home"></i> 独立菜单</a></li>
  <li class="active"><a href="javascript:;"><i class="fa fa-check-square-o"></i> 表单元素</a>
    <ul class="menu-items" data-faicon="hand-o-up">
      <li><a href="form-button.html" data-options="{id:'form-button', faicon:'hand-o-up'}">按钮</a>
        <i class="fa fa-angle-down"></i>
        <ul class="menu-items-children">
          <li><a href="form-input.html" data-options="{id:'form-input', faicon:'terminal'}">文本框</a></li>
          <li><a href="form-select.html"
                 data-options="{id:'form-select', faicon:'caret-square-o-down'}">下拉选择框</a></li>
        </ul>
      </li>
      <li><a href="form-input.html" data-options="{id:'form-input', faicon:'terminal'}">文本框</a></li>
      <li><a href="form-select.html" data-options="{id:'form-select', faicon:'caret-square-o-down'}">下拉选择框</a>
      </li>
      <li><a href="form-checkbox.html" data-options="{id:'form-checkbox', faicon:'check-square-o'}">复选、单选框</a>
      </li>
    </ul>
    <ul class="menu-items" data-tit="表单Demo" data-faicon="list">
      <li><a href="form.html" data-options="{id:'form-demo', faicon:'th-large'}">表单示例</a></li>
    </ul>
  </li>
  <li><a href="https://www.baidu.com" target="_blank" data-link="true"><i class="fa fa-link"></i> 百度外链</a></li>
</ul>

初始化配置

      BJUI.init({
        ....
        // left-menu 请在 core.css 后加载 BJUI/themes/left-menu.css 样式
        layout: {
          mode: 'left-menu', // default | left-menu 两种模式
          panel: true, // 是否开启手风琴模式
          tags: false, // 是否显示标签页
          // 简单的样式配置，left-menu模式生效，若不满足需求则**取消此处配置**，并自定义添加样式实现
          style: {
            headerBg: '#009688', // 顶部头颜色
            sidebarBg: '#001529', // 菜单栏背景色
            sidebarLightBg: '#0c2135', // 非一级菜单背景色
            activeLinkBg: 'linear-gradient(90deg,rgba(59,125,221,.3) 0,rgba(59,125,221,.2) 70%,rgba(0,0,0,.14) 100%)', // 选中的链接背景色
            activeLinkBorderLeftColor: '#3B7DDD' // 选中的链接左border颜色
          }
        },
        theme: 'teal', // 若有Cookie['bjui_theme'],优先选择Cookie['bjui_theme']。皮肤[皮肤:default, orange, purple, blue, red, green, teal]
        ....
      })

说明：

可参考index_left_menu.html配置

左右导航栏菜单需要在 core.css 后加载 BJUI/themes/left-menu.css 样式

左右导航栏菜单需要在菜单初始化时设置layout相关属性

左右导航菜单结构与横向导航菜单基本一致，需要去除所有data-toggle="slidebar"属性，不支持data-tit属性

菜单图标仅在一级菜单支持，在一级菜单内添加<i>标签即可

左右导航菜单(left-menu)