Daniel Daniel - 5 months ago 16
jQuery Question

how to create a slide menu ( right to left / left to right ) with jQuery

i was trying to create a slide menu with jQuery. By default the menu is open when the page loads. and when i clicks on it, Menu slides from right to left. but i don't know how we can push it to its default position. or how we can push it back and forth.

JS Fiddle: http://jsfiddle.net/pPf7N/307/

HTML

<aside class="asideMenu">

i'm the menu click me

</aside>


jQuery

$('.asideMenu').on('click', function(){
$(this).css({
'left':'-200px'
});
$(this).html('<span class="openMenu"> open menu -> </span>');
$('.openMenu').on('click', function(){
alert('want to push the menu to its default position.');
});
});

Answer

This is a working example, and you can elaborate it to apply according to your needs. Hope it helps.

$('.asideMenu').on('click', function() {
  if ($(this).hasClass('menuClosed')) {
    $(this).removeClass('menuClosed');
  } else {
    $(this).addClass('menuClosed');
  }
});
aside {
  height: 900px;
  width: 300px;
  position: absolute;
  background-color: #ddd;
  margin: 0px;
  padding: 0px;
  cursor: pointer;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.menuClosed {
  left: -200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<aside class="asideMenu">
  i'm the menu click me
</aside>