跳到主內容

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 預設值相個項目

補充說明


備註





參考相關網頁