SOURCE CODE:
HTML CODE:
<!DOCTYPE html>
<html lang= "en" >
<head>
<link rel= "stylesheet" href= "https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity= "sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin= "anonymous" />
<link rel= "stylesheet" href= "style.css" >
<meta charset= "UTF-8" >
<meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
<title> Side Navbar</title>
</head>
<body>
<nav>
<input type= "checkbox" name= "open" id= "open" >
<label for= "open" class= "open" >
<i class= "fas fa-bars" ></i>
</label>
<div class= "menu" >
<div class= "logo" >
<a href= "#" >
<img src= "logo.png" alt= "" >
</a>
</div>
<ul>
<li>
<a href= "#" >
<span><i class= "fas fa-home" ></i></span>
Home
</a>
</li>
<li>
<a href= "#" >
<span><i class= "fas fa-address-card" ></i></span>
About
</a>
</li>
<li>
<a href= "#" >
<span><i class= "fas fa-cog" ></i></span>
Settings
</a>
</li>
<li>
<a href= "#" >
<span><i class= "fas fa-address-book" ></i></span>
Contact
</a>
</li>
<li>
<a href= "#" >
<span><i class= "fas fa-comments-alt-dollar" ></i></span>
Feedback
</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Enter fullscreen mode
Exit fullscreen mode
CSS CODE:
* {
margin : 0 ;
padding : 0 ;
box-sizing : border-box ;
list-style : none ;
text-decoration : none ;
}
body {
overflow : hidden ;
font-family : sans-serif ;
background-color : #387b6a ;
height : 100vh ;
}
.menu {
height : 100% ;
position : fixed ;
left : 0 ;
top : 0 ;
width : 250px ;
padding-top : 60px ;
background-color : #212121 ;
transition : 0.5s ;
transform : translateX ( -250px );
}
.logo a {
padding : 15px 25px ;
font-size : 40px ;
text-transform : uppercase ;
color : white ;
/*margin-left: 5px*/
}
.logo a img {
max-width : 140px ;
border-radius : 50% ;
margin-bottom : 10px ;
}
ul li {
border-bottom : 1px solid rgba ( 255 , 255 , 255 , 0.10 );
transition : 0.3s ;
/*text-align: center;*/
padding-left : 25px ;
}
ul li :hover {
padding-left : 35px ;
background-color : #445665 ;
}
ul li a {
display : block ;
color : #fff ;
padding : 20px ;
text-transform : uppercase ;
font-weight : bold ;
}
#open {
display : none ;
}
.open {
height : 80px
width : 80px ;
/*position: absolute;*/
/*background-color: #000;*/
}
.open i {
font-size : 25px ;
cursor : pointer ;
margin-left : 25px ;
margin-top : 25px ;
background-color : #000 ;
padding : 15px 15px ;
color : white ;
z-index : 99 ;
}
#open :checked ~ .menu {
transition : 0.5s ;
transform : translateX ( 0 );
}
#open :checked ~ .open i {
transition : 0.5s ;
margin-left : 190px ;
position : absolute ;
}
Enter fullscreen mode
Exit fullscreen mode
Find Me On:
Facebook
Youtube
Github
Top comments (1)
Great work dude 🔥🔥