Added close menu option for codrops/SidebarTransitions. Just add closeMenu as the ID to an item in your st-menu container (in your menu)

sidebarEffects.js

/**
 * sidebarEffects.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var SidebarMenuEffects = (function() {

    function hasParentClass(e, classname) {
        if (e === document) return false;
        if (classie.has(e, classname)) {
            return true;
        }
        return e.parentNode && hasParentClass(e.parentNode, classname);
    }

    // http://coveroverflow.com/a/11381730/989439
    function mobilecheck() {
        var check = false;
        (function(a) {
            if (/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true
        })(navigator.userAgent || navigator.vendor || window.opera);
        return check;
    }

    function init() {

        var container = document.getElementById('st-container'),
            closeMenu = document.getElementById('closeMenu'),
            buttons = Array.prototype.slice.call(document.querySelectorAll('.st-trigger-effect')),
            // Event type (if mobile use touch events)
            eventtype = mobilecheck() ? 'touchstart' : 'click',
            resetMenu = function() {
                classie.remove(container, 'st-menu-open');
            },
            bodyClickFn = function(evt) {
                if (!hasParentClass(evt.target, 'st-menu')) {
                    resetMenu();
                    document.removeEventListener(eventtype, bodyClickFn);
                }
            },
            closeMenuClickFn = function(evt) {
                resetMenu();
                document.removeEventListener(eventtype, closeMenuClickFn);
            }

        buttons.forEach(function(el, i) {
            var effect = el.getAttribute('data-effect');

            el.addEventListener(eventtype, function(ev) {
                ev.stopPropagation();
                ev.preventDefault();
                container.className = 'st-container'; // clear
                classie.add(container, effect);
                setTimeout(function() {
                    classie.add(container, 'st-menu-open');
                }, 25);
                document.addEventListener(eventtype, bodyClickFn);
                closeMenu.addEventListener(eventtype, closeMenuClickFn);
            });
        });

    }

    init();

})();

It doesn't work

cant get it to work either

close button is working for me. you just need to create new button.
Hey Braunson i want to use same button for show and hide to in that case please help me.

create a

[X] Close

Place it anywhere you want preferably in

Do not place the button into "div.st-content" since you can disable it upon clicking on the div.

Is it possible to make toggle behavior on button?

This worked for me...

    function init() {

        var container = document.getElementById('st-container'),
            closeMenu = document.getElementById('closeMenu'),
            buttons = Array.prototype.slice.call(document.querySelectorAll('.st-trigger-effect')),
            // Event type (if mobile use touch events)
            eventtype = mobilecheck() ? 'touchstart' : 'click',
            resetMenu = function() {
                classie.remove(container, 'st-menu-open');
            },
            bodyClickFn = function(evt) {
                if (!hasParentClass(evt.target, 'st-menu')) {
                    resetMenu();
                    document.removeEventListener(eventtype, bodyClickFn);
                }
            },
            closeMenuClickFn = function(evt) {
                resetMenu();
                document.removeEventListener(eventtype, closeMenuClickFn);
            }

        buttons.forEach(function(el, i) {
            var effect = el.getAttribute('data-effect');

            el.addEventListener(eventtype, function(ev) {
                ev.stopPropagation();
                ev.preventDefault();
                container.className = 'st-container'; // clear
                classie.add(container, effect);
                setTimeout(function() {
                    classie.add(container, 'st-menu-open');
                }, 25);
                document.addEventListener(eventtype, bodyClickFn);
                closeMenu.addEventListener(eventtype, closeMenuClickFn);
            });
        });

    }

You are amazing!
Thank you,

That script is not working fine on windows phone 8. menu is not getting opened for this. Please suggest. Also that is not working for IE version

Thanks @miix -- Updated the Gist.

How can the menu automatically be closed when I click on one of the buttons in menu ?

please help. how to do the same using mousehover instead of click? please help

After some hours I got a solution to close the sidebar with the same button.
I changed
classie.addClass(container, 'st-menu-open');
to
classie.toggleClass(container, 'st-menu-open');

With no effect. Then I changed

container.className = 'st-container';
to
container.id = 'st-container';

Now it works! I can open and close with the same button.
(I made a burger icon)

`buttons.forEach(function(el, i) {
var effect = el.getAttribute('data-effect');

        el.addEventListener(eventtype, function(ev) {
            ev.stopPropagation();
            ev.preventDefault();
            container.id = 'st-container'; // ORIGINAL:  container.className = 'st-container';
            classie.add(container, effect);
            setTimeout(function() {
                classie.toggleClass(container, 'st-menu-open'); // FIX: Vorher: addClass
            }, 25);
            document.addEventListener(eventtype, bodyClickFn);
            //closeMenu.addEventListener(eventtype, closeMenuClickFn);
        });
    });`