-
-
Save Braunson/6887262 to your computer and use it in GitHub Desktop.
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);
});
});`
I've created a push-request for this, you can view this codrops/SidebarTransitions#2