CODEWITHSUNDEEP
javascriptjquerycssanimationdrop-down-menu
user3544484
user3544484

Reputation: 851

jquery dropdown div disappears after leaving parent link

I have the following html:

<ul id="nav">
    <li class="has-drop-down">
        <a href="#" class="has-drop-down-a">Search</a>
            <div class="drop" style="display: none;">
                <ul>
                    <li>
                        <ul class="">
                            <li class="item-107"><a href="#">link1</a></li>
                            <li class="item-108"><a href="#">link2</a></li>
                            <li class="item-109"><a href="#">link3/a></li>
                            <li class="item-148"><a href="#">link4</a></li>
                            <li class="item-170"><a href="#">link5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
    </li>
</ul>

Unfortunately, the html has to have this structure (it's being dynamically created by a cms).

I am using the following javascript to create the animation:

<script type="text/javascript">
            jQuery('body').ready(function () {
            jQuery('.drop').slideUp(0);

            jQuery('.has-drop-down-a').hover(
                function () {
                    jQuery(this).siblings('.drop').slideDown(500);
                },

                function () {
                    jQuery(this).siblings('.drop').slideUp(500);
                }
            );
            });
</script>

CSS used:

#nav .drop {
   left: -9999px;
   padding: 27px 0 0;
   position: absolute;
   top: -9999px;
}
.drop:hover,
.drop ul:hover {
   position:relative;
   top:-1px;
   display: block !important;
}
#nav .drop > ul {
   position: relative;
}
#nav a {
   display: inline-block;
   vertical-align: top;
   margin: 0 0 -27px;
   padding: 0 0 27px;
   position: relative;
}

My issue is that after you leave the 'Search' link and move your cursor down to the dropdown ('drop' div) the dropdown disappears & then comes back.

There is a demo of this issue here if required http://goandco.w7.ext.starberry.com (I'll try to get this into a jsfiddle for future reference).

Upvotes: 0

Views: 282

Answers (2)

tharo
tharo

Reputation: 74

var time=10000;
$('#Menu').mouseenter(function(){ 
    t=setTimeout("showMenu()",500);
});

$('#categoryMenu').mouseleave(function(){
    clearTimeout(t);
    t=setTimeout("hideMenu()",100);
});

function showMenu(){
    $('#megaDrop').fadeIn('fast');      
}

function hideMenu(){
    $('#megaDrop').hide('fast'); 
}

$('#megaDrop').hover(function(){
  clearTimeout(t);
},function(){
    clearTimeout(t);
    t=setTimeout("hideMenu()",100);

}

Use Timer to resolve your problem

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

As already commented by UweB should the ready() method be called on the document.

So change:

jQuery('body').ready(function () {

To:

jQuery(document).ready(function () {

Also, delete the left and top position of #nav .drop.

You also might want to trigger the event on the list-item instead of the anchor. When triggering it on the list-item, the submenu will stay visible when you hover it. Otherwise, when you blur out the anchor, the submenu will slideup. You then need the next() method instead of the sibling() method.

Change your jQuery to:

jQuery(document).ready(function () {
    jQuery('.drop').slideUp(0);

    jQuery('.has-drop-down').hover(function () {
        jQuery(this).find('.drop').slideDown(500);
    },
    function () {
        jQuery(this).find('.drop').slideUp(500);
    });
});

Check this demo.

Upvotes: 1

Related Questions