Layui快速入门之第五节 导航

2023-09-13 14:49:02

目录

一：基本概念

导航依赖element模块

API

渲染

属性

事件

二：水平导航

常规用法：

三：垂直导航

四：侧边垂直导航

五：导航主题

六：加入徽章等元素

七：面包屑导航

ps：面包屑导航渲染

一：基本概念

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

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

导航依赖element模块

<script type="text/javascript">
    //导航依赖element模块
    layui.use('element',function(){
        var element = layui.element;
    });
</script>

API

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

渲染

element.render('nav', filter);

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

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

<div id="test"></div>
<script>
layui.use(function(){
  var element = layui.element;
  var $ = layui.$;
  // 动态插入导航元素
  $('#test').html(`
    <div class="layui-nav" lay-filter="demo-filter-nav">
      <li class="layui-nav-item layui-this"><a href="">选中</a></li>
      <li class="layui-nav-item"><a href="">菜单</a></li>
      <!-- … -->
    </div>
  `);
  // 渲染导航组件
  element.render('nav', 'demo-filter-nav');
});
</script>

属性

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

事件

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

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

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

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

二：水平导航

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

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

常规用法：

<ul class="layui-nav">
  <li class="layui-nav-item layui-this"><a href="nav.html">选中</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">常规</a>
  </li>
  <li class="layui-nav-item"><a href="nav.html">导航</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">子级</a>
    <dl class="layui-nav-child">
      <dd><a href="nav.html">菜单1</a></dd>
      <dd><a href="nav.html">菜单2</a></dd>
      <dd><a href="nav.html">菜单3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">选项</a>
    <dl class="layui-nav-child">
      <dd><a href="nav.html">选项1</a></dd>
      <dd class="layui-this"><a href="nav.html">选项2</a></dd>
      <dd><a href="nav.html">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="nav.html">演示</a></li>
</ul>

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

三：垂直导航

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

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

四：侧边垂直导航

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>侧边垂直导航 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/cdn.staticfile.org/layui/2.8.0/css/layui.css" rel="stylesheet">
</head>
<body>
<ul class="layui-nav layui-nav-tree layui-nav-side">
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默认展开</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项1</a></dd>
      <dd><a href="javascript:;">选项2</a></dd>
      <dd><a href="javascript:;">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">默认收缩</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项1</a></dd>
      <dd><a href="javascript:;">选项2</a></dd>
      <dd><a href="javascript:;">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="javascript:;">菜单1</a></li>
  <li class="layui-nav-item"><a href="javascript:;">菜单2</a></li>
  <li class="layui-nav-item"><a href="javascript:;">菜单3</a></li>
</ul>
<script src="/cdn.staticfile.org/layui/2.8.0/layui.js"></script>
<script>
layui.use(function(){
  var element = layui.element;
  element.render('nav');
});
</script>
</body>
</html>

五：导航主题

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

<ul class="layui-nav layui-bg-gray">
  <li class="layui-nav-item"><a href="nav.html">浅色导航</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单1</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单2</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">更多</a>
    <dl class="layui-nav-child">
      <dd><a href="nav.html">选项1</a></dd>
      <dd><a href="nav.html">选项2</a></dd>
      <dd><a href="nav.html">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="nav.html">菜单3</a></li>
</ul>
 
<br>
 
<ul class="layui-nav layui-bg-cyan">
  <li class="layui-nav-item"><a href="nav.html">藏青导航</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单1</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单2</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">更多</a>
    <dl class="layui-nav-child">
      <dd><a href="nav.html">选项1</a></dd>
      <dd><a href="nav.html">选项2</a></dd>
      <dd><a href="nav.html">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="nav.html">菜单3</a></li>
</ul>
<br>
 
<ul class="layui-nav layui-bg-green" lay-bar="disabled">
  <li class="layui-nav-item"><a href="nav.html">墨绿导航</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单1</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单2</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">更多</a>
    <dl class="layui-nav-child">
      <dd><a href="nav.html">选项1</a></dd>
      <dd><a href="nav.html">选项2</a></dd>
      <dd><a href="nav.html">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="nav.html">菜单3</a></li>
</ul>
<br>
 
<ul class="layui-nav layui-bg-blue" lay-bar="disabled">
  <li class="layui-nav-item"><a href="nav.html">蓝色导航</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单1</a></li>
  <li class="layui-nav-item"><a href="nav.html">菜单2</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">更多</a>
    <dl class="layui-nav-child">
      <dd><a href="nav.html">选项1</a></dd>
      <dd><a href="nav.html">选项2</a></dd>
      <dd><a href="nav.html">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="nav.html">菜单3</a></li>
</ul>

六：加入徽章等元素

<ul class="layui-nav">
  <li class="layui-nav-item">
    <a href="nav.html">带徽章<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="nav.html">小圆点<span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item" lay-unselect>
    <a href="javascript:;">
      <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" class="layui-nav-img">
    </a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">子级菜单</a></dd>
      <dd><a href="javascript:;">横线隔断</a></dd>
      <hr>
      <dd style="text-align: center;"><a href="nav.html">退出</a></dd>
    </dl>
  </li>
