Dropdown menu in jquery

Question

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

Take a look at my answer below :)

Alexander
– Alexander

2012-04-06 11:37:29 +00:00
Commented Apr 6, 2012 at 11:37 — Alexander
– Alexander, Commented Apr 6, 2012 at 11:37

Jassi Oberoi · Accepted Answer · 2012-04-06 11:14:39Z

1

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;
}

answered Apr 6, 2012 at 11:14

Jassi Oberoi

1,4241 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kamal Over a year ago

where to apply class relation ... will you please share it on fiddle

Jassi Oberoi Over a year ago

the relation class use in above the "ul" div here is the updated code - http://jsfiddle.net/36CXK/10/

Alexander · Accepted Answer · 2012-04-06 12:03:00Z

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.

Stephen Young · Accepted Answer · 2012-04-06 11:00:23Z

0

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

See here:

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

answered Apr 6, 2012 at 11:00

Stephen Young

8501 gold badge11 silver badges21 bronze badges

3 Comments

Kamal Over a year ago

thanks for help stephen...you are right but i want when mouseout() from all then the drop down link should close

Alexander Over a year ago

@Stephen Young, you didn't get it.

Stephen Young Over a year ago

@Kamal in that case just add $('#link-detail').css('display', 'none'); to your mouseout function. Here: jsfiddle.net/36CXK/7

Surinder Bhomra · Accepted Answer · 2012-04-06 11:11:43Z

0

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.

edited Apr 6, 2012 at 11:11

answered Apr 6, 2012 at 11:02

Surinder Bhomra

2,1992 gold badges25 silver badges50 bronze badges

Collectives™ on Stack Overflow

Dropdown menu in jquery

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related