我们永远不能怪罪任何帮了倒忙的志愿者。他们是一心对你好，别让他们心凉。相信自已。不要妄加评判自已，也不会把自已交给别人评判，更不会贬低自已。
本文实例为大家分享了layui水平导航菜单的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航与面包屑</title>
<link rel="stylesheet" rel="nofollow noopener noreferrer" href="layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title">
<legend>水平导航菜单</legend>
</fieldset>
<ul class="layui-nav">
<li class="layui-nav-item"><a rel="nofollow noopener noreferrer" href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a rel="nofollow noopener noreferrer" href="javascript：;">产品</a>
<dl class="layui-nav-child">
<dd><a rel="nofollow noopener noreferrer" href="">选项1</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="">选项2</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a rel="nofollow noopener noreferrer" href="">大数据</a></li>
<li class="layui-nav-item">
<a rel="nofollow noopener noreferrer" href="javascript：;">解决方案</a>
<dl class="layui-nav-child">
<dd><a rel="nofollow noopener noreferrer" href="">移动模块</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="">后台模版</a></dd>
<dd class="layui-this"><a rel="nofollow noopener noreferrer" href="">选中项</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a rel="nofollow noopener noreferrer" href="">社区</a></li>
</ul>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>垂直导航菜单</legend>
</fieldset>
<ul class="layui-nav layui-nav-tree" lay-filter="demo">
<li class="layui-nav-item layui-nav-itemed">
<a rel="nofollow noopener noreferrer" href="javascript：;">默认展开</a>
<dl class="layui-nav-child">
<dd><a rel="nofollow noopener noreferrer" href="javascript：;">选项一</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="javascript：;">选项二</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="javascript：;">选项三</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="">跳转项</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a rel="nofollow noopener noreferrer" href="javascript：;">解决方案</a>
<dl class="layui-nav-child">
<dd><a rel="nofollow noopener noreferrer" href="">移动模块</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="">后台模版</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a rel="nofollow noopener noreferrer" href="">云市场</a></li>
<li class="layui-nav-item"><a rel="nofollow noopener noreferrer" href="">社区</a></li>
</ul>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>侧边固定导航菜单</legend>
</fieldset>
<ul class="layui-nav layui-nav-tree site-demo-nav" lay-filter="demo">
<li class="layui-nav-item layui-nav-itemed">
<a rel="nofollow noopener noreferrer" href="javascript：;">默认展开</a>
<dl class="layui-nav-child">
<dd><a rel="nofollow noopener noreferrer" href="javascript：;">选项一</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="javascript：;">选项二</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="javascript：;">选项三</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="">跳转项</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a rel="nofollow noopener noreferrer" href="javascript：;">解决方案</a>
<dl class="layui-nav-child">
<dd><a rel="nofollow noopener noreferrer" href="">移动模块</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="">后台模版</a></dd>
<dd><a rel="nofollow noopener noreferrer" href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a rel="nofollow noopener noreferrer" href="">云市场</a></li>
<li class="layui-nav-item"><a rel="nofollow noopener noreferrer" href="">社区</a></li>
</ul>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>默认面包屑</legend>
</fieldset>
<span class="layui-breadcrumb">
<a rel="nofollow noopener noreferrer" href="/">首页</a>
<a rel="nofollow noopener noreferrer" href="/demo/">演示</a>
<a><cite>导航元素</cite></a>
</span>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>自定义分隔符的面包屑</legend>
</fieldset>
<span class="layui-breadcrumb" lay-separator="—">
<a rel="nofollow noopener noreferrer" href="">首页</a>
<a rel="nofollow noopener noreferrer" href="">国际新闻</a>
<a rel="nofollow noopener noreferrer" href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>还可以用于门户频道的面包屑</legend>
</fieldset>
<span class="layui-breadcrumb" lay-separator="|">
<a rel="nofollow noopener noreferrer" href="">娱乐</a>
<a rel="nofollow noopener noreferrer" href="">八卦</a>
<a rel="nofollow noopener noreferrer" href="">体育</a>
<a rel="nofollow noopener noreferrer" href="">搞笑</a>
<a rel="nofollow noopener noreferrer" href="">视频</a>
<a rel="nofollow noopener noreferrer" href="">游戏</a>
<a rel="nofollow noopener noreferrer" href="">综艺</a>
</span>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
layui.use('element', function(){
var element = layui.element(); //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function(elem){
//console.log(elem)
layer.msg(elem.text());
});
});
</script>
</body>
</html>
效果图：
官网导航栏
本文layui导航栏实现代码到此结束。人的一生是漫长的，但关键的只有几步。小编再次感谢大家对我们的支持！
.png)
