006-导航相关

最新推荐文章于 2023-01-31 01:04:21 发布
最新推荐文章于 2023-01-31 01:04:21 发布
阅读量139 收藏
点赞数
分类专栏： layui学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/aihiao/article/details/113029387
版权
本文详细介绍了layui框架中导航的使用方法，包括水平、垂直、侧边导航的实现，以及导航的主题和可选属性。同时，还讲解了面包屑的创建，包括自定义分隔符和实例展示。所有示例代码都包含在内，帮助开发者快速理解和应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 导航一般指页面引导性频道集合, 多以菜单的形式呈现, 可应用于头部和侧边, 是整个网页画龙点晴般的存在。面包屑结构简单, 支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的, 但一些交互操作, 如呼出二级菜单等, 需借助element模块才能使用。

2. 导航依赖加载模块: element。

3. 导航使用

名称

组合

水平导航

class="layui-nav"

垂直导航

class="layui-nav layui-nav-tree"

侧边导航

class="layui-nav layui-nav-tree layui-nav-side"

导航项

class="layui-nav-item"

导航二级菜单

class="layui-nav-child"

指向当前页面分类

class="layui-nav-item layui-this"

展开垂直菜单

class="layui-nav-item layui-nav-itemed"

图片导航

class="layui-nav-img"

4. 导航主题

主题

组合

水平导航(藏青)

class="layui-nav layui-bg-cyan"

水平导航(墨绿)

class="layui-nav layui-bg-green"

水平导航(艳蓝)

class="layui-nav layui-bg-blue"

垂直导航(藏青)

class="layui-nav layui-nav-tree layui-bg-cyan"

5. 导航可选属性

5.1. 对导航元素结构设定可选属性, 可让导航菜单项达到不同效果。

6. 面包屑

6.1. 使用class="layui-breadcrumb"来定义面包屑。

6.2. 面包屑中还可以通过设置属性lay-separator="|"来自定义分隔符。

6.3. 实例

<span class="layui-breadcrumb">
	<a href="">首页</a>
  	<a href="">国际新闻</a>
  	<a href="">亚太地区</a>
  	<a><cite>正文</cite></a>
</span><br /><br />

<span class="layui-breadcrumb" lay-separator="|">
  	<a href="">娱乐</a>
  	<a href="">八卦</a>
  	<a href="">体育</a>
  	<a href="">搞笑</a>
  	<a href="">视频</a>
  	<a href="">游戏</a>
  	<a href="">综艺</a>
</span>

7. 例子

