index.gif
html 代码的布局分为top 和 content
content 分为 左侧的 sidebar 和 main 这两部分内容
- 代码 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="../../static/css/homepage.css">
<link rel="stylesheet" type="text/css" href="../../static/css/icon/iconfont.css">
<script src="../../static/JQuery3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="cantian">
<div class="top">
<div class="top-title">
<img src="../../static/img/demo.png">
<span>System manager</span>
</div>
<div class="top-user">
<img id="user-img" class="log-img dropdown" src="../../static/img/user1.jpg">
<span class="log-name">Admin</span>
<span><i class="iconfont" style="font-size:25px;"></i></span>
</div>
<div class="top-drop-menu dropdown" id="dropmenu">
<div class="profile-info">
<h4 class="username">Scott White</h4>
</div>
<ul class="action">
<li class="litest">
<a href="#">
Profile
</a>
</li>
<li>
<a href="#">
<span class="badge badge-danger pull-right">5</span>
My Inbox
</a>
</li>
<li>
<a href="#">
Setting
</a>
</li>
<li>
<a href="#">
Logout
</a>
</li>
</ul>
</div>
</div>
<div class="content">
<div id="mySidebar" class="sidebar" >
<a id="user-a" href="#"><span><i class="iconfont"></i><span class="icon-text">用户</span></span></a><br>
<a id="role-a" href="#"><span><i class="iconfont"></i><span class="icon-text">角色</span></span></a>
</a><br>
<a id="power-a" href="#"><span><i class="iconfont"></i><span class="icon-text">权限</span></span></a><br>
<a href="#"><span><i class="iconfont"></i><span class="icon-text">资源</span></span></a>
</div>
<div id="main">
<!--<h2>A simple sidebar.</h2>-->
<!--<p>The sidebar is in fixed position and does not close.</p>-->
<iframe id="main-iframe" style="width: 100%;height: 100%;border:none" src="userpage"></iframe>
</div>
</div>
</div>
</body>
<script src="../../static/js/homepage.js"></script>
</html>
-
css 代码
布局上使用了 position :absolute 把top 固定再最上方 高度为100px
其中左侧栏的滑动动画由如下图的css 所示
image.png
* {
margin: 0;
padding: 0;
}
html{
margin: 0;
padding: 0;
}
.top{
position: absolute;
height: 100px;
width: 100%;
background-color: #595959;
}
.top .top-title{
position: absolute;
width: 600px;
height: 100px;
left: 10px;
line-height: 100px;
/*font-size:0;*/
}
.top .top-title * , .top .top-user *{
color: #fefeff;
display:inline-block;vertical-align:middle;
}
.top .top-title span{
font-size: 35px;
}
.top .top-title .top-img{
height: 100px;
width: 100px;
line-height: 100px;
display: inline-block;
}
.top .top-title .top-name{
width: 200px;
height: 100px;
display: inline-block;
line-height: 100px;
/*background-color: #1f6377;*/
}
.top .top-user{
position: absolute;
right: 15px;
height: 100px;
line-height: 100px;
}
.top .top-user img{
width: 64px;
height: 64px;
border-radius:100%;
margin-right: 10px;
}
.top .top-user span{
font-size:15px;
}
.top .top-drop-menu{
position: absolute;
right: 0px;
top:100px;
background-color: #cc2936;
border-radius:5px;
min-width: 300px;
color: #fefeff;
/*opacity:0;*/
/*visibility:hidden;*/
display:none;
z-index:1;
}
.action li:hover{
background-color: #64A6BD;
}
.profile-info{
background-color: #64A6BD;
}
.top .top-drop-menu div h4 ,.top .top-drop-menu ul li{
padding: 12px;
border-bottom: 1px solid #595959;
}
/*后期放到一个公共的Common 的js 中*/
a{
/*去掉下划线*/
text-decoration:none;
color: #fefeff;
}
.top .top-drop-menu ul{
list-style-type: none;
font-size: 12px;
}
.content{
position: absolute;
top: 100px;
bottom: 0px;
width: 100%;
/*background-color: #1f6377;*/
}
.content .sidebar{
/*绝对定位，（固定定位）*/
position: fixed;
top:100px;
background-color: #CC2936;
bottom: 0px;
height: 100%;
width: 80px;
padding-top: 10px;
/*是文本不换行*/
white-space: nowrap;
overflow-x:hidden;
z-index: 1;
transition: 0.5s;
}
.content .sidebar a{
padding: 8px 8px 8px 32px;
color: #f5dd9b;
font-size: 18px;
display:block;
}
.content .sidebar a:hover{
color: #fefeff;
}
.content .sidebar span i{
margin-right: 32px;
}
.content #main{
height: 100%;
transition: margin-left 0.5s;
margin-left: 80px;
}
- js代码
$(function () {
//侧滑
$("#mySidebar").hover(toggleSlideBar);
initAOnclick();
//登出的下拉动作
let btn = document.getElementById('user-img');
let box = document.getElementById('dropmenu');
let timer = null;
box.onmouseover = btn.onmouseover = function () {
if (timer) clearTimeout(timer)
box.style.display = 'block';
console.log("mouserover");
}
box.onmouseout = btn.onmouseout = function () {
timer = setTimeout(function () {
box.style.display = 'none';
}, 100);
console.log("mouserout");
}
})
// 为true 时 侧边栏处于 缩小 状态 变为 扩展状态
let toggleFlag = true;
function toggleSlideBar() {
if (toggleFlag) {
$(".sidebar").width(200);
$("#main").css("marginLeft", "200px");
console.log("toggleFlag:" + toggleFlag);
toggleFlag = false;
console.log("open sideBar");
} else {
$(".sidebar").width(80);
$("#main").css("marginLeft", "80px");
toggleFlag = true;
console.log("close sideBar");
}
}
/**
* 左侧侧滑列表点击事件
* @param content url
*/
function slideBarOnClick(content){
$("#main-iframe").attr("src",content);
}
function initAOnclick(){
$("#user-a").click(function(){
slideBarOnClick("userpage")
});
$("#role-a").click(function(){
slideBarOnClick("rolepage")
});
$("#power-a").click(function(){
slideBarOnClick("powerpage")
});
// $("#user-a").click(function(){
// slideBarOnClick("userpage")
// });
}
//左侧栏划入
function sidebarIn() {
console.log("in");
}
function sidebarOut() {
console.log("out");
console.log("ooo");
}
