Can't get slide out menu to display properly

Question

Here is a link to the site in progress -- http://barret.co/resources/testsite12345/

There is almost nothing on the site yet as I am working on the skeleton, so inspecting element should be very easy to pinpoint what's wrong.

I'm working on a slide out menu from scratch but am fairly new to jQuery. Basically, what I have now is working, but not exactly how I'd like it to be. as you can see, when you click the menu button in top left, it slides the panel left and back to the right. I'd like for this panel to initially be hidden upon viewing the page, and then slide out when menu is clicked.

Also, is there an easy way to close this panel if a user clicks onto the main page? The only way it closes now is if the menu button is clicked again.

Any help is very much appreciated.

Thanks in advance!

Answer 1

添加以下内容：$（“。logo”）。hide（）到$（document）.ready（function（）{}）;

Answer 2

I think you simply had a mixup with the classes.

Add this to your #left-menu css:

right: 300px;

and then use this:

jQuery(document).ready(function($) {
  $('#menu-container #right-menu').click(function(){
    var hidden = $('#left-menu');
    if (! hidden.hasClass('visible')){
        hidden.animate({"right":"0px"}, "slow").addClass('visible');
    } else {
        hidden.animate({"right":"300px"}, "slow").removeClass('visible');
    }
    });
}); // end