Question

I am working on a jQuery menu for my friend. The menu is done, the only problem is that the slide down is not fluid and I can’t find the problem here.

jQuery code:

$.fn.vmenu=function(settings)
{
    vMenu={
        init: function(elem) {
            $(elem).find('li').each(function(){
                var u=$(this).children('ul');
                if (u.length>0) {
                    $(this).addClass('has_child');
                }
                var a=$(this).children('a');
                if (a.hasClass('active')) {
                    $(this).addClass('active').parents('li').addClass('open');
                }
            });

            $(elem).find('ul').each(function(){
                var o=$(this).find('li.open');
                var a=$(this).find('a.active');
                if (o.length == 0 && a.length==0) {
                    $(this).css('display','none');
                }
            });

            $(elem).find('a').click(function(){
                return vMenu.click($(this));
            });
        },
        click: function(elem) {
            var l=$(elem).parent('li');
            var u=$(l).children('ul');

            if (u.length == 0) {
                return this.forward(elem);
            }

            if ($(l).hasClass('open')) {
                $(l).removeClass('open');
                $(l).find('ul').stop(true,true).slideUp(300);
                $(l).find('li').removeClass('open');
                if($(l).children('a').hasClass('open')) {
                    $(l).children('a').css({color:'#939393'});
                    $(l).children('a').removeClass('open');
                }
            } else {
                $(l).addClass('open');
                $(u).stop(true,true).slideDown(300);
                $(l).children('a').css({color:'#F37121'});
                $(l).children('a').addClass('open');
            }

            return false;
        },
        forward: function(elem) {
            return true;
        }
    }
    vMenu.init($(this));
}

$(document).ready(function(){
 $('#vmenu').vmenu();
});

CSS code:

/* ### partner box ### */
.partnerBox { padding-top: 52px; width: 253px; float: left; background: url('http://www.realbingo.nl/images/partner-top.png') left top no-repeat; }
.partnerBox .bottom { padding-bottom: 12px; float: left; background: url('http://www.realbingo.nl/images/paasbonus-bottom.png') left bottom no-repeat; }
.partnerBox .mid { padding: 0 20px 0 15px; width: 218px; float: left; background: url('http://www.realbingo.nl/images/paasbonus-mid.png') left top repeat-y; }
.partnerBox h3 { padding-left: 5px; margin-top: -36px; color: #fff; font-size: 20px; }
.partnerBox ul { padding: 0px 0 0 0; margin-bottom: -5px; overflow: hidden; width: 100%; }
.partnerBox li { padding-left: 5px; font-size: 13px; float: left; list-style: none; width: 208px; line-height: 39px; border-bottom: 0px; }
.partnerBox li a { padding-left: 9px; color: #939393; text-decoration: none; display: block; background: url('http://www.realbingo.nl/images/arrow1.png') left center no-repeat; }
.partnerBox li a:hover { color: #F37121 !important; }
#vmenu li { border-bottom: #ece3e3 solid 1px; }
#vmenu li > ul > li { border-bottom: 0px; height: 30px; line-height: 30px; margin-top: -8px;}
.text ul{ line-height: 18px; margin-bottom: 2px; }

HTML code:

<div class="partnerBox">
    <div class="bottom">
        <div class="mid">
            <h3>Linkpartners</h3>
            <ul id="vmenu">
                <li><a href="#">Bingo</a>
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Roulette</a>
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Poker</a>
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                    </ul>
                </li>
                <li class="text"><a href="#">Tekst</a>
                    <ul>
                        Dit is een lap tekst die door en door gaat tot het einde.. en verder... :D:D:D:D:D:D:D:D
                    </ul>
                </li>
            </ul>   
        </div>
    </div>
</div>

Any tips and/or ideas to make the code more efficient are very appreciated too.

Answer 1

If you’re talking about the slideDown jumping when it gets to the bottom of the reveal it is likely to be caused by the bottom margin on the “.text ul” CSS. jQuery can’t calculate the height including margins.

If you’re talking about the slideDown content moving around during the animation, this is often related to the top padding of either the element you’re sliding or the first child element.