image.png
html
<!DOCTYPE html>
<html>
<head>
<title>watch</title>
<link rel="stylesheet" href="./css/index.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Conatct</a></li>
</ul>
<button class="sidebarBtn">
<span></span>
</button>
<script type="text/javascript">
$(document).ready(function() {
$('.sidebarBtn').click(function() {
$('.sidebar').toggleClass('active');
$('.sidebarBtn').toggleClass('toggle');
})
})
</script>
</div>
</body>
</html>
css
body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background: #fff;
overflow: hidden;
}
.sidebar {
position: fixed;
top: 0;
left: -250px;
background: #262626;
width: 250px;
height: 100%;
transition: .3s;
}
.active {
left: 0;
}
ul {
margin: 0;
padding: 20px 0;
}
ul li {
list-style: none;
}
ul li a {
padding: 10px 20px;
color: #fff;
display: block;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 2);
}
.sidebarBtn {
position: absolute;
top: 0;
right: -50px;
width: 50px;
height: 50px;
box-sizing: border-box;
cursor: pointer;
background: #f5f5f5;
border: none;
outline: none;
}
.sidebar span {
display: block;
width: 35px;
height: 3px;
background: #262626;
position: absolute;
top: 24px;
transition: .3s;
}
.sidebar span:before {
content: '';
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 3px;
background: #262626;
transition: .3s;
}
.sidebar span:after {
content: '';
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 3px;
background: #262626;
transition: .3s;
}
.sidebarBtn.toggle span {
background: transparent;
}
.sidebarBtn.toggle span:before {
top: 0;
transform: rotate(45deg);
}
.sidebarBtn.toggle span:after {
top: 0;
transform: rotate(-45deg);
}
网友评论