layui⼀个含垂直导航栏的frame例⼦效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>frame</title>
<link rel="stylesheet" href="css/layui.css"  media="all">
<style type="text/css">
.layui-btn+.layui-btn {
margin-left: 0px;
}
</style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">XX平台</div>
<!-- 头部区域（可配合layui已有的⽔平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">项⽬分析</a></li>
<li class="layui-nav-item"><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="">管理1</a></dd>
<dd><a href="">管理2</a></dd>
<dd><a href="">管理3</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="t/RCzsdCq" class="layui-nav-img">
⽤户CAN
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree"  lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">管理1</a>
<dl class="layui-nav-child">
<dd class="layui-this"><a lay-href="createProject">清单1</a></dd>
<dd><a href="javascript:;">清单2</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-tree">
<a href="javascript:;">管理2</a>
<dl class="layui-nav-child">
<dl class="layui-nav-child">
<dd><a href="javascript:;">清单1</a></dd>                        <dd><a href="javascript:;">清单2</a></dd>                        <dd><a href="javascript:;">清单3</a></dd>                    </dl>
</li>
<li class="layui-nav-item layui-nav-tree">
<a href="javascript:;">管理3</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">清单1</a></dd>                        <dd><a href="javascript:;">清单2</a></dd>                        <dd><a href="javascript:;">清单3</a></dd>                        <dd><a href="javascript:;">清单4</a></dd>                    </dl>
</li>
<li class="layui-nav-item layui-nav-tree">
<a href="javascript:;">管理4</a>
js导航栏下拉菜单<dl class="layui-nav-child">
<dd><a href="javascript:;">清单1</a></dd>                        <dd><a href="javascript:;">清单2</a></dd>                    </dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div >
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© our - 底部固定区域
</div>
</div>
<script src="js/layui.all.js" charset="utf-8"></script>
<script>
</script>
</body>
</html>
需要的资源⽂件layui.css和layui.all.js可在官⽹下载

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。