Free Coding Ebook 👉 Get Now
Modern Sidebar Menu With Animation Using Only HTML and CSS
Hello Coder! Welcome to the Codewitrandom blog. We learn how to create a Modern Sidebar Menu Using Only Html and Css. this is the sidebar navigation menu with sliding Animation and we create it with pure Css Code.
I hope you enjoy our blog so let’s start with a basic HTML structure for the Modern Sidebar Menu.
50+ HTML, CSS & JavaScript Projects With Source Code
Live Preview Of Sidebar Menu:-
ADVERTISEMENT
| Code by | FlorinCornea |
| Project Download | Link Available below |
| Language used | HTML and CSS |
| External link / Dependencies | No |
| Responsive | Yes |
Html Code For Sidebar Menu:-
<html lang="en">
<head>
<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> Modern Sidebar Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<body>
<aside>
<p> Menu </p>
<a href="javascript:void(0)">
<i class="fa fa-user-o" aria-hidden="true"></i>
My drive
</a>
<a href="javascript:void(0)">
<i class="fa fa-laptop" aria-hidden="true"></i>
Computers
</a>
<a href="javascript:void(0)">
<i class="fa fa-clone" aria-hidden="true"></i>
Shared with me
</a>
<a href="javascript:void(0)">
<i class="fa fa-star-o" aria-hidden="true"></i>
Starred
</a>
<a href="javascript:void(0)">
<i class="fa fa-trash-o" aria-hidden="true"></i>
Trash
</a>
</aside>
<div class="social">
<a href="https://www.instagram.com/codewith_random/" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</div>
</body>
</html>
There is all the html code for the Modern Sidebar Menu. we add aside Html tag for creating all links on 1 side.
Restaurant Website Using HTML and CSS
Html Code Output:-
CSS Code For Sidebar Menu:-
aside {
color: #fff;
width: 250px;
padding-left: 20px;
height: 100vh;
background-image: linear-gradient(30deg, #0048bd, #44a7fd);
border-top-right-radius: 80px;
}
aside a {
font-size: 12px;
color: #fff;
display: block;
padding: 12px;
padding-left: 30px;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
aside a:hover {
color: #3f5efb;
background: #fff;
outline: none;
position: relative;
background-color: #fff;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
aside a i {
margin-right: 5px;
}
aside a:hover::after {
content: "";
position: absolute;
background-color: transparent;
bottom: 100%;
right: 0;
height: 35px;
width: 35px;
border-bottom-right-radius: 18px;
box-shadow: 0 20px 0 0 #fff;
}
aside a:hover::before {
content: "";
position: absolute;
background-color: transparent;
top: 38px;
right: 0;
height: 35px;
width: 35px;
border-top-right-radius: 18px;
box-shadow: 0 -20px 0 0 #fff;
}
aside p {
margin: 0;
padding: 40px 0;
}
body {
font-family: "Roboto";
width: 100%;
height: 100vh;
margin: 0;
}
.social {
height: 0;
}
.social i:before {
width: 14px;
height: 14px;
font-size: 14px;
position: fixed;
color: #fff;
background: #0077b5;
padding: 10px;
border-radius: 50%;
top: 5px;
right: 5px;
}
100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)
We have completed our CSS section, Here is our final updated output HTML + CSS.
Final Output Of Modern Sidebar Menu Using Only CSS
I hope you like the Modern Sidebar Menu, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you
Written by – Code With Random/Anki
code by – FlorinCornea
