如何使用jQuery创建幻灯片菜单（从右至左/从左至右）

Question

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 1

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; left: 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> 

Answer 2

try change your JS with this one it may be helpful

 $('.asideMenu').click(function() { var clicks = $(this).data('clicks'); if (clicks) { $(this).css({ 'left':'-10px' }); $(this).html('<span class="openMenu"> open menu -> </span>'); } else { $('.asideMenu').css({ 'left':'-200px' }); } $(this).data("clicks", !clicks); }); 

 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; } .openMenu{ color:#000; float:right; cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <aside class="asideMenu"> i'm the menu click me </aside>