Sandwich button and Responsive Design

I need your assistance. Please take a look to my code and say to me what's wrong, since my sandwich button doesn't work. Here is my HTML:

<div id="header">
            <div> <!--here is my sandwich button !-->
                <img class="nav_menu" src="/templates/shablon/images/menu_button.png"  alt="button" border="0"/>
            </div>
            <div> <!--Here is cross button to close the sandwich button!-->
                <img class="nav_close" src="templates/shablon/images/menu_close.png" alt="cross_button" />
            </div>
            <div id="top_menu_outer"> 
            <div id="header_inner">
                <div id="top_menu"><jdoc:include type="modules" name="top_menu" style="xhtml" />
                </div>

And here is my jQuery:

   $(document).ready(function(){
    $("img.nav_menu").click(function(){
           $('#top_menu_outer').addClass("_opened");
    });
    $("img.only_mobile.nav_close ").click(function(){
           $('#top_menu_outer').removeClass("_opened");
    });
    var buttonUp = $('#up-button');
    var currentScrollTop = 0;
    $(window).scroll(function(e){
        currentScrollTop = $(window).scrollTop();
        if( currentScrollTop >= 200 ){
            buttonUp.fadeIn(1000);
        } else {
            buttonUp.fadeOut(1000);
        }
    });

    buttonUp.click(function(e){
        e.preventDefault();

        $('html, body').animate({
            scrollTop: 0
        });
    });