slideout
slideout copied to clipboard
Mango
Multiple sides
With this library possible to do menu on both sides? Because i can't. 2 problems:
- Swipe event working wrong with 2 sides. Maybe possible to handle that event by myself?
- Both menus are visible
Will be useful if there would be mod for <html> tag.
slideout-open slideout-open--left
slideout-open slideout-open--right
It will be very painful for my project to change library to another one. Thanks for any answer.
@siddarthvader Yes...more or less. The main problem with events, that both sides are exists. If you'll try to hide second one with display:none then laggs on closing.
.slideout-open--right .slideout-menu-left {
visibility: hidden;
pointer-events: none;
z-index: -1;
}
Try hide second one in this way. Then listen beforeopen.
.slideout-open--right will hide .slideout-menu-left. If you will open it very slow with swipe, then you will see left menu for a moment. For this i have only idea - use hammer.js to handle events by myself.
But for now at least both works okay.
worked like charm. Thanks.
[EDITED]: there are some edge cases where it creates problem, but i think that can be taken care of.
slideLeft.on('open', () => {
document.getElementById('kickstart').classList.add('slideout-open--left');
slideRight.disableTouch();
});
slideLeft.on('close', () => {
document.getElementById('kickstart').classList.remove('slideout-open--left');
slideRight.enableTouch();
});
slideRight.on('open', () => {
document.getElementById('kickstart').classList.add('slideout-open--right');
slideLeft.disableTouch();
});
slideRight.on('close', () => {
document.getElementById('kickstart').classList.remove('slideout-open--right');
slideLeft.enableTouch();
});`
I did something like this and it worked for me like charm.