橫向導航菜單

前面我們已經知道，bjui的重要模塊部分的樣式啊什么的是要遵守規則的，就是它們的規則。

下面就是橫向導航菜單的規則：

 

示例：

<div id="bjui-hnav">
    <button type="button" class="bjui-hnav-toggle btn-default" data-toggle="collapse" data-target="#bjui-hnav-navbar">
        <i class="fa fa-bars"></i>
    </button>
    <ul id="bjui-hnav-navbar">
        <!-- 歡迎 -->
        <li style="width:204px;"><a>歡迎您，超級管理員！</a></li>
        
        <!-- zTree菜單 - BEGIN -->
        <li class="active"><a href="javascript:;" data-toggle="slidebar">表單元素</a>
            <div class="items hide" data-noinit="true">
                <ul id="bjui-hnav-tree-input" class="ztree ztree_main" data-toggle="ztree" data-on-click="MainMenuClick" data-expand-all="true" data-faicon="check-square-o" data-title="基本元素">
                    <li data-id="1" data-pid="0" data-faicon="folder-open-o" data-faicon-close="folder-o">表單元素</li>
                    <li data-id="10" data-pid="1" data-url="form-button.html" data-tabid="form-button" data-faicon="hand-o-up">按鈕</li>
                    <li data-id="11" data-pid="1" data-url="form-input.html" data-tabid="form-input" data-faicon="terminal">文本框</li>
                    <li data-id="12" data-pid="1" data-url="form-select.html" data-tabid="form-select" data-faicon="caret-square-o-down">下拉選擇框</li>
                    <li data-id="13" data-pid="1" data-url="form-checkbox.html" data-tabid="table" data-faicon="check-square-o">復選、單選框</li>
                    
                </ul>
                <ul id="bjui-hnav-tree-form" class="ztree ztree_main" data-toggle="ztree" data-on-click="MainMenuClick" data-expand-all="true" data-faicon="list" data-title="綜合演示">
                    <li data-id="1" data-pid="0" data-faicon="folder-open-o" data-faicon-close="folder-o">表單演示</li>
                    <li data-id="14" data-pid="1" data-url="form.html" data-tabid="form" data-faicon="list">表單綜合演示</li>
                </ul>
            </div>
        </li><!-- zTree菜單 - END -->
        
        <!-- 列表菜單 - BEGIN -->
        <li><a href="javascript:;" data-toggle="slidebar">表單元素&演示</a>
            <div class="items hide" data-noinit="true">
                <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><b><i class="fa fa-angle-down"></i></b>
                        <!-- 子級菜單 -->
                        <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-title="表單Demo" data-faicon="list">
                    <li><a href="form.html" data-options="{id:'form-demo', faicon:'th-large'}">表單示例</a></li>
                </ul>
            </div>
        </li><!-- zTree菜單 - End -->
        
        <!-- 下拉菜單 - BEGIN -->
        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown"><!-- 下拉菜單 --></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#"><!-- 下拉菜單一 --></a></li>
                <li><a href="#"><!-- 下拉菜單二 --></a></li>
                ...
            </ul>
        </li><!-- 下拉菜單 - END -->
        ...
    </ul>
</div>

 

說明：

1、橫向菜單（#bjui-hnav-navbar）的li元素添加Class “active”，並含有class為item hide包裹有zTree菜單或列表菜單的div，則在框架初始化完成后，對應的zTree或者列表會自動加載到導航欄。（測試過）

（我有點猜測zTree菜單就是子菜單的意思）

2、zTree菜單：橫向菜單的a鏈接屬性data-toggle為slidebar時，本鏈接將對應zTree或者列表加載到左側導航欄

3、下拉菜單：橫向菜單的a鏈接屬性data-toggle為drop-down的時候，觸發下拉菜單

4、div（items）容器中的ul屬性datafaicon可以定義左側導航欄模塊的icon圖標，屬性data-title可以定義模塊名稱

 

看完這個感覺就是頭上的導航欄可以控制幾乎下面的所有。