CODEWITHSUNDEEP
jquery
Kamal
Kamal

Reputation: 2180

Dropdown menu in jquery

Hello friend I designed a drop down menu using mouseeneter() and mouseout() in jQuery. The problem is when I mouseout() from the main menu, the drop down links slide up. I don't know how to set conditions on it please help. My code is

Jquery

<script>
$(document).ready(function(){
    //alert('hi');
    $('#link-detail').css('display','none');
    $('#hover-detail').mouseenter(function(){
        $('#link-detail').css({position:'absolute',top:'20px',left:'0px',zindex:'99999'});
        $('#link-detail').slideDown();
        });
        $('#hover-detail').mouseout(function(){
        $('#link-detail').slideUp();
        });

    })
</script>

html

<div class="link-detail-wrap"><div id="hover-detail">hover me</div>
<div>
  <ul id="link-detail">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
  </ul>
</div></div>
<div>hihihih</div>

CSS

.link-detail-wrap
{
    float:left;
    width:100%;
    position:relative;
    }

ul#link-detail 
{
    margin:0;
    padding:0;
    border:solid 1px #666;
    border-bottom:none;

    }
ul#link-detail  li
{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;

    }
ul#link-detail  li a
{
    text-decoration:none;
    color:#333;
    padding:2px 50px 2px 10px;
    background:#F0F0F0;
    border-bottom:1px solid #666;
    /*line-height:25px;*/
    font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform:capitalize;
    display:block;
    }
ul#link-detail  li a:hover
{
    background:#CCC;
    }

You can also see it on http://jsfiddle.net/36CXK/

PLEASE HELP

Thanks in advance

Upvotes: 1

Views: 269

Answers (4)

Alexander
Alexander

Reputation: 23537

One way to do it is using a timeout with a certain delay to slide up the menu on mouse leave. You can clear this timeout every time you hover the menu preventing the animation to occur.

I create an object Dropdown to control the timeout:

var Dropdown = {
    timer: 0,
    hide: function(callback, delay){
        this.timer = setTimeout(function() {
            return callback.call(this, arguments);
        }, delay);
    },
    reset: function(){
        this.timer && clearTimeout(this.timer);
    }
};

And you can refactor your code to make use of it:

$('#link-detail').css('display', 'none');

$('#hover-detail').hover(function() {
    Dropdown.reset();
    $('#link-detail').css({
        position: 'absolute',
        top: '20px',
        left: '0px',
        zindex: '99999'
    });
    $('#link-detail').slideDown();
}, function() {
    Dropdown.hide(function(){
        $('#link-detail').slideUp();
    }, 200);
});

$('#link-detail').hover(function() {
    Dropdown.reset();
}, function(){
    Dropdown.hide(function(){
        $('#link-detail').slideUp();
    }, 200);
});

And this is a working fiddle.

Upvotes: 1

Jassi Oberoi
Jassi Oberoi

Reputation: 1424

use this script in your script area

<script type="text/javascript">
$(document).ready(function(){
        //alert('hi');
        $('#link-detail').css('display','none');


            $("#hover-detail").hover(
  function () {
    $('#link-detail').css({position:'absolute',top:'20px',left:'0px',zindex:'99999'});
            $('#link-detail').slideDown();
  }, 
  function () {
    // do nothing
  }
);

$(".relation").hover(
  function () {
   // do nothing
  }, 
  function () {
    $('#link-detail').slideUp();
  }
);
 })
</script>

and create on extra css class

.relation {
    position:relative;
    top:-20px;
}

Upvotes: 1

SurinderBhomra
SurinderBhomra

Reputation: 2199

Why not use one of the already available jQuery Drop Down List plugins:

They are easy to style and all the functionality has already been implemented. All you need to do is style the drop down to your preferences.

Upvotes: 0

Stephen Young
Stephen Young

Reputation: 852

Just comment out the $('#link-detail').slideUp(); line.

See here:

http://jsfiddle.net/36CXK/1/

Upvotes: 0

Related Questions