Creating a Responsive Side Menu With HTML, CSS, and Javascript
In this tutorial we are going to build a responsive sliding side menu using HTML, CSS and Javascript. We will not be using any Javascript library in this since the code will be pretty simple. This tutorial is going to be broken up into 3 sections, writing the HTML, writing the Javascript, and writing the CSS. Let’s get started building this.
Writing the HTML
To begin we need to set up a basic HTML file with our css and javascript files linked in it as well as Ionicons which we will use to get an icon to toggle our side menu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Responsive Side Menu</title>
</head>
<body><script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script></body>
</html>
After we have that set up we can add the HTML for the navbar, side menu and main content container. We will add that to the HTML. We will add some classes that we will use later to add CSS styles to later. We also need to add a side-menu and main ids to the two div containers for the side menu and the main content containers. We will use this later in the javascript code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Responsive Side Menu</title>
</head>
<body>
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()"> <!-- https://ionicons.com/ -->
<ion-icon class="menu-icon" name="menu-outline"></ion-icon>
</a>
</span> <ul class="navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li> </ul>
</nav> <div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSlideMenu()">×</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div> <div id="main">
<h1>Responsive Side Menu</h1>
</div> <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script></body>
</html>
That is all the HTML code we need for this project. Let’s now add the Javascript.
Writing the Javascript Code
We only need a little bit of javascript for this project. In the previous example, you will see that we have added two onclick events in our HTML code. Lets write the functions for when one of the buttons is pressed. First we need to write a function to open the side menu. In this function we need to set the side menu width to 250px. We will start it a 0px so it only shows when the button is clicked later. We also need to set the margin left to 250 px for the main container to push the contents over 250 pixels. We will add some simple transitions to this later to make it smooth. After this we need to write a function when the close button is pressed. This time we will just revert the changes we made in the openSideMenu function by setting the width of the sidebar to 0 and the left margin of the main container to 0 as well to move it back to where it was. We will just add this into a script tag into our HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Responsive Side Menu</title>
</head>
<body>
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSideMenu()"> <!-- https://ionicons.com/ -->
<ion-icon class="menu-icon" name="menu-outline"></ion-icon>
</a>
</span> <ul class="navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li> </ul>
</nav> <div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSideMenu()">×</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div> <div id="main">
<h1>Responsive Side Menu</h1>
</div> <script>
function openSideMenu() {
document.getElementById('side-menu').style.width = '250px';
document.getElementById('main').style.marginLeft = '250px';
} function closeSideMenu() {
document.getElementById('side-menu').style.width = '0';
document.getElementById('main').style.marginLeft = '0';
}
</script> <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script></body>
</html>
This is all of the javascript needed for this project. The final piece we need is to add some CSS styles. Let’s open up style.css and get started.
Writing the CSS
First lets write some CSS for the body, main navbar and the icon so it at least looks decent. We aren’t going to spend a lot of time on the styles since that is not the focus of this tutorial. Here are the styles I added for these pieces.
body {
font-family: "Arial", Serif;
background-color: #f4f4f4;
overflow-x: hidden;
}.navbar {
background-color: #81c784;
overflow: hidden;
height: 63px;
}.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: 0.3s;
}.navbar ul {
margin: 8px 0 0 0;
list-style: none;
}.navbar a:hover {
background-color: #ddd;
border-radius: 40px;
color: #000;
transition: 0.3s;
}.menu-icon {
font-size: 2rem;
}
Now that we have those styles set we need to add some CSS for our side menu as well as the main container.
We need to set the side nav’s top and left position to 0 and the width needs to be set to 0 as well so that it is hidden until the button is pressed. We are also adding some padding, color, and shadows to make it look a little better. There are also some hover effects added as well. We will also set the nav’s z-index to 1 so that it is always on top of the rest of the content. The rest of the CSS is mostly just basic styles to improve the look of it. There are two transition properties that will set the speed of opening/closing the side menu. I set these at 0.5 seconds but you can change them to whatever you like best.
body {
font-family: "Arial", Serif;
background-color: #f4f4f4;
overflow-x: hidden;
}.navbar {
background-color: #81c784;
overflow: hidden;
height: 63px;
}.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: 0.3s;
}.navbar ul {
margin: 8px 0 0 0;
list-style: none;
}.navbar a:hover {
background-color: #ddd;
border-radius: 40px;
color: #000;
transition: 0.3s;
}.menu-icon {
font-size: 2rem;
}.side-nav {
height: 100%;
width: 0;
margin-top: 71px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #f4f4f4;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
box-shadow: 2px 2px 15px grey
}.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size: 22px;
color: #555;
display: block;
transition: 0.3s;
}.side-nav a:hover {
color: #333;
}.side-nav .btn-close {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}#main {
transition: margin-left 0.5s;
padding: 20px;
overflow: hidden;
width: 100%;
}
At this point you should have a working side menu that slides in and out when the buttons are pressed. From here you can adjust the styles to however you would like everything to work. Hopefully this helps with getting a side menu set up for addtional navigation options for your websites.
