我正在尝试让我的导航菜单向左滑动并用它推动身体

我是jQuery的新手，我正在尝试编写一个脚本，将导航菜单从屏幕的右侧向左推，并用它推动身体的其余部分。

我一直在遵循本教程：http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

不太确定我在做什么，或者我应该在javascript中使用哪些CSS类，因为所有不同的菜单选项/示例都将代码混合在一起，如果您不是特别有编码经验，这并没有真正的帮助。

确切地知道我想要代码做什么，但我已经超出了我的深度，将其应用于我自己的 Wordpress 主题——谁能给我指示我做错了什么？

到目前为止，我有以下 CSS：

@media only screen
and (min-width : 0px)
and (max-width : 1080px) {
    body {
        overflow-x: hidden;
        left: 0;
    }
    body-push {left: -240px;}
    img.standard.logo {
        height: 38px;
        width: 342px;
    }
    /* RESPONSIVE NAVIGATION MENU */
    img.menu.button {
        position:relative;
        display:block;
        width:25px;
        height:25px;
        background-size: 100%;
    }
    nav.header-nav {
        right:-240px;
        z-index:10;
        position:fixed;
        top:0;
        width:250px;
        height:100%;
        float:right;
        margin:0;
        padding:0;
        background-color:#1D1D1F;
        list-style:none;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
    }
    nav.header-nav nav.header-nav-open {
        right:0px;
    }
}

我已经采用/改编了以下JavaScript：

img.menu.button.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( body, 'body-push' );
    classie.toggle( menuRight, 'nav.header-nav-open' );
    disableOther( 'showRightPush' );
};

我的网站标题：

<header class="header">
    <!-- LOGOS -->
    <a href="#">
        <img class="standard logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2015/12/Lucie_Averill_Photography_Logo-2.png">
        <img class="white logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Lucie_Averill_Photography_Logo_White.png"></a>
    <!-- LOGOS -->
    <img class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">
    <!-- HEADER NAVIGATION MENU -->
    <nav class="header-nav">
        <div class="menu-header-menu-container">
            <ul id="menu-header-menu" class="menu">
                <li id="menu-item-463">
                    <a href="#">WORK</a>
                    <ul class="sub-menu">
                        <li id="menu-item-584"><a href="#">LANDSCAPES</a></li>
                        <li id="menu-item-473"><a href="#">SEASCAPES</a></li>
                        <li id="menu-item-478"><a href="#">MACRO</a></li>
                        <li id="menu-item-477"><a href="#">CITIES</a></li>
                        <li id="menu-item-475"><a href="#">LONG EXPOSURE</a></li>
                        <li id="menu-item-480"><a href="#">MISCELLANEOUS</a></li>
                    </ul>
                </li>
                <li id="menu-item-10"><a href="#">ABOUT</a></li>
                <li id="menu-item-464"><a href="#">SHOP</a></li>
                <li id="menu-item-923">
                    <a href="#">SOCIAL</a>
                    <ul class="sub-menu">
                        <li id="menu-item-11"><a target="_blank" href="#">FACEBOOK</a></li>
                        <li id="menu-item-924"><a href="#">INSTAGRAM</a></li>
                        <li id="menu-item-15"><a target="_blank" href="#">FLICKR</a></li>
                    </ul>
                </li>
                <li id="menu-item-14"><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </nav>
</header>