Hello readers, Today we will learn in this blog how we create an Animated Side Navigation Menu from html and css.
This side nav menu is created without using any frame work. Which you will get to learn a custom side nav menu. Which you will get to learn a lot from this navbar.
As we know that by putting sidemenu in the website, we look very beautiful when we see the mobile of that website.
So now we know how we have written this code.
First of all we have taken a div which we have written an attribute named ID whose value is given ("main") { id ="main " } | A span tag is taken inside this div. span tag is an inline element. An attribute named id is taken inside the span tag, whose value (open) { id ="open "} is given. Inside this span we have written open text. Which we click event we will open the side navmenu.
You might like this:
and the div whose id="main " is. A div has been taken below it, inside which we have taken logo, close button and menu.
Which we have made a beautiful side navbar with the help of css.
If you want to understand this responsive side navbar by watching the video, then you can easily understand it by clicking on the video link given below and watching the video.
Video Tutorial of Animated Side Navigation Menu
I hope you understand by watching the video. If you want to see this responsive side nav bar code in your system, then you can copy the code given below and run the code in your system and see it in your web browser.
HTML CODE FILE :
<d!DOCTYPE html>
<dhtml>
<dhead>
<dmeta name="viewport" content="width=device-width, initial-scale=1">
<dlink rel="stylesheet" href="style.css">
<d/head>
<dbody>
<ddiv id="main">
<dspan id="open">☰ Open<d/span>
<d/div>
<ddiv id="mySidenav" class="sidenav">
<ddiv class="box-cl">
<da href="#" class="logo">Ravi<dspan> Web<d/span><d/a>
<da href="javascript:void(0)" class="closebtn" id="close"> ×<d/a>
<d/div>
<dul class="nav-list">
<dli><da href="#">Home<d/a><d/li>
<dli><da href="#">About<d/a><d/li>
<dli><da href="#">Services<d/a><d/li>
<dli><da href="#">Clients<d/a><d/li>
<dli> <da href="#">Contact<d/a><d/li>
<d/ul>
<d/div>
<d/body>
<d/html>
CSS CODE FILE :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #4285F4;
}
#main {
display: flex;
position: absolute;
top: 247px;
left: 45%;
}
#main span {
font-size: 30px;
cursor: pointer;
font-size: 30px;
cursor: pointer;
background: #fff;
padding: 5px 10px;
border-radius: 5px;
}
.sidenav {
height: 100vh;
width:0;
position: relative;
z-index: 1;
top: 0;
left: 0;
background-color: #fff;
transition: 0.5s;
padding-top: 30px;
opacity: 0;
visibility: hidden;
}
.navside{
width: 300px;
opacity: 1;
visibility: visible;
}
.sidenav .box-cl{
display: flex;
flex-direction: row;
padding: 3px 15px;
position: relative;
}
.sidenav .box-cl a.logo{
font-size: 35px;
color: #ff5454;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
}
.sidenav .box-cl a.logo span{
color: #4285f4;
}
.sidenav .nav-list{
padding: 0;
list-style: none;
}
.sidenav .nav-list a {
padding: 8px 8px 8px 32px;
margin-bottom: 2px;
text-decoration: none;
font-size: 25px;
font-weight: 500;
color: #000;
background-color: #ffffff;
display: block;
transition: 0.3s;
border-bottom: 1px solid #ea214d47;
}
.sidenav .nav-list a:hover {
background-color: #4285f4;
color:#fff;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: -35px;
font-size: 36px;
margin-left: 50px;
background: #ea214d;
padding: 0px 7px;
color: #ffffff;
text-decoration: unset;
transition: all 0.5s linear;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav .closebtn {
right: 10px;
}
.sidenav a {
font-size: 18px;
}
.navside{
width: 100%;
}
#main {
left: 30%;
}
}
Javascript CODE FILE :
const openNav = document.getElementById("open");
const closeNav = document.getElementById("close");
const navSlide = document.getElementById("mySidenav");
openNav.addEventListener("click", () => {
navSlide.classList.add("navside");
});
closeNav.addEventListener("click", () => {
navSlide.classList.remove("navside");
})
Post a Comment