本文实例为大家分享了layui水平导航菜单的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>导航与面包屑& lt;/title>
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/layui/css/layui.css "比;
& lt;/head>
& lt; body>
& lt;自定义字段类=" layui-elem-field layui-field-title”比;
& lt; legend>水平导航菜单& lt;/legend>
& lt;/fieldset>
& lt; ul类=發ayui-nav”比;
& lt;李类=" layui-nav-item "祝辞& lt; a href="祝辞最新活动& lt;/a> & lt;/li>
& lt;李class=" layui-nav-item layui-this”比;
& lt; a href=" javascript:,“在产品& lt;/a>
& lt; dl类=發ayui-nav-child”比;
& lt; dd> & lt; a href="祝辞选项1 & lt;/a> & lt;/dd>
& lt; dd> & lt; a href="祝辞选项2 & lt;/a> & lt;/dd>
& lt; dd> & lt; a href="祝辞选项3 & lt;/a> & lt;/dd>
& lt;/dl>
& lt;/li>
& lt;李类=" layui-nav-item "祝辞& lt; a href="祝辞大数据& lt;/a> & lt;/li>
& lt;李类=發ayui-nav-item”比;
& lt; a href=" javascript:,“在解决方案& lt;/a>
& lt; dl类=發ayui-nav-child”比;
& lt; dd> & lt; a href="在移动模块& lt;/a> & lt;/dd>
& lt; dd> & lt; a href="祝辞后台模版& lt;/a> & lt;/dd>
& lt; dd类=" layui-this "祝辞& lt; a href="祝辞选中项& lt;/a> & lt;/dd>
& lt; dd> & lt; a href="在电商平台& lt;/a> & lt;/dd>
& lt;/dl>
& lt;/li>
& lt;李类=" layui-nav-item "祝辞& lt; a href="祝辞社区& lt;/a> & lt;/li>
& lt;/ul>
& lt;自定义字段类=" layui-elem-field layui-field-title”比;
& lt; legend>垂直导航菜单& lt;/legend>
& lt;/fieldset>
& lt; ul类=" layui-nav layui-nav-tree lay-filter”=把菔尽北?
& lt;李class=" layui-nav-item layui-nav-itemed”比;
& lt; a href=" javascript:,“在默认展开& lt;/a>
& lt; dl类=發ayui-nav-child”比;
& lt; dd> & lt; a href=" javascript:,“在选项一& lt;/a> & lt;/dd>
& lt; dd> & lt; a href=" javascript:,“在选项二& lt;/a> & lt;/dd>
& lt; dd> & lt; a href=" javascript:,“在选项三& lt;/a> & lt;/dd>
& lt; dd> & lt; a href="祝辞跳转项& lt;/a> & lt;/dd>
& lt;/dl>
& lt;/li>
& lt;李类=發ayui-nav-item”比;
& lt; a href=" javascript:,“在解决方案& lt;/a>
& lt; dl类=發ayui-nav-child”比;
& lt; dd> & lt; a href="在移动模块& lt;/a> & lt;/dd>
& lt; dd> & lt; a href="祝辞后台模版& lt;/a> & lt;/dd>
& lt; dd> & lt; a href="在电商平台& lt;/a> & lt;/dd>
& lt;/dl>
& lt;/li>
& lt;李类=" layui-nav-item "祝辞& lt; a href="祝辞云市场& lt;/a> & lt;/li>
& lt;李类=" layui-nav-item "祝辞& lt; a href="祝辞社区& lt;/a> & lt;/li>
& lt;/ul>
& lt;自定义字段类=" layui-elem-field layui-field-title”比;
& lt; legend>侧边固定导航菜单& lt;/legend>
& lt;/fieldset>
& lt; ul类=" layui-nav layui-nav-tree site-demo-nav”lay-filter=把菔尽北?
& lt;李class=" layui-nav-item layui-nav-itemed”比;
& lt; a href=" javascript:,“在默认展开& lt;/a>
& lt; dl类=發ayui-nav-child”比;
& lt; dd> & lt; a href=" javascript:,“在选项一& lt;/a> & lt;/dd>
& lt; dd> & lt; a href=" javascript:,“在选项二& lt;/a> & lt;/dd>
& lt; dd> & lt; a href=" javascript:,“在选项三& lt;/a> & lt;/dd>
& lt; dd> & lt; a href="祝辞跳转项& lt;/a> & lt;/dd>
& lt;/dl>
& lt;/li>
& lt;李类=發ayui-nav-item”比;
& lt; a href=" javascript:,“在解决方案& lt;/a>
& lt; dl类=發ayui-nav-child”比;
& lt; dd> & lt; a href="在移动模块& lt;/a> & lt;/dd>
& lt; dd> & lt; a href="祝辞后台模版& lt;/a> & lt;/dd>
& lt; dd> & lt; a href="在电商平台& lt;/a> & lt;/dd>
& lt;/dl>
& lt;/li>
& lt;李类=" layui-nav-item "祝辞& lt; a href="祝辞云市场& lt;/a> & lt;/li>
& lt;李类=" layui-nav-item "祝辞& lt; a href="祝辞社区& lt;/a> & lt;/li>
& lt;/ul>
& lt;自定义字段类=" layui-elem-field layui-field-title”比;
& lt; legend>默认面包屑& lt;/legend>
& lt;/fieldset>
& lt;跨类=發ayui-breadcrumb”比;
& lt; a href=" https://www.yisu.com/"祝辞首页& lt;/a>
& lt; a href=" https://www.yisu.com/demo/"祝辞演示& lt;/a>
& lt; a> & lt; cite>导航元素& lt;/cite> & lt;/a>
& lt;/span>
& lt;自定义字段类=" layui-elem-field layui-field-title”比;
& lt; legend>自定义分隔符的面包屑& lt;/legend>
& lt;/fieldset>
& lt;跨类=" layui-breadcrumb " lay-separator=?”比;
& lt; a href="祝辞首页& lt;/a>
& lt; a href="祝辞国际新闻& lt;/a>
& lt; a href="祝辞亚太地区& lt;/a>
& lt; a> & lt; cite>正文& lt;/cite> & lt;/a>
& lt;/span>
& lt;自定义字段类=" layui-elem-field layui-field-title”比;
& lt; legend>还可以用于门户频道的面包屑& lt;/legend>
& lt;/fieldset>
& lt;跨类=" layui-breadcrumb " lay-separator=皘”比;
& lt; a href="祝辞娱乐& lt;/a>
& lt; a href="祝辞八卦& lt;/a>
& lt; a href="祝辞体育& lt;/a>
& lt; a href="祝辞搞笑& lt;/a>
& lt; a href="祝辞视频& lt;/a>
& lt; a href="祝辞游戏& lt;/a>
& lt; a href="祝辞综艺& lt;/a>
& lt;/span>
& lt;脚本src=" https://www.yisu.com/zixun/layui/layui.js " charset=皍tf - 8”祝辞& lt;/script>
& lt; script>
layui。使用(“元素”,函数(){
var=layui.element元素();//导航的悬停效果,二级菜单等功能,需要依赖元素模块//监听导航点击
element.on (nav(演示),函数(elem) {//console.log (elem)
layer.msg (elem.text ());
});
});
& lt;/script>
& lt;/body>
& lt;/html>
