I'm trying to create a slide out menu, that open an closes on the same a tag. I've put something together but, it runs through the whole animation instead of pausing after opening.

HTML

<header>
    <nav>
        <ul class="slide-menu">
            <li class="menu-element"><a href="#" id="aboutopen">How tall?</a></li>
            <li class="menu-element"><a href="#book">Books</a></li>
            <li class="menu-element"><a href="weblink" target="_blank">Journal</a></li>
            <li class="menu-element"><a href="#" id="aboutcontact">Contact</a></li>
        </ul>
        <a id="puller" href="#">Menu</a>
    </nav>
</header>

Jquery

$(document).ready(function()
  {
   $("#puller").click(function(){
   $(".slide-menu").animate({
   marginLeft: '+=360px'
}, 500);
 });

 $("#puller").click(function(){
   $(".slide-menu").animate({
   marginLeft: '-=360px'
 }, 500);
 });


});

Can anyone help with this?

I'm trying to create a slide out menu, that open an closes on the same a tag. I've put something together but, it runs through the whole animation instead of pausing after opening.

HTML

<header>
    <nav>
        <ul class="slide-menu">
            <li class="menu-element"><a href="#" id="aboutopen">How tall?</a></li>
            <li class="menu-element"><a href="#book">Books</a></li>
            <li class="menu-element"><a href="weblink" target="_blank">Journal</a></li>
            <li class="menu-element"><a href="#" id="aboutcontact">Contact</a></li>
        </ul>
        <a id="puller" href="#">Menu</a>
    </nav>
</header>

Jquery

$(document).ready(function()
  {
   $("#puller").click(function(){
   $(".slide-menu").animate({
   marginLeft: '+=360px'
}, 500);
 });

 $("#puller").click(function(){
   $(".slide-menu").animate({
   marginLeft: '-=360px'
 }, 500);
 });


});

Can anyone help with this?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Nov 13, 2013 at 22:39 user2674488user2674488 111 silver badge11 bronze badge 1

• Left an answer, if it works, please "accept" it. :) – Mike Barwick Commented Nov 13, 2013 at 22:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Using jQuery toggle is a good idea. You can also simply maintain the state of the menu as to slided out already or not and take action like this

$(document).ready(function(){

   var slide = false;
   $("#puller").click(function(){

   if(slide){
        $(".slide-menu").animate({marginLeft: '-=360x'}, 500);
        slide = false;
   }else{
       $(".slide-menu").animate({marginLeft: '+=360px'}, 500);
        slide = true
   }
   });

});

Use jQuery Toggle, like so. Simple.

$(document).ready(function() {
    var menu = $('.slide-menu');
    var speed = 500; // set animation speed

    $('#puller').toggle(
        function(){
            menu.animate({
                marginLeft: '+=360px'
            }, speed);
        },
        function(){
            menu.animate({
                marginLeft: '-=360px'
            }, speed);
        }
    );
)};