Do you have a sidebar on your website or application? If so, you may want to add a feature that allows users to close the sidebar when they click outside of it. This can be a helpful way to improve the user experience. A simple and effective way to make your sidebar disappear when users click outside of it.
In this tutorial, I'll show you how to close a sidebar when a user clicks outside of it in HTML, CSS, and JavaScript. We'll start by creating the HTML and CSS for the sidebar. Then, we'll write the JavaScript code that will close the sidebar when a user clicks outside of it.
By the end of this tutorial, you'll have a working sidebar that can be closed by clicking outside of it and full source code of it.
Initially sidebar menu is going to be hidden, and when you click on menu icon, it slides out to visible, And to close that sidebar menu, you can click outside of it or on menu icon again.
You may have seen on many websites that, when you open sidebar menu by clicking on the menu icon and close it by clicking outside the sidebar menu. So, in this article, we going to make it. When you click anywhere on document except sidebar menu and menu icon, the sidebar menu close or its style changes.
Right now, the sidebar menu and menu icon are not responsive, especially the animated menu icon but you can make it responsive by applying media query(css). Or you can refer this blog post How to create responsive navigation bar using html css and javascript.
Video Tutorial on Closing SideBar Menu By Clicking Outside of it:
Close SideBar Menu When Click Outside of it.
File Structure:
- index.html
- index.css
To enable the show/hide functionality of the sidebar menu and to add animation to the menu icon, We'll use javascript.
Place the JavaScript code within a script tag, positioned just after the closing body tag in your index.html file.
Now let's dive into the specific steps for crafting the sidebar menu that close when click outside too !
Step 1: Create Menu Icons For SideBar Menu.
To begin, I established a background element using a div tag with the class value 'container'. Within this container, I nested a div tag with the class value 'menu_icon_box' to house the menu icon itself.
Inside the 'menu_icon_box' div, I positioned three additional div tags each assigned the class values 'line1', 'line2', and 'line3', respectively arranged horizontally to construct the visual representation of a menu icon. The code for this implementation is provided below:
HTML
<!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>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="menu_icon_box">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #284e95;
}
.menu_icon_box{
z-index: 2;
width: fit-content;
height: auto;
background-color: #fff;
margin: 30px;
position: absolute;
border-radius: 4px;
cursor: pointer;
}
.line1 , .line2 , .line3{
width: 40px;
height: 4px;
margin: 10px 8px;
background-color: #000;
border-radius: 50px;
transition: 0.2s;
}
.active .line1{
transform: translate(0px , 15px)rotate(45deg);
}
.active .line2{
opacity: 0;
}
.active .line3{
transform: translate(0px , -15px)rotate(-45deg);
}
Now, let's incorporate JavaScript to transform the menu icon into a close icon by dynamically adding the .active class to the menu_icon_box class. As you'll notice in the above CSS, I've already assigned the active class to the .line1, .line2, and .line3 elements, using the format .active .line1, .active .line2, and .active .line3.
So if active class is added to menu_icon_box than it look like this:
When the active class is added to the menu_icon_box element, the styles associated with .active .line1, .active .line2, and .active .line3 will be applied. Conversely, when the active class is removed from menu_icon_box, the styles defined for .line1, .line2, and .line3 will take effect instead.
JavaScript
let menu_icon_box = document.querySelector(".menu_icon_box");
menu_icon_box.onclick = function(){
menu_icon_box.classList.toggle("active");
}
Output :
After click on menu icon :
Step 2: Create Sidebar Menu
After creating menu icon, Let's create sidebar menu(class value box for sidebar menu).
HTML
<div class="box">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
CSS
.box{
width: fit-content;
height: 100vh;
background-color: #fff;
position: relative;
text-align: left;
z-index: 1;
transition: 0.3s;
}
nav{
padding-top: 100px;
}
nav ul{
margin: 0px 30px;
}
nav ul li{
list-style: none;
margin-bottom: 30px;
transition: 0.2s;
}
nav ul li:hover{
background-color: #c6c6c66f;
border-radius: 8px;
}
nav ul li a{
color: #000;
font-size: 28px;
padding: 10px 30px;
display: block;
text-decoration: none;
}
Output :
Step 3: Hide Sidebar Menu (initially).
Now hide sidebar menu, because we want it show only when the menu icon is clicked. Below code is for hide the sidebar menu (box classname).
CSS
opacity: 0;
left: -500px;
pointer-events: none;
CSS
.box{
width: fit-content;
height: 100vh;
background-color: #fff;
position: relative;
text-align: left;
z-index: 1;
opacity: 0;
left: -500px;
pointer-events: none;
transition: 0.3s;
}
Now after hiding the sidebar menu. Let's add code to show sidebar menu (box) when menu icon is clicked.
Below is new selector (.active_box) that will be added to box class (sidebar menu) when menu icon is clicked. To add this selector to box class, we will use javascript.
CSS
.active_box{
opacity: 1;
left: 0px;
pointer-events: fill;
}
Output :
Step 4: Add JavaScript to Show and Hide SideBar Menu.
Now that we've successfully hidden the sidebar menu, let's proceed to implement the code that will enable its toggling upon clicking the menu icon.
We'll introduce a new class, named .active_box, which will be dynamically added or removed from the sidebar menu's class (box) in response to menu icon clicks.
JavaScript
let menu_icon_box = document.querySelector(".menu_icon_box");
let box = document.querySelector(".box");
menu_icon_box.onclick = function(){
menu_icon_box.classList.toggle("active");
box.classList.toggle("active_box");
}
Output :
Before click on menu icon.
After click on menu icon:
Step 5: Add Functionality To Close SideBar Menu When Click OutSide of it.
Now, let's implement the functionality to automatically close the sidebar menu when a user clicks outside of it.
We'll achieve this by attaching an onclick event listener to the entire document and if condition. This listener will continuously monitor clicks and determine whether they occur within the menu icon (having the class menu_icon_box) or the sidebar itself.
If the click does originate from either of these elements, a conditional statement will evaluate to false, and no action will be taken. However, if the click originates from anywhere outside of these designated areas, the conditional statement will evaluate to true, prompting the following actions:
- The active and active_box classes will be removed from the respective elements.
- The sidebar menu will smoothly transition into a hidden state.
- The menu icon, which previously displayed a closed state, will revert to its standard open menu icon appearance.
JavaScript
document.onclick = function(e){
if (!menu_icon_box.contains(e.target) && !box.contains(e.target) ) {
menu_icon_box.classList.remove("active");
box.classList.remove("active_box");
}
}
So that's it you can see demo in above youtube video.
You may like:
- How to show and hide sidebar menu using only HTML & CSS.
- How to create responsive navigation menu using HTML & CSS.
- How to create animated navigation menu using HTML, CSS & JavaScript.
- How to create dynamic animated tab selection menu using HTML, CSS & JavaScript..
- How to create navigation with search bar using HTML, CSS & JavaScript.
Final code:
So that's it, closing sidebar menu when click outside of it is ready using html css & javascript. If you have any question or suggestion you can write in comment section.
Share your thoughts.