CODEWITHSUNDEEP
jquerymobilemenunavigation
valerio0999
valerio0999

Reputation: 12138

jquery mmenu.js on single page website

i've set up this example of my problem on jsFiddle: see it also in fullscreen because the example is responsive:

what happens is after i click on a menu item when mmenu is activated, the scroll jumps to random anchors, and not to the right one. can anybody help?

i have jquery 1.9.1, mmenu.js and jqueryeasing and these are the inline scripts

$(function() {
            $('nav ul li a').bind('click',function(event){
                var $anchor = $(this);
                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1000,'easeInOutExpo');
                event.preventDefault();
            });
        });



        $(function() {
            $('nav#nav').mmenu({
                configuration: {
                    //  For some odd reason, the header won't stay "fixed"
                    //  when using hardware acceleration
                    hardwareAcceleration: false
                }
            });
        });

Upvotes: 0

Views: 1906

Answers (1)

valerio0999
valerio0999

Reputation: 12138

nobody answered but i want to share the fix. Fred, the creator of mmenu, was kind enough to offer some support via email, you can see the fix here: http://jsfiddle.net/9FdXv/8/

here the js:

$(function() {
            $('nav ul li a').bind('click',function(event){
                var $anchor = $(this);

                $('nav#nav').one('closed.mmenu', function() {
                    setTimeout(function() {
                        $('html, body').stop().animate({
                            scrollTop: $($anchor.attr('href')).offset().top
                        }, 1000,'easeInOutExpo');
                    }, 10);
                });
                $('nav#nav').trigger('close.mmenu');

                event.preventDefault();
                event.stopImmediatePropagation();
            });
        });



        $(function() {
            $('nav#nav').mmenu({
                configuration: {
                    //  For some odd reason, the header won't stay "fixed"
                    //  when using hardware acceleration
                    hardwareAcceleration: false
                }
            });
        });

hope this helps others

Upvotes: 2

Related Questions