Skip to content

Instantly share code, notes, and snippets.

@Braunson
Last active June 24, 2017 07:16
Show Gist options
  • Select an option

  • Save Braunson/6887262 to your computer and use it in GitHub Desktop.

Select an option

Save Braunson/6887262 to your computer and use it in GitHub Desktop.
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 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();
})();
@bhawnagit
Copy link
Copy Markdown

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

@Braunson
Copy link
Copy Markdown
Author

Thanks @miix -- Updated the Gist.

@incredible100rav
Copy link
Copy Markdown

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

@likhith-kd
Copy link
Copy Markdown

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

@alexanderkryska
Copy link
Copy Markdown

alexanderkryska commented Apr 28, 2017

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);
        });
    });`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment