网站宝库 - UI前端Html5组件
文档首页
基础部分
组件部分
扩展部分
JS部分
移动端
文档首页
基础部分
组件部分
扩展部分
JS部分
移动端

一级菜单

默认菜单

<nav class="ui-nav">
    <ul>
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a>
            <ul>
                <li><a href="#">链接链接链接1</a></li>
                <li><a href="#">链接2</a></li>
                <li><a href="#">链接3</a></li>
                <li><a href="#">链接4</a></li>
                <li><a href="#">链接5</a></li>
            </ul>
        </li>
        <li class="active"><a href="#">菜单3</a>
            <ul>
                <li><a href="#">链接1</a></li>
                <li><a href="#">链接2</a></li>
                <li><a href="#">链接3</a></li>
                <li><a href="#">链接4</a></li>
                <li><a href="#">链接5</a></li>
            </ul>
        </li>
        <li><a href="#">菜单4</a>
            <ul>
                <li><a href="#">链接1</a></li>
                <li><a href="#">链接2</a></li>
                <li><a href="#">链接3</a></li>
                <li><a href="#">链接4</a></li>
                <li><a href="#">链接5</a></li>
            </ul>
        </li>
    </ul>
</nav>

等分菜单

<nav class="ui-nav ui-nav-full ui-nav-bg-blue">
    <ul>
        <li><a href="#">菜单1</a></li>
        <li>
            <a href="#">菜单2</a>
            <ul>
                <li><a href="#">链接链接链接1</a></li>
                <li><a href="#">链接2</a></li>
                <li><a href="#">链接3</a></li>
                <li><a href="#">链接4</a></li>
                <li><a href="#">链接5</a></li>
            </ul>
        </li>
        <li class="active">
            <a href="#">菜单3</a>
            <ul>
                <li><a href="#">链接1</a></li>
                <li><a href="#">链接2</a></li>
                <li><a href="#">链接3</a></li>
                <li><a href="#">链接4</a></li>
                <li><a href="#">链接5</a></li>
            </ul>
        </li>
        <li>
            <a href="#">菜单4</a>
            <ul>
                <li><a href="#">链接1</a></li>
                <li><a href="#">链接2</a></li>
                <li><a href="#">链接3</a></li>
                <li><a href="#">链接4</a></li>
                <li><a href="#">链接5</a></li>
            </ul>
        </li>
    </ul>
</nav>

底部弹出

<nav class="ui-nav ui-nav-bottom">
    <ul>
        <li><a href="#">菜单1</a></li>
        <li>
            <a href="#">菜单2</a>
            <ul>
                <li><a href="#">链接链接链接1</a></li>
                <li><a href="#">链接2</a></li>
                <li><a href="#">链接3</a></li>
                <li><a href="#">链接4</a></li>
                <li><a href="#">链接5</a></li>
            </ul>
        </li>
        <li class="active">
            <a href="#">菜单3</a>
            <ul>
                <li><a href="#">链接1</a></li>
                <li><a href="#">链接2</a></li>
                <li><a href="#">链接3</a></li>
                <li><a href="#">链接4</a></li>
                <li><a href="#">链接5</a></li>
            </ul>
        </li>
        <li>
            <a href="#">菜单4</a>
            <ul>
                <li><a href="#">链接1</a></li>
                <li><a href="#">链接2</a></li>
                <li><a href="#">链接3</a></li>
                <li><a href="#">链接4</a></li>
                <li><a href="#">链接5</a></li>
            </ul>
        </li>
    </ul>
</nav>

颜色






<nav class="ui-nav ui-nav-bg-red">
    <ul>
        <li class="active"><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a ></li>
        <li><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
    </ul>
</nav>

<nav class="ui-nav ui-nav-bg-yellow">
    <ul>
        <li><a href="#">菜单1</a></li>
        <li class="active"><a href="#">菜单2</a ></li>
        <li><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
    </ul>
</nav>

<nav class="ui-nav ui-nav-bg-blue">
    <ul>
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a ></li>
        <li class="active"><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
    </ul>
</nav>

<nav class="ui-nav ui-nav-bg-green">
    <ul>
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a ></li>
        <li><a href="#">菜单3</a></li>
        <li class="active"><a href="#">菜单4</a></li>
    </ul>
</nav>

<nav class="ui-nav ui-nav-bg-info">
    <ul>
        <li class="active"><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a ></li>
        <li><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
    </ul>
</nav>

<nav class="ui-nav ui-nav-bg-black">
    <ul>
        <li><a href="#">菜单1</a></li>
        <li class="active"><a href="#">菜单2</a ></li>
        <li><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
    </ul>
</nav>