Hey there! I'm currently working on implementing a swipe feature for the side menu bar.
- I have already added a click method in my code, but now I also need to incorporate a swipe technique.
- When the side bar is opened, I want to remove the inside image and switch it back to a list icon once the document is clicked to close the menu.
Javascript:
$("#openMenuLayout").click(function(e){
debugger;
if ($('#menuLayout').hasClass('open-menu')){
$('#menuLayout').removeClass('open-menu');
$('#openMenuLayout').find('img').removeClass().addClass('open');
} else {
$('document, #menuLayout').addClass('open-menu');
$('#openMenuLayout').find('img').removeClass();
}
e.preventDefault();
});
$(document).click(function(e){
if (!$("#menuLayout").is(e.target) && $("#menuLayout").has(e.target).length === 0) {
// Clicked outside, close menu
$("#menuLayout").removeClass('open-menu');
}
});
Html:
<div id="menuLayout">
<a href="#menuLayout" id="openMenuLayout">
<img class="open" src='http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Timeline-List-Grid-List-icon.png' />
<img class="close" src="http://seotobiz.com/images/icon_close.png" style='display:none;'/></a>
<nav id="menuLayoutList">
<ul>
<li>
<form id="search">
<input type="search" placeholder="Search...">
</form>
</li>
<li><a href="#homeLayout">Home</a></li>
<li><a href="#aboutLayout">About Us</a></li>
<li><a href="#KeyLayout">Key Facts</a></li>
<li><a href="#teamLayout">Team</a></li>
<li><a href="#">Register</a></li>
<li><a href="#contactLayout">Contact</a></li>
</ul>
</nav>
</div>
Check out the progress so far with this demo Link: