layui简洁后台管理系统菜单frame效果代码
代码语言:html
所属分类:菜单导航
代码描述:layui简洁后台管理系统菜单frame效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/layui.css"> <style> /* 预定义整体布局配色,你可以修改这里的色值为自己喜欢的颜色 */ .layui-layout-body{ background-color: #f0f2f5; } .layui-layout-admin .layui-header{ background-color: #fff; } .layui-layout-admin .layui-side, .layui-nav, .custom-admin .layui-nav-tree .layui-nav-item.layui-nav-itemed > a, .layui-nav-tree .layui-nav-item a:hover{ background-color: #fff; color: black !important; } .custom-admin .layui-nav-child, .custom-admin .layui-nav-child a{ background-color: #f5f5f5!important; } .custom-admin .layui-nav-child dd.layui-this a{ background-color: #177ce3; background-repeat: repeat-y; background-image: -moz-linear-gradient(left,#29adeb,#177ce3); background-image: -webkit-linear-gradient(left,#29adeb,#177ce3); background-image: -o-linear-gradient(left,#29adeb,#177ce3); background-image: linear-gradient(left,#29adeb,#177ce3); } .custom-admin .layui-nav-child dd.layui-this a:hover{ color: rgba(255,255,255,.99); } .custom-header .layui-nav, .custom-header .layui-nav .layui-nav-item a{ color: rgba(0,0,0,.8); } .custom-admin .layui-nav-tree .layui-nav-item a{ color: #222; transition: all .3s; } .custom-admin .layui-nav-tree .layui-nav-item a:hover, .custom-admin .layui-nav-tree .layui-nav-item a:hover .layui-nav-more:before, .custom-admin .layui-nav-tree .layui-nav-itemed > a .layui-nav-more:before{ color: #111; } .custom-admin .layui-nav-tree .layui-nav-item a > i{ margin-right: 5px; } .custom-admin .layui-nav-tree .layui-nav-item a > em{ font-style: normal; } .layui-layout-admin .layui-footer{ background-color: #e8eaed; } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ .layui-tank .layui-card::-webkit-scrollbar { width: 3px; height: 3px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ .layui-tank .layui-card::-webkit-scrollbar-track { border-radius: 3px; background-color: #F5F5F5; } /*定义滑块 内阴影+圆角*/ .layui-tank .layui-card::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #ccc; } .tkbtnfxd{ background: #e8e8e8; border-top: 1px #ddd solid; position: fixed; bottom: 0; width: 96%; text-align: right; padding: 2%; z-index: 100; } .tkbtnfxd .layui-btn+.layui-btn{ margin-right: 10px; } /*-----------------弹框样式---------------------*/ .float-left{ float: left;} .float-right{ float: right;} /*-------------面包屑导航--------------*/ .mianb{ min-height: 34px; overflow: hidden; margin-bottom: 15px; } .mianb .mblf{ line-height: 34px; float: left; } .mianb .mblf i.layui-icon{ color: #999; float: left; margin-right: 8px; } .mianb .mblf p{ color: #666; } .mianb .mblf p span{ color: #333;} .mianb .mbrt{ float: right; text-align: right; } .zht span{ margin: 0 10px; } /*-----------分页样式-------------*/ #page{ padding-right: 20px; text-align: right; } .layui-table thead tr{ background-color: #f2f2f2; color: #222; } .col-red{ color: #ef5350!important; } .col-blue{ color: #0094d1!important;} .col-green{ color: #0ab3ab!important;} .col-hui{ color: #666!important;} /* 折叠边栏 */ .layui-layout.fold-side-bar .layui-side.custom-admin, .layui-layout.fold-side-bar .layui-side.custom-admin .layui-nav-tree{ width: 60px; } .layui-layout.fold-side-bar .layui-side.custom-admin .layui-side-scroll{ width: 80px; } .layui-layout.fold-side-bar .custom-header .layui-nav.layui-layout-left, .layui-layout.fold-side-bar .layui-body, .layui-layout.fold-side-bar .layui-footer{ left: 60px; } .fold-side-bar .custom-admin .custom-logo img{ margin-left: -20px; } .fold-side-bar .layui-side.custom-admin .layui-nav-more, .fold-side-bar .custom-admin .layui-nav-item a > em, .fold-side-bar .custom-admin .custom-logo h1, .fold-side-bar .layui-side.custom-admin .layui-nav-child{ display: none; } /* 布局样式重定义 */ html, body , .app-container{ height: 100%; } .layui-layout{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .app-container{ position: absolute; top: 0; left:0; right: 0; bottom: 0; margin:0; } .app-container .layui-tab-content{ position: absolute; top: 0px; bottom: 0; left: 0; right: 0; padding: 0; overflow: hidden; } .app-container .layui-tab-content .layui-tab-item, .app-container .layui-tab-item > iframe{ width: 100%; height: 100%; } .custom-header{ height: 50px; } .custom-tab{ padding: 0 20px; background-color: #fff; box-shadow: rgba(0, 21, 41, 0.08) 0px 1px 4px; border:none; border-top:1px solid #f6f6f6; z-index: 999; } .layui-tab-title.custom-tab .layui-this{ background-color: #f0f4fb; } .layui-tab-title.custom-tab .layui-this:after{ border: none; height: 3px; background-color: #177ce3; background-repeat: repeat-y; background-image: -moz-linear-gradient(left,#29adeb,#177ce3); background-image: -webkit-linear-gradient(left,#29adeb,#177ce3); background-image: -o-linear-gradient(left,#29adeb,#177ce3); background-image: linear-gradient(left,#29adeb,#177ce3); } .layui-layout-admin .layui-side.custom-admin, .layui-layout-admin .layui-side.custom-admin .layui-nav-tree{ width: 220px; } .layui-layout-admin .layui-side.custom-admin .layui-side-scroll{ width: 220px; } .layui-body, .layui-layout-admin .layui-footer, .layui-layout-admin .custom-header .layui-nav.layui-layout-left{ left: 220px; } .layui-layout-admin .layui-side.custom-admin{ top: 0; z-index: 1001; -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); box-shadow: 2px 0 6px rgba(0,21,41,.35); } .custom-header .layui-nav .layui-nav-item{ line-height: 50px; } .custom-header .layui-nav-child{ top: 55px; } .custom-admin .layui-nav-itemed .layui-nav-child dd a{ padding-left: 43px; } .layui-layout-admin .layui-body{ top: 50px; } .layui-layout-admin .layui-footer{ border-top: 1px solid #dfdfdf; } .layui-layout-admin .layui-footer p{ color: rgba(0,0,0,.45); text-align: right; } .layui-side.custom-admin, .layui-body, .custom-header, .custom-header .layui-nav.layui-layout-left, .layui-footer{ transition: all .3s; -webkit-transition: all .3s; } .datexians{ position: absolute; left: 276px; line-height: 50px; } .fold-side-bar .datexians{ left: 116px; } @media screen and (max-width: 992px){ .layui-layout-admin .layui-side.custom-admin { transform: translate3d(-245px,0,0); -webkit-transform: translate3d(-245px,0,0); } .layui-body, .layui-layout-admin .layui-footer, .layui-layout-admin .custom-header .layui-nav.layui-layout-left{ left: 0; } .datexians{ left: 56px;} .fold-side-bar-xs .layui-side.custom-admin{ -webkit-transform: translate(0,0,0); transform: translate3d(0,0,0); } .fold-side-bar-xs .layui-body, .fold-side-bar-xs .layui-footer, .fold-side-bar-xs .custom-header{ transform: translate3d(220px,0,0); -webkit-transform: translate3d(220px,0,0); } } .custom-header .layui-nav .layui-nav-more, .custom-admin .layui-nav .layui-nav-more{ width: 25px; top: 0; border:none; overflow: visible; margin-top: 0; } .custom-header .layui-nav .layui-nav-more{ top: 0; right: -10px; } .custom-header .layui-nav .slide-sidebar a.icon-font{ padding: 0; color: #2c2e2f; } .custom-header .layui-nav .slide-sidebar a.icon-font > i{ font-size: 18px; } .custom-header .layui-nav .layui-nav-more:before, .custom-admin .layui-nav .layui-nav-more:before, .custom-admin .layui-nav-itemed .layui-nav-more:before{ font-family: layui-icon!important; font-size: 11px; color: #6d747a; } .custom-header .layui-nav .layui-nav-more:before, .custom-admin .layui-nav .layui-nav-more:before, .custom-admin .layui-nav-itemed .layui-nav-more:before{ position: absolute; left: 0; top: 0; } .custom-header .layui-nav .layui-nav-more:before, .custom-admin .layui-nav .layui-nav-more:before{ content: '\e61a'; } .custom-admin .layui-nav-itemed > a .layui-nav-more:before{ content: '\e619'; } .custom-logo{ height: 50px; line-height: 50px; color: #fff; background-color: #fff; vertical-align: middle; text-align: center; border-bottom: 1px #eee solid; } .custom-logo img{ height: 32px; } .custom-logo h1{ display: inline; margin: 0 20px 0 0px; font-size: 20px; vertical-align: middle; color: #333; font-weight: bold; } .layui-nav-bar{ height: 3px; background-color: #177ce3; background-repeat: repeat-y; background-image: -moz-linear-gradient(left,#29adeb,#177ce3); background-image: -webkit-linear-gradient(left,#29adeb,#177ce3); background-image: -o-linear-gradient(left,#29adeb,#177ce3); background-image: linear-gradient(left,#29adeb,#177ce3); } .custom-header .layui-nav-bar{ top: 0!important; } .layui-nav-tree .layui-nav-bar{ display: none; } .custom-header .layui-tab-title li .custom-header .layui-tab-title li.layui-this .layui-tab-close{ color: #000; } .mobile-mask{ position: fixed; display: none; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.3); z-index: 1000; } </style> <title>管理后台</title> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header custom-header"> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item slide-sidebar" lay-unselect> <a href="javascript:;" class="icon-font"><i class="fa fa-align-right"></i></a> </li> </ul> <p class="datexians">河南企业信息咨询有限公司</p> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;">BieJun</a> <dl class="layui-nav-child"> <dd><a href="">帮助中心</a></dd> <dd><a href="login.html">退出</a></dd> </dl> </li> </ul> </div> <div class="layui-side custom-admin"> <div class="layui-side-scroll"> <div class="custom-logo"> <img src="//repo.bfw.wiki/bfwrepo/icon/5d834e33872ba.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90" alt=""/> <h1>管理系统</.........完整代码请登录后点击上方下载按钮下载查看
网友评论0