SIDEBAR DESIGNING WITH ANIMATION ON BACKGROUND IMAGE.
In this program we have designed a sidebar such that as you open or close sidebar then there will be change in position of background image of web page . We have smartly handled MARGIN CSS property. so we hope you will really like this code.
PROGRAM SOURCE CODE :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sidebar Move</title>
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
.a {
width: 30rem;
height: 100vh;
background-color: #383838;
padding: 3rem 0rem;
transition: all 0.3s ease-in-out;
position: absolute;
left: -30rem;
}
.a h3 {
font-size: 4rem;
text-align: right;
padding: 0.7rem 2rem;
color: #f6f6f6;
font-family: vernda;
}
.a ul {
width: 100%;
}
.a ul li {
list-style-type: none;
margin-top: 3rem;
border-bottom: .1rem solid #fff;
text-align: center;
padding: 2rem 0rem;
}
.a ul li:hover {
background-color: #7FFF00;
color: red;
border-bottom: .1rem solid red;
}
.a ul li:hover a {
color: red;
}
.a ul li a {
text-decoration: none;
color: #fff;
font-size: 3rem;
}
label {
font-size: 3rem;
color: red;
text-align: center;
cursor: pointer;
}
.fa-bars {
position: absolute;
top: 3%;
left: 1%;
background-color:black;
padding: 0.5rem 1rem;
}
.fa-times {
position: absolute;
z-index: 1000;
top: 2%;
transition: all 0.3s ease-in-out;
transform: translateX(-100%);
}
input {
display: none;
}
#i:checked~.a {
position: absolute;
left: 0;
}
#i:checked~label .fa-times {
transform: translateX(0%);
}
#i:checked~section {
margin-left: 30rem;
}
section {
background-image: url("../Images/Anny1.jpg");
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: all 0.3s ease-in-out;
}
@media(max-width: 998px) {
html {
font-size: 56%;
}
}
@media(max-width: 600px) {
html {
font-size: 50%;
}
}
</style>
</head>
<body>
<input type="checkbox" id="i">
<label for="i"><i class="fa fa-bars" title="open Sidebar"></i></label>
<label for="i"><i class="fa fa-times" title="close sidebar"></i></label>
<div class="a">
<h3>MenuBar</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Sevices</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<section></section>
</body>
</html>