Javascript command to open and close the Side Menu

[sarpdiego]

Hello Seventhqueen Team,

i actualy want to make my website a litle bit confortabler for my mobile users, can you say me 2 commands to open and close the side menu?

i dont mean a toogle functionality, i mean one function which open the side menu and one to close it.

[sarpdiego]

*bump*

[sarpdiego]

i only found this in the theme JS

COPY CODE

sideMenu: function() {
            f(".open-sidebar").on("click", function() {
                f("body").toggleClass("offcanvas-open");
                f(".offcanvas-sidebar").toggleClass("is-open");
                return false
            });
            f(".kleo-page").on("click", function(o) {
                if (f(o.target).hasClass("open-sidebar") || f(o.target).closest(".open-sidebar").length > 0) {
                    return
                }
                f("body").removeClass("offcanvas-open");
                f(".offcanvas-sidebar").removeClass("is-open")
            })
        },

[sharmstr]

Those are the functions. Not sure exactly what you are after. Perhaps if you try explaining what you want to accomplish again, I’ll be able to help.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sarpdiego]

ok, i make me a javascript that alerts me if i swipe right or left with the finger over my touchscreen(on phones and tablets) so i want a open and close comand for the swipe menu. sorry for my bad english, i hope you understand what i mean and what i want. 🙂

[sharmstr]

looks like you’ve already found the answer, which is, it cant be done: https://archived.seventhqueen.com/forums/topic/side-menu-gestures-swipe-to-openclose

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sarpdiego]

no, i know that the theme officaly dont support a swpie menu, so i want to make a own. what i meen is what must i type in javascript to open the menu and what must i type in to close it, i dont talk about a toggle function.

[sharmstr]

I still dont know what you are asking then. Are you saying to want it opened on page load? Is the user going to click something? Basically, you can target the .open-sidebar class with whatever code you’re trying to use.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sarpdiego]

Sorry for my bad english,

i Have this script to make swipe interactions for Smartphone and Tablet users

COPY CODE

<script>
document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;                                                        
var yDown = null;                                                        

function handleTouchStart(evt) {                                         
    xDown = evt.touches[0].clientX;                                      
    yDown = evt.touches[0].clientY;                                      
};                                                

function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
            /* left swipe */ 
            /* Here the Side Menu close */
        } else {
            /* right swipe */
            /*Here the side Menu open */
        }                       
    } else {
        if ( yDiff > 0 ) {
            /* up swipe */ 
        } else { 
            /* down swipe */
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};
</script>

i comment out the section where i want to open and to close the side menu.
i hide the top menu for mobile users because i dosn’t like it, i want a smarter look of the menu, like facebook.
so what i need is a function like opensidemenu(); and closesidemenu();

im not a js pro maybe you can ask the programmer of the side menu(or are you the programmer?) what code i exactly need to open the side menu and close the side menu.

[Abe]

Hi there, sorry for the late reply.
This should be for opening the sidemenu:

COPY CODE

            $('body').toggleClass('offcanvas-open', true);
            $('.offcanvas-sidebar').toggleClass('is-open', true);
            return false;

and this for closing it

COPY CODE

            $('body').toggleClass('offcanvas-open', false);
            $('.offcanvas-sidebar').toggleClass('is-open', false);
            return false;

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[sarpdiego]

Thankyou Abe, thats what i need it works perfect 🙂

[Abe]

awesome 😉

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Author]

Posts