layui框架的导航与面包屑导航实现-优快云博客

本文链接：https://blog.youkuaiyun.com/aqzengkuasheng/article/details/123155803

导航是依赖element模块的
所以要依赖加载模块:elememt
导航
水平导航 layui-nav
layui-nav-item 表示的是导航的子项
layui-this 表示当前被选中的项
layui-nav-child 表示是二级菜单
垂直导航 layui-nav layui-nav-tree
侧边导航 layui-nav layui-nav-tree layui-nav-side

	导航的主题颜色
	   layui-bg-颜色
	面包屑式导航
	 layui-breadcrumb
	 通过lay-separator改分隔符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui-v2.5.6/layui/css/layui.css"/>
		<script src="layui-v2.5.6/layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
		导航
		   水平导航 layui-nav
		     layui-nav-item 表示的是导航的子项
			 layui-this 表示当前被选中的项
			 layui-nav-child 表示是二级菜单
		垂直导航 layui-nav layui-nav-tree
		侧边导航 layui-nav layui-nav-tree layui-nav-side
		
		导航的主题颜色
		   layui-bg-颜色
		   
		面包屑式导航
		 layui-breadcrumb
		 通过lay-separator改分隔符
		 -->
		 <!-- 水平导航 layui-nav -->
<!-- 		<ul class="layui-nav">
			<li class="layui-nav-item"><a herf="">最新活动</li>
			<li class="layui-nav-item"><a herf="">产品</li>
			<li class="layui-nav-item layui-this"><a herf="">大数据</li>
			<li class="layui-nav-item">
				<a herf="">解决方案</a>
				<dl class="layui-nav-child">
					<dd><a href="">移动模块</a></dd>
					<dd><a href="">后台模块</a></dd>
					<dd><a href="">电商平台</a></dd>
				</dl>
			</li>
		</ul> -->
		
		
		<!-- 
		垂直导航 layui-nav-tree
		 -->
		 
		<!-- <ul class="layui-nav layui-nav-tree layui-nav-side">
		 	<li class="layui-nav-item">
				<a herf="">最新活动</a>
			</li>
		 	<li class="layui-nav-item">
				<a herf="">产品</a>
			</li>
		 	<li class="layui-nav-item">
				<a herf="">大数据</a>
			</li>
			
		 	<li class="layui-nav-item">
		 		<a herf="">解决方案</a>
		 		<dl class="layui-nav-child">
		 			<dd><a href="">移动模块</a></dd>
		 			<dd><a href="">后台模块</a></dd>
		 			<dd><a href="">电商平台</a></dd>
		 		</dl>
		 	</li>
		 </ul> -->
		 
		 <!-- 面包屑式的导航 -->
		 <span class="layui-breadcrumb" lay-separator="-">
			 <a href="">中国</a>
			 <a href="">湖南</a>
			 <a href="">长沙</a>
			 <a href="">邵阳</a>
		 </span>
		
	</body>
	
	<script type="text/javascript">
		layui.use('element',function(){
			// 导航依赖element模块
			var element=layui.element;
		});
	</script>
</html>

layui实现导航栏目