Infinite height on jquery dropdown (slideUp and slideDown)

Question

Basically I created a dropdown menu with jquery by using the slideUp and slideDown functions. Everything worked good until I figured that if I continue hovering the mouse through the list, the height of the sub button won't stop. And we can see that by the border-left expanding. Any way to avoid this?

I've created a fiddle so that you guys can know what I'm talking about http://jsfiddle.net/WGm8q/

Anyway here's the code:

JS

$('.button').hover(
    function () {
        $('.sub', this).stop().slideDown(100);
    }, 
    function () {
        $('.sub', this).stop().slideUp(100);
    }
);

CSS

.menu {
    width: 850px;
}
.button .main {
    padding-bottom: 5px;
    cursor: pointer;
}
.button .sub {
    display: none;
    margin-left: 10px;
    padding: 10px 0 10px 0;
    border-left: 1px solid #CCC;
}
.button .sub p {
    background-color: #FFF;
    margin: 0;
    padding-left: 5px;
}

HTML

<div class="menu">
    <div class="button">
        <div class="main">Menu 1</div>
        <div class="sub">                    
            <p>Submenu 1</p>                 
            <p>Submenu 1</p>                 
            <p>Submenu 1</p>                 
            <p>Submenu 1</p>                 
            <p>Submenu 1</p>                 
            <p>Submenu 1</p>                 
            <p>Submenu 1</p>
        </div>
    </div>
</div>

Dejo Dekic · Accepted Answer · 2013-02-02T17:31:13.957

2

Your Fiddle

Change this:

.button .sub {
display: none;
margin-left: 10px;
padding: 10px 0 10px 0;
border-left: 1px solid #CCC;
}

Into:

.button .sub {
display: none;
margin-left: 10px;
border-left: 1px solid #CCC;
}

edited Feb 02 '13 at 17:31

answered Feb 02 '13 at 17:22

Dejo Dekic

2,088
4
27
50

It worked. But this way I don't have the lines extended. No way to go around it? – coldpumpkin Feb 02 '13 at 17:37
Padding is your problem here, workaround to fix that is to add a fixed height to your menu (but that has its own issues) , or maybe to "wrap" your sub menu in another div that has no height but has border and padding (didn't test it...) – Dejo Dekic Feb 02 '13 at 17:47
Another maybe best solution is to add padding to your LAST or FIRST menu item... Something like this http://jsfiddle.net/THWhZ/ – Dejo Dekic Feb 02 '13 at 17:58
Yep, I went to lunch and thought about the exact same thing :D Thanks Dejo – coldpumpkin Feb 02 '13 at 18:09

score 1 · Answer 2 · edited May 23 '17 at 12:27

This guy has a gem of a fiddle that will clear up your problem too I believe:

http://jsfiddle.net/nick_craver/GgdEM/1/

The problem with this one was a jumpy menu, which I think may be the cause of your border issue (event firing going all screwey).

The key is to have a timeout that will clear itself when hovered again.

JQuery dropdown menu using slideup and slidedown on hover is jumpy

He does this through the data attribute of each menu item so each item is dealt with independently.

Take a look:

$(function () {    
  $('#nav li').hover(function () {
     clearTimeout($.data(this, 'timer'));
     $('ul', this).stop(true, true).slideDown(200);
  }, function () {
    $.data(this, 'timer', setTimeout($.proxy(function() {
      $('ul', this).stop(true, true).slideUp(200);
    }, this), 200));
  });
});

His fiddle doesn't seem to have any border issues either so perhaps have a look at his markup and css.

It's similar. Though in my case, apparently I just had to remove the padding. His case is useful too - even when he goes away with the mouse and returns a while back, the dropdown restores :) — coldpumpkin, Feb 02 '13 at 17:43

Infinite height on jquery dropdown (slideUp and slideDown)

2 Answers2