• Layui快速入门之第五节 导航

    目录

    一：基本概念

    导航依赖element模块

    API

    渲染

    属性

    事件

    二：水平导航

    常规用法：

    三：垂直导航

    四：侧边垂直导航

    五：导航主题

    六：加入徽章等元素

    七：面包屑导航

    ps：面包屑导航渲染

    一：基本概念

         导航是指支持用户导航、进入和退出应用中不同内容片段的交互。导航菜单包含水平导航和垂直导航， 在 2.x 版本中，nav 组件属于 element 模块的子集 

    使用：需要加载导航模块，也需要引入核心的js文件

    导航依赖element模块

    API

    API描述
    var element = layui.element获得 element 模块。
    element.render('nav', 'filter')导航菜单 nav 组件渲染。

    渲染

    element.render('nav', filter);

    • 参数 'nav' 是渲染导航的固定值
    • 参数 filter : 对应导航容器 lay-filter 的属性值

    nav 组件会在元素加载完毕后，自动对导航完成一次渲染，因此该方法主要用于对动态插入的导航元素的初始化渲染。

    1. <div id="test">div>
    2. <script>
    3. layui.use(function(){
    4.   var element = layui.element;
    5.   var $ = layui.$;
    6.   // 动态插入导航元素
    7.   $('#test').html(`
    8.     <div class="layui-nav" lay-filter="demo-filter-nav">
    9.       <li class="layui-nav-item layui-this"><a href="">选中a>li>
    10.       <li class="layui-nav-item"><a href="">菜单a>li>
    11.       
    12.     div>
    13.   `);
    14.   // 渲染导航组件
    15.   element.render('nav', 'demo-filter-nav');
    16. });
    17. script>

    属性

    属性描述
    lay-shrink导航容器属性。展开子菜单时，是否收缩兄弟节点已展开的子菜单。可选值：
    • lay-shrink="" 不收缩兄弟菜单子菜单，默认;
    • lay-shrink="all" 收缩全部兄弟菜单子菜单
    lay-bar导航容器属性。用于禁用滑块跟随功能。如：
    …
    lay-unselect导航菜单项属性。 设置后，点击对应菜单项时，不会出现选中效果。

    事件

    element.on('nav(filter)', callback)

    • 参数 nav(filter) 是一个特定结构。
      • nav 为导航事件固定值；
      • filter 为导航容器属性 lay-filter 对应的值。
    • 参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数。

    当点击导航父级菜单和二级菜单时触发。示例：

    1. <div class="layui-nav" lay-filter="demo-filter-nav">
    2.   <li class="layui-nav-item"><a href="javascript:;">菜单1a>li>
    3.   <li class="layui-nav-item"><a href="javascript:;">菜单2a>li>
    4. div>
    5. <script>
    6. layui.use(function(){
    7.   var element = layui.element;
    8.   var layer = layui.layer;
    9.   
    10.   // 导航点击事件
    11.   element.on('nav(demo-filter-nav)', function(elem){
    12.     console.log(elem); // 得到当前点击的元素 jQuery 对象
    13.     layer.msg(elem.text());
    14.   });
    15. });
    16. script>

    二：水平导航

    一般用于页面头部菜单。样式规则如下：

    • 通过 class="layui-nav" 设置导航容器
    • 通过 class="layui-nav-item" 设置导航菜单项
      • 追加 className 为 layui-this 可设置菜单选中项
    • 通过 class="layui-nav-child" 设置导航子菜单项
      • 追加 className 为 layui-nav-child-c 和 layui-nav-child-r 可设置子菜单居中和向右对齐

    常规用法：

    1. <ul class="layui-nav">
    2.   <li class="layui-nav-item layui-this"><a href="nav.html">选中a>li>
    3.   <li class="layui-nav-item">
    4.     <a href="javascript:;">常规a>
    5.   li>
    6.   <li class="layui-nav-item"><a href="nav.html">导航a>li>
    7.   <li class="layui-nav-item">
    8.     <a href="javascript:;">子级a>
    9.     <dl class="layui-nav-child">
    10.       <dd><a href="nav.html">菜单1a>dd>
    11.       <dd><a href="nav.html">菜单2a>dd>
    12.       <dd><a href="nav.html">菜单3a>dd>
    13.     dl>
    14.   li>
    15.   <li class="layui-nav-item">
    16.     <a href="javascript:;">选项a>
    17.     <dl class="layui-nav-child">
    18.       <dd><a href="nav.html">选项1a>dd>
    19.       <dd class="layui-this"><a href="nav.html">选项2a>dd>
    20.       <dd><a href="nav.html">选项3a>dd>
    21.     dl>
    22.   li>
    23.   <li class="layui-nav-item"><a href="nav.html">演示a>li>
    24. ul>

    备注：滑块效果仅跟随不存在子菜单的菜单项

    三：垂直导航

    一般用于左侧侧边菜单。样式规则如下：

    • 在水平导航的 class 规则上，通过设置 class="layui-nav layui-nav-tree" 定义垂直导航容器。
    • 通过 class="layui-nav-itemed" 设置父菜单项为展开状态
    • 通过给导航容器追加 class="layui-nav-side" 可设置侧边垂直导航
    • 其余结构及填充内容与水平导航完全相同
    1. <ul class="layui-nav layui-nav-tree">
    2.   <li class="layui-nav-item layui-nav-itemed">
    3.     <a href="javascript:;">默认展开a>
    4.     <dl class="layui-nav-child">
    5.       <dd><a href="javascript:;">选项1a>dd>
    6.       <dd><a href="javascript:;">选项2a>dd>
    7.       <dd><a href="javascript:;">选项3a>dd>
    8.     dl>
    9.   li>
    10.   <li class="layui-nav-item">
    11.     <a href="javascript:;">默认收缩a>
    12.     <dl class="layui-nav-child">
    13.       <dd><a href="javascript:;">选项1a>dd>
    14.       <dd><a href="javascript:;">选项2a>dd>
    15.       <dd><a href="javascript:;">选项3a>dd>
    16.     dl>
    17.   li>
    18.   <li class="layui-nav-item"><a href="javascript:;">菜单1a>li>
    19.   <li class="layui-nav-item"><a href="javascript:;">菜单2a>li>
    20.   <li class="layui-nav-item"><a href="javascript:;">菜单3a>li>
    21. ul>

    四：侧边垂直导航

    1. html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <title>侧边垂直导航 - Layuititle>
    6.   <meta name="renderer" content="webkit">
    7.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    8.   <meta name="viewport" content="width=device-width, initial-scale=1">
    9.   <link href="/cdn.staticfile.org/layui/2.8.0/css/layui.css" rel="stylesheet">
    10. head>
    11. <body>
    12. <ul class="layui-nav layui-nav-tree layui-nav-side">
    13.   <li class="layui-nav-item layui-nav-itemed">
    14.     <a href="javascript:;">默认展开a>
    15.     <dl class="layui-nav-child">
    16.       <dd><a href="javascript:;">选项1a>dd>
    17.       <dd><a href="javascript:;">选项2a>dd>
    18.       <dd><a href="javascript:;">选项3a>dd>
    19.     dl>
    20.   li>
    21.   <li class="layui-nav-item">
    22.     <a href="javascript:;">默认收缩a>
    23.     <dl class="layui-nav-child">
    24.       <dd><a href="javascript:;">选项1a>dd>
    25.       <dd><a href="javascript:;">选项2a>dd>
    26.       <dd><a href="javascript:;">选项3a>dd>
    27.     dl>
    28.   li>
    29.   <li class="layui-nav-item"><a href="javascript:;">菜单1a>li>
    30.   <li class="layui-nav-item"><a href="javascript:;">菜单2a>li>
    31.   <li class="layui-nav-item"><a href="javascript:;">菜单3a>li>
    32. ul>
    33. <script src="/cdn.staticfile.org/layui/2.8.0/layui.js">script>
    34. <script>
    35. layui.use(function(){
    36.   var element = layui.element;
    37.   element.render('nav');
    38. });
    39. script>
    40. body>
    41. html>

    五：导航主题

    给导航容器追加任意背景色 class

    1. <ul class="layui-nav layui-bg-gray">
    2.   <li class="layui-nav-item"><a href="nav.html">浅色导航a>li>
    3.   <li class="layui-nav-item"><a href="nav.html">菜单1a>li>
    4.   <li class="layui-nav-item"><a href="nav.html">菜单2a>li>
    5.   <li class="layui-nav-item">
    6.     <a href="javascript:;">更多a>
    7.     <dl class="layui-nav-child">
    8.       <dd><a href="nav.html">选项1a>dd>
    9.       <dd><a href="nav.html">选项2a>dd>
    10.       <dd><a href="nav.html">选项3a>dd>
    11.     dl>
    12.   li>
    13.   <li class="layui-nav-item"><a href="nav.html">菜单3a>li>
    14. ul>
    15.  
    16. <br>
    17.  
    18. <ul class="layui-nav layui-bg-cyan">
    19.   <li class="layui-nav-item"><a href="nav.html">藏青导航a>li>
    20.   <li class="layui-nav-item"><a href="nav.html">菜单1a>li>
    21.   <li class="layui-nav-item"><a href="nav.html">菜单2a>li>
    22.   <li class="layui-nav-item">
    23.     <a href="javascript:;">更多a>
    24.     <dl class="layui-nav-child">
    25.       <dd><a href="nav.html">选项1a>dd>
    26.       <dd><a href="nav.html">选项2a>dd>
    27.       <dd><a href="nav.html">选项3a>dd>
    28.     dl>
    29.   li>
    30.   <li class="layui-nav-item"><a href="nav.html">菜单3a>li>
    31. ul>
    32. <br>
    33.  
    34. <ul class="layui-nav layui-bg-green" lay-bar="disabled">
    35.   <li class="layui-nav-item"><a href="nav.html">墨绿导航a>li>
    36.   <li class="layui-nav-item"><a href="nav.html">菜单1a>li>
    37.   <li class="layui-nav-item"><a href="nav.html">菜单2a>li>
    38.   <li class="layui-nav-item">
    39.     <a href="javascript:;">更多a>
    40.     <dl class="layui-nav-child">
    41.       <dd><a href="nav.html">选项1a>dd>
    42.       <dd><a href="nav.html">选项2a>dd>
    43.       <dd><a href="nav.html">选项3a>dd>
    44.     dl>
    45.   li>
    46.   <li class="layui-nav-item"><a href="nav.html">菜单3a>li>
    47. ul>
    48. <br>
    49.  
    50. <ul class="layui-nav layui-bg-blue" lay-bar="disabled">
    51.   <li class="layui-nav-item"><a href="nav.html">蓝色导航a>li>
    52.   <li class="layui-nav-item"><a href="nav.html">菜单1a>li>
    53.   <li class="layui-nav-item"><a href="nav.html">菜单2a>li>
    54.   <li class="layui-nav-item">
    55.     <a href="javascript:;">更多a>
    56.     <dl class="layui-nav-child">
    57.       <dd><a href="nav.html">选项1a>dd>
    58.       <dd><a href="nav.html">选项2a>dd>
    59.       <dd><a href="nav.html">选项3a>dd>
    60.     dl>
    61.   li>
    62.   <li class="layui-nav-item"><a href="nav.html">菜单3a>li>
    63. ul>

    六：加入徽章等元素

    1. <ul class="layui-nav">
    2.   <li class="layui-nav-item">
    3.     <a href="nav.html">带徽章<span class="layui-badge">9span>a>
    4.   li>
    5.   <li class="layui-nav-item">
    6.     <a href="nav.html">小圆点<span class="layui-badge-dot">span>a>
    7.   li>
    8.   <li class="layui-nav-item" lay-unselect>
    9.     <a href="javascript:;">
    10.       <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" class="layui-nav-img">
    11.     a>
    12.     <dl class="layui-nav-child">
    13.       <dd><a href="javascript:;">子级菜单a>dd>
    14.       <dd><a href="javascript:;">横线隔断a>dd>
    15.       <hr>
    16.       <dd style="text-align: center;"><a href="nav.html">退出a>dd>
    17.     dl>
    18.   li>
    19. ul>

    七：面包屑导航

    面包屑导航主要用于指示当前页面所处的位置，并能返回到上级页面。

    1. <h3>默认面包屑h3>
    2. <span class="layui-breadcrumb">
    3.   <a href="/index.html">首页a>
    4.   <a href="https://layui.dev/demo/">演示a>
    5.   <a><cite>导航元素cite>a>
    6. span>
    7. <h3>自定义分隔符h3>
    8. <span class="layui-breadcrumb" lay-separator=">">
    9.   <a href="nav.html">首页a>
    10.   <a href="nav.html">国际新闻a>
    11.   <a href="nav.html">亚太地区a>
    12.   <a><cite>正文cite>a>
    13. span>
    14. <h3>门户频道h3>
    15. <span class="layui-breadcrumb" lay-separator="|">
    16.   <a href="nav.html">娱乐a>
    17.   <a href="nav.html">八卦a>
    18.   <a href="nav.html">体育a>
    19.   <a href="nav.html">搞笑a>
    20.   <a href="nav.html">视频a>
    21.   <a href="nav.html">游戏a>
    22.   <a href="nav.html">综艺a>
    23. span>

    ps：面包屑导航渲染

    element.render('breadcrumb', filter);

    • 参数 'breadcrumb' 是渲染面包屑导航的固定值
    • 参数 filter : 对应面包屑导航容器 lay-filter 的属性值

    该方法主要用于对动态插入的面包屑导航的初始化渲染，用法同上述导航菜单

  • 相关阅读:
    java基础-List常用方法
    线上服务器老是卡，该如何优化？
    qt的鼠标事件
    仿IOS滑动屏幕关闭界面实现
    vue15
    【面试题】封装jQuery源码以及实现jQuery的扩展功能
    C++11：新特性（11-20）
    Docker 系列之 DockerDesktop 初步安装
    Java测试（12）---性能测试
    Spring Cloud GateWay基于nacos如何去做灰度发布
  • 原文地址：https://blog.csdn.net/qq_61313896/article/details/132852901