</ul>

七：面包屑导航

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

<h3>默认面包屑</h3>
<span class="layui-breadcrumb">
  <a href="/index.html">首页</a>
  <a href="https://layui.dev/demo/">演示</a>
  <a><cite>导航元素</cite></a>
</span>
<h3>自定义分隔符</h3>
<span class="layui-breadcrumb" lay-separator=">">
  <a href="nav.html">首页</a>
  <a href="nav.html">国际新闻</a>
  <a href="nav.html">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
<h3>门户频道</h3>
<span class="layui-breadcrumb" lay-separator="|">
  <a href="nav.html">娱乐</a>
  <a href="nav.html">八卦</a>
  <a href="nav.html">体育</a>
  <a href="nav.html">搞笑</a>
  <a href="nav.html">视频</a>
  <a href="nav.html">游戏</a>
  <a href="nav.html">综艺</a>
</span>

ps：面包屑导航渲染

element.render('breadcrumb', filter);

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

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

更多推荐

springboot整合aop，实现日志操作

前言：整合之前，我们要明白aop是什么，为什么要用aop，aop能帮我们做什么。答：AOP是面向切面编程（Aspect-OrientedProgramming）的简称，它是一种编程思想，旨在在面向对象编程（OOP）的基础上进行功能模块的解耦和隔离。在传统的业务处理代码中，通常需要进行事务处理、日志记录等操作，这些操作会

redis深度历险 1 - Redis基础数据结构-001

