【Layui】04 導航 Nav

文檔地址：

https://www.layui.com/doc/element/nav.html

演示案例：

<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item"><a href="">最新活動</a></li>
    <li class="layui-nav-item layui-this"><a href="">產品</a></li>
    <li class="layui-nav-item"><a href="">大數據</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解決方案</a>
        <dl class="layui-nav-child"> <!-- 二級菜單 -->
            <dd><a href="">移動模塊</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">電商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社區</a></li>
</ul>


<script>
    //注意：導航 依賴 element 模塊，否則無法進行功能性操作
    layui.use('element', function(){
        let element = layui.element;
    });
</script>

樣式種類：

水平方向(默認的)：

layui-nav

垂直方向：

layui-nav-tree

 

注意點：使用導航模塊必須引入element模塊！

<script>
    //注意：導航 依賴 element 模塊，否則無法進行功能性操作
    layui.use('element', function(){
        let element = layui.element;
    });
</script>

菜單項：

layui-nav-item

    <li class="layui-nav-item"><a href="">自定義菜單項1</a></li>
    <li class="layui-nav-item"><a href="">自定義菜單項2</a></li>
    <li class="layui-nav-item"><a href="">自定義菜單項3</a></li>
    <li class="layui-nav-item"><a href="">自定義菜單項4</a></li>

選中當前菜單項【選中狀態】：

layui-this

    <li class="layui-nav-item"><a href="">自定義菜單項1</a></li>
    <li class="layui-nav-item"><a href="">自定義菜單項2</a></li>
    <li class="layui-nav-item"><a href="">自定義菜單項3</a></li>
    <li class="layui-nav-item layui-this"><a href="">自定義菜單項4</a></li>

水平樣式：

另外鼠標移動附上去也會自動標記這種選中屬性

 

調整部分菜單項移動到最右邊：

    <li class="layui-nav-item" style="float: right">
        <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退了</a></dd>
        </dl>
    </li>