CODEWITHSUNDEEP
jquery
seoppc
seoppc

Reputation: 2824

jQuery dropdown navigation

I am using simple jQuery code to make drop down navigation, but its not giving expected results...

jquery code

$(function() {
    $('.nav li').hover(function () {
            $('ul', this).slideDown(100);
        }, function () {
            $('ul', this).slideUp(100);     
        });
});

html code

<ul class="nav radius clearfix">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Projects</a>
        <ul class="radius">
            <li><a href="#">Recent Projects</a></li>
            <li><a href="#">Archive Projects</a></li>
            <li><a href="#">New Project</a></li>
        </ul>
     </li>
     <li><a href="#">Messages</a></li>
</ul>

Please check and let me know what's I am missing. thanks.

Upvotes: 0

Views: 137

Answers (2)

Timbo
Timbo

Reputation: 4533

Edit: to address the animation "flickering issue" in addition to starting in a closed state, you can use the following (check it on jsfiddle here). It's not very elegant but this issue arises from the way some browsers handle the change in size of the elements involved, and this does resolve that:

$(function() {
    $('.nav li').hover(function () {

        $('ul:not(:animated)', this).slideDown(100);
        }, function () {
            $('ul:not(:animated)', this).slideUp(100);     
        });
    $('.nav li ul').slideUp(0);
});

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92893

Try this -- it adds a delay to keep the "flickering" you're sometimes experiencing.

$(function() {
    $('.nav li').hover(function () {
            $('ul', this).delay(50).stop().slideDown(100);
        }, function () {
            $('ul', this).delay(50).stop().slideUp(100);     
        });
});

Upvotes: 0

Related Questions