效果
代碼
<!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="http://t.cn/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">
<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>
<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 style="padding: 15px;">
</div>
</div>
<div class="layui-footer">
<!-- 底部固定區域 -->
© our.com - 底部固定區域
</div>
</div>
<script src="js/layui.all.js" charset="utf-8"></script>
<script>
</script>
</body>
</html>
需要的資源文件layui.css和layui.all.js可在官網下載https://www.layui.com/
layui 一個含垂直導航欄的frame例子
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
layer.open獲取彈出層的input框的值
使用top.$('#txtReason').val();獲取值； //不通過 function unAuditData(id) { parent.layer.open({ type: 1,