Introduction:
In this tutorial, we’ll create a sleek, animated expanding menu that toggles in and out of view. The sidebar will be a fantastic addition to any project that requires a smooth, user-friendly navigation experience. You’ll learn how to use JavaScript, HTML, and CSS to bring this effect to life. Let’s dive in!
Things You Will Learn:
- How to structure HTML for a sidebar toggle
- How to style the sidebar and toggle button with CSS
- How to add JavaScript to control the sidebar’s appearance with an animation
Video Tutorial:
Here is the video tutorial for this project. If you like the tutorial subscribe to my YouTube channel. I post new projects based on HTML, CSS and Javascript on my channel regularly.
Project Folder Structure:
Let us explore the project folder structure. The project folder consists of 3 files. The HTML file creates the elements required to build the structure and layout of our project. Next, the CSS file styles the elements that we have created with CSS. And Finally Javascript adds functionality to our project. The files used are:
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Expanding Menu</title> <!--Google Font--> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" /> <!--Stylesheet--> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#contact">Contact</a> </div> <div class="toggle"><button>+</button></div> </div> <!-- Script--> <script src="script.js"></script> </body> </html>
CSS:
Enhance the visual look by pasting the CSS code below into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #72cdf7;
}
.container {
position: absolute;
display: flex;
width: 100px;
background-color: white;
gap: 32px;
justify-content: center;
align-items: center;
padding: 15px;
border-radius: 5px;
transition: width 0.3s ease;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.container.expanded {
width: min(90vw, 450px);
/*Expanded menu*/
}
.menu {
display: none;
gap: 32px;
}
.menu.show {
display: flex;
/*Show the menu*/
}
.menu a {
text-decoration: none;
color: #041331;
}
.toggle {
background-color: #72cdf7;
height: 40px;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
cursor: pointer;
}
.toggle button {
background-color: transparent;
border: none;
color: #ffffff;
font-size: 32px;
transition: transform 0.3s ease;
cursor: pointer;
}
.toggle.rotate button {
transform: rotate(0deg);
/*Closed State*/
}
.toggle.expanded button {
transform: rotate(45deg);
/*Expanded State*/
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
const container = document.querySelector(".container");
toggle.addEventListener("click", () => {
container.classList.toggle("expanded");
toggle.classList.toggle("expanded");
if (container.classList.contains("expanded")) {
setTimeout(() => menu.classList.add("show"), 300);
} else {
menu.classList.remove("show");
}
});
Â
Conclusion:
Congratulations! You’ve successfully built an animated sidebar that toggles with a click, using HTML, CSS, and JavaScript. This project demonstrates how to use CSS transitions and JavaScript to create interactive UI components. You can now integrate this sidebar into your projects to enhance navigation and user experience.
 using HTML, CSS and JS. Download source code or watch video tutorial on my YouTube channel.){kind=link}