javascript - I'm trying to get my navigation menu to slide left and push body with it -

i'm new jquery, , i'm trying write script push navigation menu out right hand side of screen towards left, , push rest of body it.

i have been following tutorial: http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

i'm not sure i'm doing, or css classes should using in javascript, of different menu options/examples have codes mixed isn't helpful if you're not particularly experienced coding.

i know want code do, i'm way out of depth applying own wordpress theme – give me pointers i'm doing wrong?

so far have following css:

@media screen , (min-width : 0px) , (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;     } } 

i have taken / adapted following javascript:

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

my site header:

<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> 

there error in javascript code. img undefined , method of writing javascript function incorrect.

1. add id attribute menu img

   <img id="menuleft" class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/menu.png">

2. create javascript object menu

   var menuleft = document.getelementbyid( 'menuleft' );

3. access object menuleft trigger sliding effect

   menuleft.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( body, 'body-push' ); classie.toggle( menuright, 'nav.header-nav-open' ); disableother( 'showrightpush' ); };

update

since third party plugin, need include css (http://tympanus.net/blueprints/slidepushmenus/css/default.css) , js (http://tympanus.net/blueprints/slidepushmenus/js/classie.js) files sliding menu.