RESPONSIVE SIDEBAR DESIGNING.
We have designed a responsive sidebar. You should see the video we given in OUTPUT . You will get better Idea about our code. As you open our code on mobile devices you will find that there is little bit animation with Bar icon in Output.
PROGRAM SOURCE CODE :-
1) HTML Coding :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Sidebar Design By Me</title>
<link rel="stylesheet" type="text/css" href="../CSS/mysidebar.css">
</head>
<body>
<div class="head">
<h1>My Dashboard</h1>
<input type="checkbox" name="check" id="i">
<label for="i">
<div class="bar a"></div>
<div class="bar b"></div>
<div class="bar c"></div>
</label>
<div class="nav">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
2) CSS Coding :-
*{
margin:0px;
padding: 0px;
box-sizing: border-box;
}
body{
background-image:url("../Images/a.jpeg");
height:100vh;
background-size: cover;
background-position: center;
overflow: hidden;
}
html{
font-size: 62.5%;
/*1rem = 10px*/
}
.head{
width: 100%;
color:#ffffff;
background-color:orange;
font-family: cursive;
padding: 1rem 0.6rem;
position: relative;
}
.head h1{
font-size: 4rem;
}
.nav{
width: 100%;
position: absolute;
top:15%;
}
.nav ul{
float: right;
display: inline-flex;
margin: 0.7rem 3rem 0rem 0rem;
}
.nav ul li{
list-style-type: none;
}
.nav ul li a{
text-decoration: none;
color: #ffffff;
padding: 1rem 2rem;
font-size: 2.5rem;
background-color:
}
label{
width:5rem;
height:3rem;
position: absolute;
right: 1rem;
top:20%;
cursor: pointer;
z-index: 110;
}
.bar{
height: 0.5rem;
transition: all 0.3s linear;
background-color: #fff;
display: none;
}
.bar.b,.bar.c{
margin-top: 8px;
}
.active{
background-color:rgba(199,0,199,0.9);
border:1px solid #009;
border-radius: 30px;
}
input{
display: none;
}
@media(max-width: 990px){
html{
font-size: 50%;
}
.head{
background-color:red ;
}
.nav{
z-index: -1;
top:100%;
left: 0%;
background-color:#111000;
transition: all 0.3s ease-in-out;
transform: translateY(-200%);
}
.nav ul{
float: left;
display: block;
}
.nav ul li{
width: 100%;
padding :4rem 0rem;
text-align:center;
}
.bar{
display: block;
}
#i:checked~.nav{
transform: translateY(0%);
}
#i:checked~label>.bar.b{
opacity: 0;
}
#i:checked~label>.bar.a{
transform:rotate(130deg);
margin-top: 20px;
}
#i:checked~label>.bar.c{
transform: rotate(-130deg);
margin-top: -15px;
}
}
