jquery slide hidden menu from left can’t configure js

5 Views

So I’ve been working on this for a while, I’ve tried many examples found here on stackoverflow, and then starting reading up on js/jquery for most of the day, but am still having trouble with this.

Basically I was able to create a hidden menu item that slides on to screen when clicked, and I was able to change the button used to open in by toggling the class, and send it back.

Read More

But after the first time through that process when I try to open it again, it opens and then closes automatically.

I built a jsfiddle, but have done it wrong as it’s not working the same as on my site.

fiddle: http://jsfiddle.net/VpnrV/1/

site: http://ericbrockmanwebsites.com/dev4/

code – html: 

<div id="dashboard">
    <nav id="access">
        <div class="open"></div>Here's a bunch of content representing the nav bar.
    </nav>
</div> <!-- dashboard -->

css: 

#dashboard {
  font-size:30px;
  float:left;
  position: absolute;
  right: -653px;
  z-index: 100;
}

#access {
    display: block;
    float: right;
    margin: 10px auto 0;
    width:730px;
}

.open {
  background: #cabd32 url(images/open.png) top left no-repeat;
  float:left;
  padding:13px 30px 16px;
}

.close {
  background: #cabd32 url(images/close.png) top left no-repeat;
  float:left;
  padding:13px 30px 16px;
}

my laughable js: 

$(document).ready(function() {  
    $('.open').click(function() {
        $('#dashboard').animate({ right: '0' });
            $(this).toggleClass('close'); 
            $('.close').click(function() {
            $('#dashboard').animate({right: '-653'});
         }
  );
 });

Any help is greatly appreciated!

Post Views: 5

Related posts

Leave a Reply

2 comments

  1. You are actually binding the class .close to multiple callback every time you click the button.

    you can try this:

    $('.open').bind('click',function(){ 
    $('#dashboard').stop().animate(
    {
        right: $(this).hasClass('close') ? '-653px' : '-400px'
    });
    $(this).toggleClass('close');
});

    Having stop() infront of animate() will cancel the current animation and do the next animation without queueing multiple animations up.

  2. You can actually do this in one click event. All this does is every time you click open it looks for the close class, if it’s there, close the menu, if not open it. Then toggle the close class:

    $(document).ready(function () {
    $('.open').on("click", function () {
        if ($(this).hasClass('close')) {
            $('#dashboard').animate({
                right: '-653'
            });
        } else {
            $('#dashboard').animate({
                right: '0'
            });
        }

        $(this).toggleClass('close');
    });
});

    I don’t know if this is the most effecient but it works for your example. I updated it as well: http://jsfiddle.net/VpnrV/3/