zoukankan      html  css  js  c++  java
  • layui导航

    关于导航 首先看一下官网的样式:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../layui/css/layui.css" rel="stylesheet" />
    <script src="../Scripts/jquery-3.3.1.js"></script>
    <script src="../layui/layui.js"></script>
    </head>
    <body>
    <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 () {
    var element = layui.element;

    //…
    });
    </script>
    </body>
    </html>

    ***:这个东东需要你加载element模块。虽然大部分行为都是在加载完该模块后自动完成的,但一些交互操作,如呼出二级菜单等,需借助element模块才能使用。

    设定layui-this来指向当前页面分类。

    垂直导航需要追加class:layui-nav-tree 
    侧边导航需要追加class:layui-nav-tree layui-nav-side

    全都是加到ul的calss中。其实导航差不多也就这么点。

  • 相关阅读:
    Intellij Idea非常6的10个姿势!
    java 集合
    oracle sql调优
    springboot
    整理的java jdk1.8跟mybatiseplus
    java8中lambda的用法(map转list,list转map等等
    遍历数组中的元素(含es6方法)
    云计算初探
    转FMS小工具用法
    Flex内存消耗
  • 原文地址:https://www.cnblogs.com/yagamilight/p/11055431.html
Copyright © 2011-2022 走看看