Layui 選單功能

Layui 選單功能操作說明

layui-nav 語法名稱

這是 Layui 所提供的選單功能

語法使用方式

• 如果發現到功能有少的話要手動增加一段模組就可以正常運作

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>水平导航菜单</legend>
      </fieldset>
       
      <ul class="layui-nav">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this">
          <a href="javascript:;">产品</a>
          <dl class="layui-nav-child">
            <dd><a href="">选项1</a></dd>
            <dd><a href="">选项2</a></dd>
            <dd><a href="">选项3</a></dd>
          </dl>
        </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 class="layui-this"><a href="">选中项</a></dd>
            <dd><a href="">电商平台</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
      </ul>

• 模組功能增加，因為在 Layui 已經有幫我們組合一些功能並且模組化了

    <script>
        layui.use(['element'],function(){

        })
    </script>

樣版說明

• 方向：

  • 水平 預設
  • 垂值 layui-nav-tree

• 其他樣版

  • layui-nav 代表這是選單功能
    • layui-nav-item 代表這個選單功能的一個子項
      • layui-nav-child 子項目的子項目
    • layui-this 預設值相個項目

補充說明

備註

參考相關網頁

• Layui 文檔參考 导航菜单