CODEWITHSUNDEEP
jqueryhtmlcssnavigationsidebar
UserX
UserX

Reputation: 1337

My side left menu is not working

Im trying to devellop a side left menu, based on an example that I see on google, but when I click in my "Menu" to open the side menu, the menu dont opens.

This is my html, where I have a div id="menu" that is my menu that I want to show in my side left menu.

I also have a div id="content", that is a div that contains all of my content, I want to push this content to right When I click in my "Menu" to open the side left menu.

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<div id="menu">
        <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
        </ul> 
</div>
<div id="content">
        <div id="menubar">
            <div id="open_menu">
                Menu
            </div>
        </div>
 </div>

Below, is the jQuery, that opens my side left menu with a toggle slow elffect and change the text of my Menu to Menu for Close, when the menu is open.

$('#open_menu').toggle( 
    function() {
        $('#content').animate({ left: 250 }, 'slow', function() {
            $('#open_menu').html('Close');
        });
    }, 
    function() {
        $('#content').animate({ left: 0 }, 'slow', function() {
            $('#open_menu').html('Menu');
        });
    }
);

Do you see where can be the problem?

My fiddle with the problem: http://jsfiddle.net/3Gezv/

Upvotes: 0

Views: 867

Answers (1)

Mikk3lRo
Mikk3lRo

Reputation: 3496

That's not what toggle is for... check the jQuery documentation: http://api.jquery.com/toggle/

Just use the click event and keep track of the status yourself one way or another. Here is a working example based on your fiddle:

$('#open_menu').click(function(){
    if ($(this).hasClass('toggled_on')) {
        $(this).removeClass('toggled_on');
        $('#content').animate({ left: 0 }, 'slow', function() {
            $('#open_menu').html('Menu');
        });
    } else {
        $(this).addClass('toggled_on');
        $('#content').animate({ left: 250 }, 'slow', function() {
            $('#open_menu').html('Close');
        });
    }
});

This uses a class which is suboptimal, so unless you need it for something else just use a variable instead.

Upvotes: 1

Related Questions