Learn how to create a responsive sidebar menu using HTML, CSS, and JavaScript. This step-by-step tutorial will guide you through the process of designing a mobile-friendly sidebar menu for your website.
Table of Contents
A sidebar is a graphical control element that displays various types of information on the right or left side of an application window. The sidebar includes a number of links and sub-menus that help users navigate different pages on the website and make it easier for users. Sidebars have become an essential part of websites or apps. In this tutorial, we will be creating a stylish and responsive sidebar menu using HTML, CSS, and JavaScript. This menu will be mobile-first, meaning it will be designed primarily for mobile devices, but will also be responsive to larger screens. A well-designed sidebar menu can improve the user experience of a website and make navigation easier for visitors.
Let's start making an amazing sidebar menu using HTML, CSS, and vanilla JavaScript step by step.
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our sidebar.
The head section of the HTML code includes a script tag that loads an external JavaScript module from the specified URL https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js. This JavaScript module provides access to the Ionicons library, which is a popular open-source icon set that includes over 5,000 vector icons. This particular version is 5.5.2.
The body section of the code includes a container div element with a class of "container" that wraps around the navigation menu. The navigation menu includes a toggle button with a class of "menu-toggle" and an unordered list with a class of "list". The list items are each represented by li elements with a class of "list-item" and include a link to a specific section of the website. Each list item has an icon and a text label. The icons are displayed using the <ion-icon> element, which is part of the Ionicons library.
Finally, the body section includes another script tag that references an external JavaScript file called "script.js". This file includes custom JavaScript code that adds functionality to the navigation menu, such as opening and closing the menu on click.
After creating the files just paste the below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our responsive sidebar menu using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the sidebar menu is in place, the next step is to add styling to the sidebar menu using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our sidebar menu.
The first line imports a font from Google Fonts, which is used throughout the page. The asterisk (*) selector applies the styles to all elements on the page.
The .container class defines a container element that spans the entire width of the page, with a minimum height of 100% of the viewport height. It is a flex container, with its child elements aligned to the center and justified to the left. It has a background color of #3d4152.
The .navigation class defines a fixed position element that is initially small, with a white background. It has a toggle button that opens and closes the navigation menu. When the .navigation element has the .open class, it expands to a larger width, and the toggle button changes its appearance.
The .navigation ul class defines an unordered list element that contains the menu items. The menu items are displayed vertically with a gap of 10px between them.
The .navigation ul li class defines the individual menu items. Each menu item is positioned relatively, with a width of 100% and a height of 60px. It is displayed as a flex element, with its child elements aligned to the left. It has a cursor pointer and a transition of 0.5s. When the menu item is active, it moves to the right by 30px. When the navigation menu is open, it moves to the right by 10px.
The .navigation ul li a class defines the anchor tag that wraps the menu item content. It has no text decoration, and its child elements are aligned to the left.
The .navigation ul li a .icon class defines the icon that appears on the left side of the menu item. It has a minimum width and height of 55px and is circular with a border-radius of 10px. It has a transition of 0.5s. When the menu item is active, its color changes to white and its background color changes to a variable --color. It has a pseudo-element ::before that creates a blurred background that becomes more opaque when the menu item is active.
The .navigation ul li a .text class defines the text content of the menu item. It is initially hidden, with a transition of 0.5s. When the navigation menu is open, it becomes visible. When the menu item is active, its color changes to the variable --color.
This will give our sidebar menu an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: flex-start;
align-items: center;
background: #3d4152;
}
.navigation {
position: fixed;
inset: 20px 0 20px 20px;
width: 75px;
min-height: 500px;
background: #fff;
transition: 0.5s;
display: flex;
justify-content: center;
align-items: center;
}
.navigation.open {
width: 250px;
}
.navigation .menu-toggle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 20px;
}
.navigation .menu-toggle::before {
content: '';
position: absolute;
width: 30px;
height: 2px;
background: #333;
transform: translateY(-8px);
transition: 0.5s;
}
.navigation.open .menu-toggle::before {
transform: translateY(0) rotate(45deg);
}
.navigation .menu-toggle::after {
content: '';
position: absolute;
width: 30px;
height: 2px;
background: #333;
transform: translateY(8px);
transition: 0.5s;
box-shadow: 0 -8px 0 #333;
}
.navigation.open .menu-toggle::after {
transform: translateY(0) rotate(-45deg);
box-shadow: none;
}
.navigation ul {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.navigation ul li {
list-style: none;
position: relative;
width: 100%;
height: 60px;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 10px;
cursor: pointer;
transition: 0.5s;
}
.navigation ul li.active {
transform: translateX(30px);
}
.navigation.open ul li.active {
transform: translateX(10px);
}
.navigation ul li a {
text-decoration: none;
position: relative;
display: flex;
justify-content: flex-start;
text-align: center;
align-items: center;
}
.navigation ul li a .icon {
position: relative;
display: block;
min-width: 55px;
height: 55px;
line-height: 60px;
color: #222;
border-radius: 10px;
font-size: 1.75em;
transition: 0.5s;
}
.navigation ul li.active a .icon {
color: #fff;
background: var(--color);
}
.navigation ul li a .icon::before {
content: '';
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
background: var(--color);
filter: blur(8px);
opacity: 0;
transition: 0.5s;
}
.navigation ul li.active a .icon::before {
opacity: 0.5;
}
.navigation ul li a .text {
position: relative;
padding: 0 15px;
height: 60px;
display: flex;
align-items: center;
color: #333;
opacity: 0;
visibility: hidden;
transition: 0.5s;
}
.navigation.open ul li a .text {
opacity: 1;
visibility: visible;
}
.navigation ul li.active a .text {
color: var(--color);
} Step 3 (JavaScript Code):
Finally, we need to make our sidebar menu work by adding a JavaScript toggle function.
The first block of code selects the menu toggle and navigation elements from the HTML and creates an event listener that toggles the "open" class on the navigation element when the menu toggle is clicked. This means that when the menu toggle is clicked, the "open" class is added if it wasn't there before, and it is removed if it was already present.
The second block of code selects all the list items in the navigation element and creates a loop that attaches an onclick event listener to each of them. When a list item is clicked, the event listener first removes the "active" class from all the other list items and then adds the "active" class to the one that was clicked. This has the effect of highlighting the clicked list item and removing the highlight from the other items.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const menuToggle = document.querySelector('.menu-toggle');
const navigation = document.querySelector('.navigation');
menuToggle.onclick = () => {
navigation.classList.toggle('open');
}
const listItems = document.querySelectorAll('.list-item');
listItems.forEach(item => {
item.onclick = () => {
listItems.forEach(item => item.classList.remove('active'));
item.classList.add('active');
}
})Final Output:
Conclusion:
In conclusion, creating a stylish and responsive sidebar menu using HTML, CSS, and JavaScript can greatly improve the user experience of a website. By following the steps outlined in this tutorial, you can create a mobile-friendly menu that is easy to use and visually appealing. Remember to experiment with different designs and functionalities to create a menu that works best for your website. With these skills, you can take your web development to the next level.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
