CODEWITHSUNDEEP
jquerycssmobile
Flo
Flo

Reputation: 359

Jquery responsive mobile nav to regular nav

I'm having a small nav problem that my code does not seem to be solving.

I am working on a scratch made site, i am making a responsive design that makes my nav into a sliding side menu when its 880px wide

the problem is something i will not realistically have to worry about but its possible a client could see it and that would be bad.

when I resize my web browser to mobile size and open up the side menu, close it, then resize to desktop size my nav is about 135px to the right due to my "transform: translatex(135px)"

but when i leave my slide nav open (transform: translateX(opx) its obviously in the right position.

here is the slider codeing

    //mobile menu toggle
        var toggle = "closed";

        var mobileNavOpen = function () {

            $('.navi').css({ "transform " : "translate(0px, 0px)",
                        "-webkit-transform" : "translate(0px, 0px)",
                        "-moz-transform" : "translate(0px, 0px)",
                        "-o-transform" : "translate(0px, 0px)",
                        "-ms-transform" : "translate(0px, 0px)"

        });

            toggle = "open";

        };

        var mobileNavClose = function () {

            $('.navi').css({ "transform " : "translate(135px, 0px)",
                        "-webkit-transform" : "translate(135px, 0px)",
                        "-moz-transform" : "translate(135px, 0px)",
                        "-o-transform" : "translate(135px, 0px)",
                        "-ms-transform" : "translate(135px, 0px)"

        });

        toggle = "closed";

        };


        $('#nav_wrap').click( function () {

            if ( toggle == "closed" ) {

            mobileNavOpen();

            }
        else {

        mobileNavClose();

        }

        });

here is my attempt at fixing it. which doesn't work for some reason. what I'm trying to do is if my slide is closed and I go back to regular desktop width, it opens (translate: 0px) and if i go back to mobile mode it recognizes its been in the wide desktop and now the slider should be closed so its not open when you go back.

var fromWide = true;
        $(window).on("resize", function () {
            if (toggle == "closed" && $(window).width > 863 ) {
                mobileNavOpen();
                fromWide = true;
            }
            else if (fromWide == true && $(window).width < 863 ) {
                mobileNavClose();
                fromWide = false;
            }

        });

here is a demo of the site, any help would be appreciated!

picture of problem

Demo

Upvotes: 0

Views: 118

Answers (1)

Marcelo
Marcelo

Reputation: 4425

My suggestion is that, rather than add on remove CSS rules to your elemens, you toggle an open class. This class has a CSS rule that targets it in media queries which behaves as you want at each size. Lastly, you can check on window resize if you have gone to your 'wide' mode and remove that open class.

For example:

Instead of:

JQuery

$('#nav_wrap').click( function () {
    $('.navi').toggleClass("open");
});

$(window).on("resize", function () {
    if ($(window).width > 880 ) { 
        $('.navi').removeClass("open");
    }
});

CSS

@media (max-width: 880px) {
    .navi.open {
        transform: translate(135px, 0px);
        -webkit-transform: translate(135px, 0px);
        -moz-transform: translate(135px, 0px);
        -o-transform: translate(135px, 0px);
        -ms-transform: translate(135px, 0px);
    }
}

Upvotes: 1

Related Questions