Onclick div moves left to right and on window click comes back to its original position

Question

I'm doing side menu I want to use loop.I tried but not getting. my question is on icon click div moves right side and after some time goes back its original place. And when div is expand full if mouse hover it should not be moves left:-201;

For inspiration see his side menu

 document.ready(function(){ $('a.is-vertical-toggle-icon .fa-bars').click(function(){ $('header.is-vertical-toggle .header-menu').animate({'left':'0'}); $('a.is-vertical-toggle-icon .fa-bars').hide(); $(window).click(function(){ $('header.is-vertical-toggle .header-menu').animate({'left':'-201'}); $('a.is-vertical-toggle-icon .fa-bars').show(); }); }); }); 

 .wrapper { position: relative; width: 100%; } header.is-vertical-toggle .header-menu { position: fixed; top: 0; left: -201px; padding: 0; width: 250px; height: 100%; background-color: #ccc; -webkit-box-shadow: 2px 0 4px 2px rgba(0,0,0,.15); box-shadow: 2px 0 4px 2px rgba(0,0,0,.15); } a.is-vertical-toggle-icon { display: flex; justify-content: flex-end; margin-top: 35px; padding: 10px 15px; } a.is-vertical-toggle-icon .fa-bars { font-size: 23px; color: #00807F; } 

 <script src="https://use.fontawesome.com/a2e210f715.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <header class=" is-vertical is-vertical-toggle"> <div class="header-menu"> <a href="#" class="is-vertical-toggle-icon"> <span><i class="fa fa-bars"></i></span> </a> </div> </header> 

Answer 1

With your code both events, $('a.is-vertical-toggle-icon .fa-bars').click( and $(window).click( , will execute.

Here e.target != $menu[0] if the clicked element is the menu it will not execute the window.click handler

 $(document).ready(function(){ $('a.is-vertical-toggle-icon .fa-bars').click(function(){ var $menu = $(this); $('header.is-vertical-toggle .header-menu').animate({'left':'0'}); $('a.is-vertical-toggle-icon .fa-bars').hide(); $(window).click(function(e){ if(e.target != $menu[0]) { $('header.is-vertical-toggle .header-menu').animate({'left':'-201'}); $('a.is-vertical-toggle-icon .fa-bars').show(); } }); }); }); 

 .wrapper { position: relative; width: 100%; } header.is-vertical-toggle .header-menu { position: fixed; top: 0; left: -201px; padding: 0; width: 250px; height: 100%; background-color: #ccc; -webkit-box-shadow: 2px 0 4px 2px rgba(0,0,0,.15); box-shadow: 2px 0 4px 2px rgba(0,0,0,.15); } a.is-vertical-toggle-icon { display: flex; justify-content: flex-end; margin-top: 35px; padding: 10px 15px; } a.is-vertical-toggle-icon .fa-bars { font-size: 23px; color: #00807F; } 

 <script src="https://use.fontawesome.com/a2e210f715.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <header class=" is-vertical is-vertical-toggle"> <div class="header-menu"> <a href="#" class="is-vertical-toggle-icon"> <span><i class="fa fa-bars"></i></span> </a> </div> </header> 

Answer 2

Ok after seeing the reference website, you can setup a setTimeout with the 1s delay and when the mouse is over the sidebar, we clear the timeout and on mouse out we reapply the timeout, please refer the below code!

 var timeout; function hide() { timeout = setTimeout(function() { $('header.is-vertical-toggle .header-menu').animate({ 'left': '-201' }); $('a.is-vertical-toggle-icon .fa-bars').show(); }, 1000); } $('a.is-vertical-toggle-icon .fa-bars').click(function() { $('header.is-vertical-toggle .header-menu').animate({ 'left': '0' }); event.stopPropagation(); $('a.is-vertical-toggle-icon .fa-bars').hide(); hide(); }); $(window).click(function() { $('header.is-vertical-toggle .header-menu').animate({ 'left': '-201' }); $('a.is-vertical-toggle-icon .fa-bars').show(); }); $('.header-menu').on("mouseover", function() { clearTimeout(timeout); }); $('.header-menu').on("mouseleave", function() { event.stopPropagation(); hide(); }); 

 .wrapper { position: relative; width: 100%; } header.is-vertical-toggle .header-menu { position: fixed; top: 0; left: -201px; padding: 0; width: 250px; height: 100%; background-color: #ccc; -webkit-box-shadow: 2px 0 4px 2px rgba(0, 0, 0, .15); box-shadow: 2px 0 4px 2px rgba(0, 0, 0, .15); } a.is-vertical-toggle-icon { display: flex; justify-content: flex-end; margin-top: 35px; padding: 10px 15px; } a.is-vertical-toggle-icon .fa-bars { font-size: 23px; color: #00807F; } 

 <script src="https://use.fontawesome.com/a2e210f715.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <header class=" is-vertical is-vertical-toggle"> <div class="header-menu"> <a href="#" class="is-vertical-toggle-icon"> <span><i class="fa fa-bars"></i></span> </a> </div> </header>