Daniel Daniel - 1 year ago 80
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/


<aside class="asideMenu">

i'm the menu click me



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

Answer Source

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')) {
  } else {
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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download