Example code for my "Add A Slideout Sidebar To A Responsive Theme" tutorial http://joshpress.net/blog/add-slideout-sidebars-to-wordpress/

1-slideout.php

<?php
if ( wp_is_mobile() ) : ?>
  <a id="menu-toggle"  class="second" title="<?php _e( 'Click To Show Sidebar', 'yt1300' ); ?>" href="#"><span class="genericon genericon-menu"></span></a>
<?php
endif;

2-slideout.php

<?php
  function slug_slideout() {
    //add css and js
    wp_enqueue_script( 'slideout-sidebar', get_stylesheet_directory_uri().'/slideout.js', array('jquery'), null, true );
    //Be sure to set the right theme (dark or light here)
    wp_enqueue_style( 'sidr', get_stylesheet_directory_uri().'/css/jquery.sidr.dark.css');
  }
  add_action( 'wp_enqueue_scripts', 'slug_slideout' );
    
    

3-slideout.css

.hide {
    display: none;
}

.unhide {
    display: inline;
}

4-slideout.js

jQuery(document).ready(function($) {
    //put IDs for sidebar and toggle in vars
    var toggle = "#menu-toggle";
    var slideout = "#secondary-mobile";

5-slideout.js

    //calculate the width of the mobile sidebar and put inverse in var
    var slideoff = -Math.abs( $( slideout ).width() );
    //add margin-left to mobile sidebar to push off canvas
    $( slideout).css( "marginLeft", slideoff );

6-slideout.js

$( toggle ).on('click', function () {
    if ( $( slideout ).hasClass( 'hide' )) {
      //do stuff to show sidebar
    } else {
      //do stuff to hide sidebar  
    }
}); //end slideout function

7-slideout.js

jQuery(document).ready(function($) {
    //put IDs for sidebar and toggle in vars
    var toggle = "#menu-toggle";
    var slideout = "#secondary-mobile";
    //calculate the width of the mobile sidebar and put inverse in var
    var slideoff = -Math.abs( $( slideout ).width() );
    //add margin-left to mobile sidebar to push off canvas
    $( slideout).css( "marginLeft", slideoff );
    //When toggle is clicked show the slideout
    $( toggle ).on('click', function () {
        if ( $( slideout ).hasClass( 'hide' )) {
                $( slideout ).removeClass( 'hide').addClass( 'unhide' ).animate({
                    opacity: 1,
                    marginLeft: 0,
                }, 500, function() {
                    //I can haz callback?
                });
        } else {
            $( slideout ).animate({
                opacity: 0,
                marginLeft: slideoff,
            }, 500, function() {
                $( slideout ).addClass( 'hide').removeClass( 'unhide' );
            });

        }
   }); //end slideout function
}); //end noConflict