导航菜单

为网站提供导航功能的菜单。

顶栏

横向菜单

<div id="Menu1" data-type="navigation-1" data-color="" style="line-height: 60px;width:700px;">
    <div class="menu">
        <div data-value="导航一"  data-iClass="icon icon-arrow-down" class="item">
            <div class="menu">
                <div data-value="导航二" class="item"></div>
                <div data-value="导航二" class="item"></div>
            </div>
        </div>
        <div data-value="导航一" data-iClass="icon icon-arrow-down"  class="item">
            <div data-value="组类一" class="menu">
                <div data-value="导航二" class="item"></div>
                <div data-value="导航二" data-child="true" class="item"></div>
            </div>
            <div class="menu" data-value="组类二">
                <div data-value="导航二" class="item"></div>
                <div data-value="导航二" class="item"></div>
            </div>
        </div>
        <div data-value="导航一" class="item"></div>
        <div data-value="导航一" class="item"></div>
    </div>
</div>
<div id="Menu2" data-type="navigation-2" data-color="black" style="line-height: 60px;width:700px;">
    <ul class="menu">
        <li class="item" data-value="导航一"  data-iClass="icon icon-arrow-down">
            <ul class="menu">
                <li class="item" data-value="导航二"></li>
                <li class="item" data-value="导航二"></li>
            </ul>
        </li>
        <li class="item" data-value="导航一"  data-iClass="icon icon-arrow-down">
            <ul class="menu" data-value="组类一">
                <li class="item" data-value="导航二"></li>
                <li class="item" data-value="导航二"></li>
                <li class="item" data-value="导航二"></li>
            </ul>
        </li>
        <li class="item" data-value="导航一"></li>
        <li class="item" data-value="导航一"></li>
    </ul>
</div>

侧栏

垂直导航，提供三种展开方式，可嵌入子导航

<!--type1-->
<div id="Menu1" data-type="accordion" data-color="black" style="width:200px;">
    <div class="menu">
        <div class="item" data-value="导航一" data-ibefore="woui-icon icon-nav-3" data-iClass="woui-icon icon-arrow-down">
            <div data-active="true" class="menu">
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
            </div>
        </div>
        <div class="item" data-value="导航一" data-ibefore="woui-icon icon-nav-2" data-iClass="woui-icon icon-arrow-down">
            <div class="menu">
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
            </div>
        </div>
        <div class="item" data-value="导航一" data-ibefore="woui-icon icon-nav-1" data-iClass="woui-icon icon-arrow-down">
            <div class="menu">
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
            </div>
        </div>
        <div class="item" data-value="导航一" data-ibefore="woui-icon icon-nav-" data-iClass="woui-icon icon-arrow-down">
            <div class="menu">
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
            </div>
        </div>
    </div>
</div>
<br>
<!--type2-->
<div id="Menu2" data-type="common" data-color="black" style="width:200px;">
    <div class="menu">
        <div class="item" data-value="导航一" data-ibefore="woui-icon icon-nav-3" data-iClass="woui-icon icon-arrow-down">
            <div class="menu" data-value="组类一">
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
            </div>
            <div class="menu" data-value="组类二">
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
            </div>
        </div>
        <div class="item" data-value="导航一" data-ibefore="woui-icon icon-nav-2" data-iClass="woui-icon icon-arrow-down">
            <div class="menu" data-value="组类一">
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
            </div>
        </div>
        <div class="item" data-value="导航一" data-ibefore="woui-icon icon-nav-1" data-disable="true"></div>
        <div class="item" data-value="导航一" data-ibefore="woui-icon icon-nav-"></div>
    </div>
</div>
<br>
<!--type3-->
<div id="Menu3" data-type="hover" data-color="" style="width:200px;">
    <div class="menu">
        <div class="item" data-value="导航一">
            <div class="menu">
                <div class="item" data-value="导航二">
                    <div class="menu">
                        <div class="item" data-value="导航三"></div>
                        <div class="item" data-value="导航三"></div>
                        <div class="item" data-value="导航三"></div>
                    </div>
                </div>
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
                <div class="item" data-value="导航二"></div>
            </div>
        </div>
        <div class="item" data-value="导航一"></div>
        <div class="item" data-value="导航一"></div>
        <div class="item" data-value="导航一"></div>
        <div class="item" data-value="导航一"></div>
        <div class="item" data-value="导航一"></div>
    </div>
</div>

主题

垂直导航，提供两种主题，默认主题和深色主题。

1 2	<div data-color=""></div>默认主题 <div data-color="black"></div>深色主题

API

初始化

new woUI.Menu(queryString)

queryString: 可以传入 Element.querySelector 支持字符串，也可以传入元素，只支持一个元素id或class。

属性

参数	说明	类型	可选值	默认值
el	元素名称	串
class	区别menu标签和item标签（必须）		class=”menu”和class=”item”
data-type	Menu的五种类型	串	两种水平导航／三种垂直导航／三种菜单展开方式
data-color	Menu的主题	串	white和black	white
data-value	Menu内容	串
独特的开（data-active）	是否保持一个子菜单的默认展开	布尔	true or false	false
禁用（data-disable）	是否只保持一个子菜单不可用	布尔	true or false	false

注意

class值必须存在，一个class=“menu”包裹多个class=“item”，标签可以随意选择。在date-value内添加导航html内容

导航菜单