I am trying to make a vertical slide menu for the mobile version. This side menu is open and close when I click specific button like (Openbtn) (Closebtn) and clicking anywhere in body tag including menubar.
I need a javascript code for side menu close when I clicked in body outside menubar (Side menu). Also it willbe helpful if is possible to close when I swipe menubar (side menu).
Below is my example for your reference:
function openNav() {
console.log("open");
document.getElementById("toggle_menu").style.width = "250px";
}
function closeNav() {
document.getElementById("toggle_menu").style.width = "0";
}
document.addEventListener("click", function(){
if( parseInt( $('#toggle_menu').css('width') ) > 0 ){
document.getElementById("toggle_menu").style.width = "0";
}
});
// For Child dropdown menu
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
.toggle_menu {display:block; width:250px; top:0px; height:100%; background-color:#fff; box-shadow: 0 5px 5px rgba(0,0,0,.2);position: fixed; overflow-x: hidden; transition: 0.5s; z-index:1000;}
.title {width:100%; height:80px;}
.toggle_menu ul {list-style:none; margin:0; padding:0;}
.toggle_menu ul li {width:100%; height:40px; cursor:pointer;}
.toggle_menu ul li a {text-decoration:none; color: #666666; font-size:14px; display:block; padding: 10px 0px 0 50px; font-size: 14px; font-family:sans-serif;}
.toggle_menu ul li .sub-arrow:after { content:'\203A'; font-size:24px; color:#666666; float:right; margin-top:-20px; margin-right:30px; transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); }
.toggle_menu ul li:hover {background-color:#E8E6FF;}
.toggle_menu ul .dropdown-container {display:none; background-color: #E2E1FB;}
.toggle_menu ul .dropdown-container a:before{ content:'\203A'; font-size: 15px; margin-right:10px; color: #666666; }
.closebtn {
position: absolute;
height:40px;
width:50px;
color:#000;
border-radius:50%;
text-align:center;
padding-top:10px;
border:6px solid #307DFE;
font-size:24px;
font-family: Arial, Helvetica, sans-serif;
background: #70A9FE;
right:10px;
top:10px;
}
.closebtn:hover {border:6px solid #FF9900;}
<span id="menu_bar" onClick="openNav()">Menu</span>
<!-- Slide Menu -->
<div class="toggle_menu" id="toggle_menu">
<div class="title"><a href="javascript:void(0)" class="closebtn" onClick="closeNav()">X</a> </div>
<div class="sidenav">
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown-btn"><a href="#">Men's</a><span class="sub-arrow"></span></li>
<ul class="dropdown-container">
<li><a href="">Traditional Wear</a></li>
<li><a href="">Top Wear</a></li>
<li><a href="">Bottom Wear</a></li>
<li><a href="">Footwear</a></li>
<li><a href="">Bags</a></li>
<li><a href="">Accessories</a></li>
</ul>
<li class="dropdown-btn"><a href="#">Women's</a><span class="sub-arrow"></span></li>
<ul class="dropdown-container">
<li><a href="">Traditional Wear</a></li>
<li><a href="">Westen Wear</a></li>
<li><a href="">Footwear</a></li>
<li><a href="">Lingerie</a></li>
<li><a href="">Bages</a></li>
<li><a href="">Jewellery</a></li>
<li><a href="">Accessories</a></li>
</ul>
</ul>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire