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