7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航 - layui</title>

		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<ul class="layui-nav layui-bg-cyan">
	  		<li class="layui-nav-item"><a href="http://www.baidu.com">最新活动</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><br /><br />

		<ul class="layui-nav layui-bg-green">
	  		<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><br /><br />

		<ul class="layui-nav layui-bg-blue">
	  		<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><br /><br />

		<ul class="layui-nav layui-nav-tree">
		  	<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="">跳转</a></dd>
			    </dl>
		  	</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>
		  	<li class="layui-nav-item"><a href="">大数据</a></li>
		</ul><br /><br />

		<ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-shrink="all">
		  	<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="">跳转</a></dd>
			    </dl>
		  	</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>
		  	<li class="layui-nav-item"><a href="">大数据</a></li>
		</ul><br /><br />

		<span class="layui-breadcrumb">
	  		<a href="">首页</a>
		  	<a href="">国际新闻</a>
		  	<a href="">亚太地区</a>
		  	<a><cite>正文</cite></a>
		</span><br /><br />

		<span class="layui-breadcrumb" lay-separator="|">
		  	<a href="">娱乐</a>
		  	<a href="">八卦</a>
		  	<a href="">体育</a>
		  	<a href="">搞笑</a>
		  	<a href="">视频</a>
		  	<a href="">游戏</a>
		  	<a href="">综艺</a>
		</span>

		<script type="text/javascript">
			layui.use('element', function(){
  				var element = layui.element;

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

7.2. 效果图

8. 侧边导航例子

8.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>侧边导航 - layui</title>

		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>
	</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="">跳转</a></dd>
			    </dl>
		  	</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>
		  	<li class="layui-nav-item"><a href="">大数据</a></li>
		</ul>
		
		<script type="text/javascript">
			layui.use('element', function(){
  				var element = layui.element;

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

8.2. 效果图

Layui-导航
chen2745213271的博客
12-09 5726
这次介绍layui里面的导航栏的样式，首先导航栏的功能依附于element模块，所以想要使用layui的导航栏功能就需要启用该模块，其次是layui的css样式，有了这两样layui里的导航栏就可以正常的使用了，下面我将介绍如何启用模块和css样式的各种用法 首先启用模块，如下图 下面就是HTML的部分了 首先是水平导航栏，在外层使用ul标签并使用class名layui-nav作为导航栏的容器，接着下面的li子标签需要使用class名layui-nav-item，其次layu...
使用layui实现的水平导航动态操作tab项以及优化鼠标右键功能
Trenryan的博客
09-14 4781
基于之前几篇博客优化layui的tab鼠标右键功能（参考博客https://blog.youkuaiyun.com/nb7474/article/details/79413460/），使用layui实现的水平导航动态操作tab项，本篇博客主要讲的是：新增基于鼠标焦点（mouseover事件）的鼠标右键功能（包括刷新，关闭其他，关闭右边所有，关闭所有） 该篇文章主要优化tab的鼠标右键事件，之前看了几篇...
layui breadcrumb append a元素 lay-separator 失效
Simlier的博客
03-04 2546
今天在用layui做一个demo时，发现一个问题。 面包屑导航代码 &lt;span class="layui-breadcrumb" lay-separator="/" lay-filter="bread"&gt; &lt;a href=""&gt;娱乐&lt;/a&gt; &lt;a href=""&gt;八卦&am
layui水平导航用法大全
u013931283的博客
12-30 2175
转载自:http://www.shagua.wiki/project/3?p=87 点击此处,直接跳转 转载自:http://www.shagua.wiki/project/3?p=87 点击此处,直接跳转
layui框架学习（4：导航）
gc_2299的博客
01-31 3042
学习并记录layui框架中页面元素的导航相关内容。
Lotus Domino BS开发----熟悉并使用Lotus的各种设计元素--006--大纲.ppt
02-26
大纲作为一种强大的组织工具，为用户提供了按层次结构展示信息的能力，可以看作是一个可交互的目录系统，它在大型应用或文档库中扮演着导航和组织信息的角色。 大纲的核心作用是为用户提供一个直观、易用的可视化...
Case006-web折叠菜单交互.zip
10-03
`.rp`文件通常与RapidPro或其它流程图、原型设计工具相关，可能是这个案例的设计文件。 折叠菜单的原理是通过JavaScript、CSS和HTML来实现的。首先，HTML负责构建菜单的基础结构，包括各个菜单项和嵌套的子菜单。...
BDS-JSCS-2021-006 北斗卫星导航系统民用全球信号多模多频导航模块产品技术要求和测试方法.pdf
最新发布
11-03
《北斗卫星导航系统民用全球信号多模多频导航模块产品技术要求和测试方法》是针对北斗导航系统的民用产品制定的一套详细的技术规范和检测标准。该文档由中国的卫星导航系统管理办公室发布，旨在确保北斗导航模块产品...
BDS-JSCS-2021-004 北斗卫星导航系统民用全球信号多模多频高精度天线产品技术要求和测试方法.pdf
11-03
这份文档由中国卫星导航系统管理办公室于2021年发布，旨在确保北斗相关产品的性能稳定和质量可靠。 1. **范围**：该标准主要适用于设计、生产和检验用于接收北斗导航系统民用全球信号的多模多频高精度天线产品，...
javascript经典特效---导航条显示完全版2.rar
12-28
标题中的"javascript经典特效---导航条显示完全版2.rar"表明这是一个关于JavaScript编程的资源，特别是与实现导航条效果相关的代码或示例。导航条在网页设计中扮演着至关重要的角色，它通常位于页面顶部，提供网站...
layui的引入地图
Mr_Yanghao的博客
11-05 7071
http://www.xiaochengxu.com.cn/content/plugin/chooselocation/index.html
layui官方文档保存
xc9711的博客
09-25 2956
前言 在layui官网看到了它官网即将停运，所以我决定将它的文档进行复制保存下来 目录页 基础说明 开始使用 开始使用 - 入门指南 layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它
layui水平导航条三级
weixin_30883311的博客
03-19 1310
需求 需要做一个顶部的水平导航条，有三级，展开的时候二级和三级一起展开，结果如图： 效果 一级菜单 二级标题 三级菜单 三级菜单 二级标题 三级菜单 三级菜单 一级菜单 二级标题 三级菜单 三级菜单 三级菜单 二级标题 三级菜单 我是独特的三级菜单 三级菜...
layui目录随着导航栏点击定位
long_24k_os的博客
11-12 1815
layui目录随着导航栏点击定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui目录随着导航栏点击定位</title> <link rel="stylesheet" href="https://heerey525...
《layui宇宙版教程》：导航
来吧，学习！
08-16 402
1.9 导航 导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。面包屑结构简单，支持自定义分隔符。 注意：千万不要忘了加载element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如弹出二级菜单等，需借助element模块才能使用。 1.9.1 水平导航 测试代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
layui组件相关学习
特立独行的博客
03-24 1974
Layui相关组件学习 狂神是一个很好的学习平台 Layui相关组件学习官网 1.选项卡 说明：在标签中使用class=layui-tab可定义该标签为一个选项卡，lay-allowClose="true"表示该选项卡可以被删除，使用layui-tab-item可以设置点击该选项卡时的内容显示。 <div class="layui-tab" lay-allowClose="true"> <ul class="layui-tab-title"> <li class=
026-弹层组件
aihiao的专栏
01-25 1422
1. 弹层组件加载名称: layer。 2. layer至今仍作为layui的代表作, 甚至让很多人都误以为layui = layer ui, 所以再次强调layer只是作为layui的一个弹层模块, 由于其用户基数较大, 所以至今仍把她作为独立组件来维护。 3. 使用场景 3.1. 由于layer可以独立使用, 也可以通过Layui模块化使用。 场景 用前准备 调用方式 1. 作为独立组件使用 如果你只是
002-layui颜色
aihiao的专栏
01-22 1200
1. 常用主色 1.1. layui主要是以象征包容的墨绿作为主色调, 由于它给人以深沉感, 所以通常会以浅黑色的作为其陪衬, 又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳, 整体让人清新自然, 愈发耐看。 2. 场景色 2.1. 事实上, layui并非不敢去尝试一些亮丽的颜色, 但许多情况下一个它可能并不是那么合适, 所以我们把这些颜色归为"场景色", 即按照实际场景来呈现对应的颜色, 比如你想给人以警觉感, 可以尝试用上面的红色。他们一般会出现在layui的按钮、提示和修饰性元素, 以及一
001-引入layui和layui.code方法
aihiao的专栏
01-17 969
1. layui官方网址: https://www.layui.com/。 2. 点击立即下载按钮, 下载最新版的layui。 3. 下载完成layui-v2.5.7.zip。 4. 解压缩layui-v2.5.7.zip, 查看layui目录。 5. layui目录说明。 6. 引入layui 6.1. 将解压后完整的layui目录部署到你的项目目录, 你只需要引入下述两个文件: <link rel="stylesheet" type="text/css" hre
V-SUN GPM-006 GPS模块技术规格与操作手册
"GPS模块GPM-006是一款由V-...GPS模块GPM-006凭借其高效的SiRF Star III芯片、V-SUN专有算法、紧凑的设计和出色的灵敏度，展示了在GPS接收领域的先进技术和实用性，是开发人员在构建定位相关产品时值得考虑的解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值