layui学习-页面导航
layui学习-页面导航
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
<body>
<div style="background-color: #393D49">
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-md12">
<ul class="layui-nav" lay-filter="">
<a href="javascript:;" style="position: relative; display: inline-block;*display: inline;*zoom: 1; vertical-align: middle; line-height: 60px;color: #fff;margin: 0px,20px;font-size: 18px;">XXX系统</a>
<li class="layui-nav-item layui-this"><a href=""><i class="layui-icon layui-icon-home"></i> 首页</a></li>
<li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-search"></i> 查询系统</a></li>
<li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-group"></i> 人事系统</a></li>
<li class="layui-nav-item" style="position: absolute;right: 10px">
<a href="javascript:;"><i class="layui-icon layui-icon-user"></i> 管理员</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">基本信息</a></dd>
<dd><a href="">退了吧</a></dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
</script>
</body>
</html>效果
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-07-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