Redis有5种基础数据结构，分别为:string(字符串)、list(列表)、set(集合)、hash(哈希）和zset(有序集合)。熟练掌握这5种基本数据结构的使用是Redis知识最基础也最重要的部分，它也是在Redis面试题中问到最多的内容。1字符串string字符串string是Redis最简单的数据结构。Re

AI在玩一种很新的艺术，700万网友在线围观，ControlNet又立功了

量子位|公众号QbitAIAI又在玩一种很新的艺术。一组“在离谱与合理的边缘反复试探”的图席卷各大平台，最火的一条𝕏已有近700万查看16.8万点赞，到处有人在求教程。除了棋盘样式，还有一种螺旋样式的也很流行。连知名投资机构YCombinator的创始人PaulGraham都来围观：这一刻，AI生成的艺术通过了我的图

Unity-Input System新输入系统插件学习

1.键盘、鼠标操作usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;usingUnityEngine.InputSystem;usingUnityEngine.UI;publicclassNewInputSystem:Mon

【Vue】入门及生命周期（前后端分离）

目录一、Vue简介1、Vue.js是什么2、库和框架的区别2.1库(Library)2.2框架(Framework)3、MVVM的介绍二、Vue入门1、Vue快速入门2、Vue的优势三、Vue事件四、Vue生命周期1、实例一、Vue简介1、Vue.js是什么Vue是一款流行的构建用户界面(UI)的[渐进式]JavaSc

Unix和Linux、GNU和GPL、RHEL和Centos、Debian和Ubuntu

文章目录Unix和LinuxGNU和GPLGNU/Linux名称的来源RHEL和CentosDebian和Ubuntu以上都是操作系统，服务器操作系统、桌面操作系统。对于刚刚接触Linux系统或者从事运维相关工作的人来说，肯定会听过很多名词，但是不知道他们的区别和联系，比如Unix和Linux、RHEL和Centos等

【JVM】经典垃圾收集器

文章目录说明新生代收集器Serial收集器ParNew收集器ParallelScavenge收集器老年代收集器SerialOld收集器ParallelOld收集器CMS收集器GarbageFirst收集器需要解决的问题运作过程CMS和G1的区别说明Java中有许多垃圾收集器（GarbageCollector，GC）可供

程序员基操——如何应对需求变更的“范畴”和“形状”

前言架构整洁之道读后感，随笔原文引用有删减，虽然我认为原文每一个字都很有价值，值得推敲，但是考虑到自己程序员的身份，必须懒点，才能融入大家喜欢交流的小伙伴私信加群引用文字为了达到软件的本来目的，软件系统必须够“软”——也就是说，软件应该容易被修改。当需求方改变需求的时候，随之所需的软件变更必须可以简单而方便地实现。变更

docker day05

昨日内容回顾:-dockerfile的优化-编译速度-充分利用缓存镜像，将不常变更的指令放在靠前的位置;-在不影响功能的前提下，最好是可以合并多条指令，可以减少中间容器或者镜像的产生;-软件源最高更换国内较稳定的软件源，相比国外的软件源速度会更快;-使用".dockerignore"文件忽略Dockerfile编译不需

python爬虫爬取电影数据并做可视化

思路：1、发送请求，解析html里面的数据2、保存到csv文件3、数据处理4、数据可视化需要用到的库：importrequests,csv#请求库和保存库importpandasaspd#读取csv文件以及操作数据fromlxmlimportetree#解析html库frompyecharts.chartsimport

期权是什么？一分钟带你玩转期权策略！

很多人问我期权是什么，这个问题怎么回答呢？首先期权是一种交易模式，如同股票期货一样，但它又不同于股票和期货，因为它有自己的交易规则和特性，期权更多是一种工具，可以做空大盘对冲下跌风险，下文解答期权是什么？一分钟带你玩转期权策略！本文来自：期权酱期权，又叫选择权，是一份合约，给予期权买家在特定日期或之前以特定价格买入或卖

热文推荐
  1. MySQL如何进行增量备份与恢复？

    目录一、MySQL介绍二、增量备份三、备份恢复一、MySQL介绍MySQL是一款开源的关系型数据库管理系统（RDBMS），它以其可靠性、灵活性和易于使用而备受赞誉。以下是关于MySQL数据库的介绍：MySQL是由瑞典公司MySQLAB开发，随后被SunMicrosystems收购，最终被甲骨文公司（OracleCorp

  2. 计算机竞赛 机器学习股票大数据量化分析与预测系统 - python 计算机竞赛

    文章目录0前言1课题背景2实现效果UI界面设计web预测界面RSRS选股界面3软件架构4工具介绍Flask框架MySQL数据库LSTM5最后0前言🔥优质竞赛项目系列，今天要分享的是🚩机器学习股票大数据量化分析与预测系统该项目较为新颖，适合作为竞赛课题方向，学长非常推荐！🥇学长这里给一个题目综合评分(每项满分5分)

  3. 【学习】一致性哈希与哈希环

    一致性哈希一致性哈希（ConsistentHashing）是一种用于数据分布和负载均衡的算法，其核心思想是将数据和节点都映射到一个虚拟的哈希环上，并通过哈希值来确定数据应该分布到哪个节点上。以下是一致性哈希的基本实现步骤：1、确定哈希函数：首先，选择一个合适的哈希函数，它将数据映射到一个足够大的哈希空间，通常是一个整数

  4. 【C++】标准流与命名空间简介 ( Visual Studio 2019 中创建 C++ 项目 | iostream 标准流 | std 标准命名空间 | cout 控制台输出 )

    文章目录一、VisualStudio2019中创建C++项目二、C++代码编写1、iostream标准流2、std标准命名空间3、cout控制台输出4、代码示例一、VisualStudio2019中创建C++项目打开VisualStudio2019,选择"菜单栏/文件/新建/项目"选项,创建新项目;选择Windows平

  5. 【C++】面向对象编程引入 ( 面向过程编程 | 查看 iostream 依赖 | 面向对象编程 )

    文章目录一、面向过程编程二、查看iostream依赖三、面向对象编程一、面向过程编程给定圆的半径,求该圆的周长和面积;半径为rrr,周长就是2πr2\pir2πr,面积是πr2\pir^2πr2;使用面向过程的方法解决上述问题,只能是令程序顺序执行,如果要求多个圆的面积,则需要重复执行过程代码;代码示例://包含C++

  6. 手撕双链表

    >作者简介：დ旧言~，目前大一，现在学习Java，c，c++，Python等>座右铭：松树千年终是朽，槿花一日自为荣。>望小伙伴们点赞👍收藏✨加关注哟💕💕🌟前言前面我们已经学习了顺序表和单链表，顺序表可以存储动态的数据，但是一旦元素过少，而又要开辟空间，这样就造成空间的浪费，而单链表以节点为单位存储，不支持随机

  7. 旅游出行类APP如何找到策略优势，最大化流量红利

    刚刚结束了暑期出游，中秋国庆小长假马上到啦，出行计划又要安排起来了！多样化的出行方式为大家旅行带来极大的便利，同时，伴随互联网+模式的深化发展，各式各样的旅游出行类APP已经成长为旅行用户所依赖的一类工具。今天我们就来聊聊这类应用如何获利，如何开启商业化之路。旅游出行类APP现状疫情结束与政策扶持带动旅游业强势复苏随着

  8. 从金蝶云星空到赛意SMOM通过接口配置打通数据

    从金蝶云星空到赛意SMOM通过接口配置打通数据数据源平台:金蝶云星空金蝶K/3Cloud在总结百万家客户管理最佳实践的基础上，提供了标准的管理模式；通过标准的业务架构：多会计准则、多币别、多地点、多组织、多税制应用框架等，有效支持企业的运营管理；K/3Cloud提供了标准的业务建模：35种标准ERP领域模型、1046种

  9. ELK日志分析系统

    ELK概述是一套基于Elasticsearch(存储)、Logstash(过滤)、Kibana(前端展示)三个开源工具的日志收集、存储、检索和可视化的解决方案ELK可以帮助用户快速定位和分析应用程序的故障，监控应用程序的性能和安全性，以及提供丰富的数据分析和展示功能Elasticsearch(存储)是一个分布式搜索和分