Menu transition while resizing

The issue I have is given on the following pen

http://codepen.io/dingo_d/pen/oXBYjW

I have a working menu. In mobile width (<700px) and in normal browser (>1170px).

If you refresh the pen on those sizes, and click on the menu item, everything works fine. On either sizes.

However on resize, the part of the toggle function that will control the animation is not working as it should. This code is inside the header_toggle() function

        $menu_toggle.on('click', function (e) {
            if ($(window).width()<960) {
                $(this).toggleClass('mobile_open');
                if ($(this).hasClass('mobile_open')) {
                    $navigation.fadeIn().animate({width: '70%'},250);
                } else{
                    $navigation.animate({width: '0' },250).fadeOut();
                }
            } else{
                $(this).toggleClass('open');
                if ($(this).hasClass('open')) {
                    $breadcrumbs_bar.toggle('slide', {direction: 'up'}, 250, function () {
                        $navigation.toggle('slide', {direction: 'down'}, 250).css('display', 'inline-block');
                    });
                } else {
                    $navigation.toggle('slide', {direction: 'down'}, 250, function () {
                        $breadcrumbs_bar.toggle('slide', {direction: 'up'}, 250).css('display', 'inline-block');
                    });
                }
            }
            e.preventDefault();
        });

It’s like that on resize, when you’re inside the function, the if statements are not working all the time? Any workaround?

My biggest concern is if someone is on a tablet, and flip it, and is right in between the resolutions, that this issue will happen.

On sizes above 960 px animation that happens is slide up and down, and the class that toggles is open, below that you have fade and width animation, and class toggle mobile_open.

Just doing it all with css is out of the option, because the slide up and down animation with css (using transform property) works only if I have overflow hidden for the container, but if I have a drop down menu, the overflow should be visible.

On resize code:

$(window).on('resize',function(){
    toggle_menu();
    header_toggle();
    if ($(window).width()>767) {
        if ($main_header.has($navigation)) {
            $navigation.detach().appendTo('.menu_wrapper');
        }
    } else{
        $navigation.detach().prependTo('body');
    }

});

The fiddle has all the jquery code.


Source: css3

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.