In this video, you’ll learn how to create Animated Sidebar Menu Using Html and CSS.
The sidebar is regularly used to show a few sorts of extra data for clients, for example, menu navigational connects to key pages.
Below is the video tutorials. watch and practices
Here are The sources code Html and CSS
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sidebar menu Html Css</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn">
<i class="fas fa-times" id="closebtn"></i>
<i class="fas fa-bars" id="openbtn"></i>
</label>
<div class="sidebar">
<div class="logo">
<h1>J</h1>
</div>
<ul class="nav">
<li class="link-nav">
<a href="#">
<i class="fas fa-home"></i>
<span>Home</span>
</a>
</li>
<li class="link-nav">
<a href="#">
<i class="fas fa-user"></i>
<span>About Me</span>
</a>
</li>
<li class="link-nav">
<a href="#">
<i class="fas fa-concierge-bell"></i>
<span>Services</span>
</a>
</li>
<li class="link-nav">
<a href="#">
<i class="fas fa-briefcase-medical"></i>
<span>Portfolio</span>
</a>
</li>
<li class="link-nav">
<a href="#">
<i class="fas fa-blog"></i>
<span>Blog</span>
</a>
</li>
<li class="link-nav">
<a href="#">
<i class="fas fa-envelope"></i>
<span>Contact</span>
</a>
</li>
</ul>
</div>
<!-- Conten Area -->
<div class="content">
<h2>Animated Sidenav Html And CSS</h2>
</div>
</body>
</html>
CSS
/* #202040
#ffbd69;*/
*{
margin: 0;
padding: 0;
text-decoration: none;
}
body{
box-sizing: border-box;
font-family: monospace;
}
.logo{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #202040 ;
color: #ffffff;
margin-bottom: 10px;
margin: 0 auto;
}
.logo h1{
font-size: 80px;
}
.sidebar{
background-color:#ffbd69 ;
left: -250px;
width: 250px;
height: 100vh;
text-align: center;
padding-top: 30px;
position: fixed;
transition: all .5s ease;
}
.sidebar a{
display: block;
padding: 20px 0;
color: #202040;
font-size: 15px;
margin-top: 10px;
}
.sidebar a:hover{
color: #ffffff;
background-color: #202040;
font-weight: bold;
border-right: 2px solid #ffffff;
}
.sidebar .fas{
display: block;
}
.link-nav{
border-bottom: 1px solid rgba(9, 10, 12, 0.06);
}
#check{
display: none;
}
label #openbtn, label #closebtn{
position: absolute;
cursor: pointer;
}
label #openbtn{
top: 20px;
left: 70px;
font-size: 40px;
background-color: #ffbd69;
padding: 10px;
}
label #closebtn{
z-index: 1111;
top: 20px;
left: -212px;
font-size: 30px;
}
#check:checked ~ .sidebar{
left:0;
}
#check:checked ~ label #closebtn{
left: 212px;
}
#check:checked ~ label #openbtn{
left:170px;
opacity: 0;
}
#check:checked ~ .content{
margin-left: 250px;
}
.content{
background: url(images/bg.jpg) ;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding-top: 100px;
transition: all .5s;
}
You May Like This Related Videos
Responsive Services Section Using Only Html & Css ➤ https://youtu.be/G4UNzxzqyV0 Responsive Pricing table Using Only HTML & CSS ➤ https://youtu.be/1jiPIUixvq0 How to Create a Hero Image HTML And CSS Only ➤ https://youtu.be/YwKnWrRbNes
(Visited 728 times, 1 visits today)
