Toggling a slide out menu

Question

So I'm in the process of making a slide out menu on my site. It slides out on click, but how can I set it up so on another click it will slide back in?

Pretty simple source code right now:

$(document).ready(function() {
   $("#menuicon").click(function() {
      $("nav ul, .content").animate({left: "-15%"}, 1000);
   });
});

Thanks in advance!

Answer 1

You may be able to just use the toggle() function in place of click, but I'm not a big fan of toggle. The below solution incorporates a class as well, but this is how I'd do it:

$(document).ready(function() {
  $("#menuicon").click(function(e) {
    var menuicon = $(e.target);

    if (!menuicon.hasClass('open'){
      menuicon.addClass('open');
      $("nav ul, .content").animate({left: "-15%"}, 1000);
    } else {
      menuicon.removeClass('open');
      $("nav ul, .content").animate({left: "0"}, 1000);
    }
  });
});

I would also incorporate a 'working' class on there to prevent double clicks, but that may be more than you need with your project.

---

EDIT:

Little extra tidbit that I use quite a bit, if you have complex menu options that involve a few different objects (like an anchor, with an img and a span inside, or some other elements in it) you can pair e.target with the jquery 'closest()' function to be sure you're always selecting the anchor and not one of its children.

var clicked = $(e.target).closest('a');

This is pretty helpful if you're trying to also fetch any attribute values from your clicked objects, using this you know for certain that your selection will always be the 'a' (rather than e.target returning a child img or something), and you can work from there.

Answer 2

Check this simple Slide Out menu.

DEMO http://jsfiddle.net/yeyene/TLtqe/1/

$('a').on('click',function() {
    if($('#website').css('left')=='0px'){
        $('#website').animate({left: '-30%'}, 1000);        
    }else{
        $('#website').animate({left:0}, 1000); 
    }
});

Answer 3

Use the jquery slidetoggle instead! Eg, $(document).ready(function() { $("#menuicon").click(function() { $("nav ul, .content").slideToggle(1000); }); }); instead of animate!

Answer 4

Couldn't you use something like this?

  $(document).ready(function() {
      $(".nav_button").click(function () {
      $(".top.mini_nav").slideToggle();
      });
      });

I'm using this here -> DEMO

And this is the CSS I use for that button

.top.mini_nav {
display: none;
top: 20px;
left: 20px;
margin-bottom: 60px;
position: relative;

}
.top.mini_nav a:hover {
background-color: #F8F8F8;
}
.nav_button {
position: relative;
width: 40px;
height: 40px;
left: 40px;
display: block;
color: white;
background-color: #2898F2;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 39px;
cursor: pointer;
top: 20px;
border-radius: 5px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.nav_button:hover {
background-color: #D0A624;
}

You will probably want something cleaner - but this works fine so far for me.

Answer 5

I realized that I just needed to make a variable that would set itself to true/false depending on if it was open.

var open = false;

$(document).ready(function() {
   $("#menuicon").click (function() {
      if (!open){
         $(".content, nav ul").animate({left: "-=15%"}, 1000);
         open = true;
      } else {
         $(".content, nav ul").animate({left: "+=15%"}, 1000);
         open = false;
      }
   });
});

Thanks for all the help guys!