CODEWITHSUNDEEP
jqueryslideslidetoggle
Ray
Ray

Reputation: 171

Where is this margin/padding coming from

Example: http://jsfiddle.net/6a3eZ/46/

When clicking on 'MISC' or 'MISC2', their respective menus slide open. However it's not smooth; at the very top, there's some odd margin or padding that gets animated, making the menu slide animation stop for a moment while something unidentified gets animated, and then snap open/closed.

Can't seem to locate the cause. Many thanks.

jQuery(document).ready(function ($) {
    jQuery('.menu ul').slideUp(0);

    jQuery('.menu li.sub').click(function () {
        var target = jQuery(this).children('a');
        if(target.hasClass('menu-expanded')){
            target.removeClass('menu-expanded');
        }else{
            jQuery('.menu-item > a').removeClass('menu-expanded');
            target.addClass('menu-expanded');
        }
        jQuery(this).find('ul:first')
                    .slideToggle(2000)
                    .end()
                    .siblings('li')
                    .find('ul')
                    .slideUp(2000);
    });
});

Upvotes: 4

Views: 62

Answers (2)

PonrajPaul
PonrajPaul

Reputation: 174

remove the position fixed from #menu...or change to position:relative;

#menu{
 position:relative;
}

Upvotes: 0

Ray
Ray

Reputation: 171

Tracked the issue down to ul.sub-menu's display:inline-block; Should be display:block; instead.

http://jsfiddle.net/6a3eZ/53/

Upvotes: 1

Related Questions