Create a sidebar navigation menu with HTML, CSS & JavaScript
Last modified April 26th 2023 |
Source Code [GitHub]
|
#css #html #js
A sidebar menu is a popular way to provide navigation on a website. Sidebar navigation can greatly improve the user experience of a website and make it easier for visitors to find what they need. In this tutorial we’ll be creating a sidebar navigation menu using HTML, CSS, and JavaScript.
Let’s get started with the required HTML markup:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<h3>Example Sidebar Navigation Menu</h3>
<p>Nisi est iste molestiae sed et. Ut ea quam beatae non voluptatem animi quod. Commodi hic ea et. Necessitatibus
quos alias rerum aut cumque. Et praesentium praesentium molestiae nihil alias. Ducimus ab quia in voluptatem
cupiditate et. Commodi qui laborum libero quam rem iure at. Voluptates ut laboriosam voluptatibus sed iusto eos.
Animi non neque omnis in iusto. Voluptatem rerum et et laboriosam optio molestiae est.</p>
<button type="button" class="toggle-menu">Toggle</button>
</main>Code language: HTML, XML (xml)Firstly we have a <nav> element with a simple menu. Next is the <main> element that contains dummy content and a <button> element that will toggle the visibility of the sidebar when clicked. If you wanted to use this code in an actual website you would just need to ensure all the content is wrapped inside the <main> element.
Next we’ll add the CSS:
nav {
background-color: #ccc;
position: fixed;
float: left;
top: 0;
left: -230px;
width: 230px;
height: 100%;
transition: all 0.5s ease;
}
main {
width: 90%;
padding: 0 5%;
float: right;
transition: all 0.5s ease;
}Code language: CSS (css)This will position the <nav> element outside the browser window so it’s not visible when the page is loaded. The <main> element has been styled to fill the whole width of the page with some padding on the left and right margins. The transition on both elements ensures that the sidebar smoothly slides into view.
We’ll be creating adding some JavaScript that toggles an active class on the <body> when the button is clicked. So to complete the CSS add the following code for when that active class is present on the <body>:
body.active nav {
left: 0px;
}
body.active main {
width: calc(90% - 230px);
}Code language: CSS (css)This sets the position of the sidebar along the left edge of the browser so it becomes visible. We’re also adjusting the width of the content to accomodate the navigation. If you needed a different width for your sidebar you would need to replace all instances of 230px in the CSS with your required width.
Finally we just need to add the JavaScript to toggle the active class:
var toggleMenu = document.querySelector(".toggle-menu");
toggleMenu.addEventListener("click", () => {
document.querySelector("body").classList.toggle("active");
});Code language: JavaScript (javascript)Here we’ve used an eventListener to detect when the button is clicked. When clicked the script checks if the active class is present on the <body> and toggles the active class as required.
That’s all for this tutorial, you should now have a working example of a sidebar navigation menu. If you enjoyed this tutorial why not consider subscribing to our newsletter to get notified when new tutorials drop.
Related Posts
#AD Shop Web Developer T-Shirts
