Hello friends, in this blog you will know how to create a responsive sidebar navigation menu using HTML, CSS and JavaScript. If you follow this article carefully, you will be able to create one for your project in less than 5 minutes. We can easily create this navigation to implement in the next project that is completely responsive. This is the blog version of the tutorial uploaded on YouTube. If you want to see the full coding, you can even watch the tutorial. You can get the source code in this blog at the end or also you can download code from my GitHub repository. You can even get the source code file in the GitHub link at the end of this article. Everyone who has brief understanding of web development can understand this code.
This project use font from google fonts, icons from font awesome. Only some line of JavaScript is used in this project making the web page loading seed fast as a rocket. This sidebar navigation menu consist of many features like ham burger menu form mobile devices, animated hover effect on navigation links, place for social media also with animated hover effect.
In order to use this sidebar navigation into your own project, you will need to follow couple of steps listed below.
Step 1:
First of all, you will need to create an index.html file and paste the following code into the file and save the changes.
<!DOCTYPE html><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>Responsive Sidebar Navigation ramCoder</title><link rel="stylesheet" href="./style.css" /><link rel="stylesheet" href="./responsive.css" /><link rel="shortcut icon" href="./profile.jpg" type="image/x-icon" /><script src="https://kit.fontawesome.com/b99e675b6e.js"></script></head><body><div class="site"><div class="wrapper"><div class="sidebar"><img src="./profile.jpg" alt="" class="logo" /><h3 class="hedr">ramCoder</h3><div class="resp"><ul><li class="active"><a href="#"><i class="fas fa-home"></i>Home</a></li><li><a href="#"><i class="fas fa-user"></i>About</a></li><li><a href="#"><i class="fas fa-blog"></i>Blog</a></li><li><a href="#"><i class="fas fa-paper-plane"></i>Contact</a></li><li><a href="#"><i class="fas fa-briefcase"></i>Some Works</a></li></ul></div><div class="social_media"><a href="#" target="new"><i class="fab fa-facebook-f facebook"></i></a><a href="#" target="new"><i class="fab fa-twitter twitter"></i></a><a href="#" target="new"><i class="fab fa-instagram instagram"></i></a><a href="#" target="new"><i class="fab fa-github instagram"></i></a></div><i class="fas fa-bars"></i></div><div class="main_content"><h2 class="title">Responsive Sidebar Navigation</h2></div></div></div><script src="./app.js"></script></body></html>{codeBox}
Step 2:
After finishing with the index.html file, you will need to create an style.css file in the same directory and paste the following code in that file and save changes.
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap");* {margin: 0%;padding: 0%;box-sizing: border-box;list-style: none;text-decoration: none;font-family: "Josefin Sans", sans-serif;}body {background-color: #ececec;overflow-x: hidden;}.web {overflow: hidden;}::-webkit-scrollbar {width: 4px;background-color: #ececec;border-radius: 20%;}::-webkit-scrollbar-thumb {background-color: #247deb;border-radius: 20%;}.wrapper {display: flex;position: relative;}.fa-bars {opacity: 0;pointer-events: none;}.wrapper .sidebar {width: 200px;height: 100vh;background-color: green;position: fixed;}.wrapper .sidebar h3 {color: #fff;text-transform: uppercase;text-align: center;margin-bottom: 30px;border-radius: 50px;background-color: green;}.wrapper .sidebar ul li {padding: 15px;transition: 0.3s;padding-left: 30%;justify-content: center;}.wrapper .sidebar ul li a {color: #fff;display: block;}.wrapper .sidebar ul li a .fas {width: 25px;}.logo {width: 60px;height: 60px;justify-content: center;border-radius: 50%;border: 5px solid rgb(2, 90, 2);margin-left: 30%;margin-bottom: 5px;margin-top: 10%;}.wrapper .sidebar ul li:hover {background-color: rgb(2, 92, 2);border-bottom-left-radius: 50px;border-top-left-radius: 50px;transition: 0.5s;color: #f3f5f9;}.active {background-color: rgb(2, 92, 2);border-bottom-left-radius: 50px;border-top-left-radius: 50px;transition: 0.5s;color: #f3f5f9;}.wrapper .sidebar .social_media {position: absolute;bottom: 0%;left: 50%;transform: translateX(-50%);display: flex;margin-bottom: 5px;}.wrapper .sidebar .social_media a {display: block;width: 40px;height: 40px;line-height: 45px;text-align: center;margin: 0 5px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;transition: 0.3s;}.wrapper .sidebar .social_media a:hover {color: #dbd5d5;transition: 0.3s;}.wrapper .main_content {width: 100vw;margin-left: 200px;height: 100vh;background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));background-size: cover;background-repeat: no-repeat;}.title {color: #f3f5f9;position: relative;top: 35%;margin: 0 auto;text-align: center;font-size: 200%;font-weight: normal;}{codeBox}
Step 3:
After finishing up on style.css file, you will need to create an responsive.css file and paste the following code into the file and save the changes.
@media only screen and (max-width: 768px) {body {overflow-x: hidden;}.wrapper .sidebar {width: 100vw;height: 5vh;padding: 30px 0px;position: fixed;z-index: 1;}.logo {width: 50px;height: 50px;position: absolute;top: 7%;margin-left: 5%;z-index: 1;}.hedr {opacity: 0;pointer-events: none;}.tit {opacity: 1;pointer-events: all;position: fixed;top: 15vh;text-align: center;background-color: none;}.resp {width: 100%;position: relative;left: 0%;top: 0vh;padding-top: 20px;transform: translateX(-100%);height: 100vh;}.reap_act {transform: translateX(0%);background-color: green;padding-top: 10vh;}.wrapper .sidebar ul li {padding: 10px;transition: 0.3s;padding-left: 20%;justify-content: right;}.wrapper .main_content {margin-left: 0px;height: 100vh;}.cont {opacity: 0;pointer-events: none;}.fa-bars {opacity: 1;position: absolute;right: 15%;top: 3vh;margin-top: auto;margin-bottom: auto;color: #f3f5f9;cursor: pointer;pointer-events: all;}.wrapper .sidebar .social_media a {display: flex;width: 30px;height: 30px;text-align: center;margin: 0 4px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;transition: 0.3s;}.logo {margin-top: 0;}}{codeBox}
Step 4:
After completing all three steps, you will need to create an app.js file and paste the following code and save the changes to take the effect.
const burger = document.querySelector(".fa-bars");const menu = document.querySelector(".resp");const cont = document.querySelector(".main_content");const hedr = document.querySelector(".hedr");const web = document.querySelector("body");burger.addEventListener("click", () => {menu.classList.toggle("reap_act");cont.classList.toggle("cont");hedr.classList.toggle("tit");web.classList.toggle("web");});{codeBox}