0

I have a menu strip . I planned to :

  1. slideDown() a submenu ( originally display: none DIV ) when I mouse over the menu strip
  2. hide the submenu by slideUp when mouse out.

Here is the codes:

<div id="main_menu" onmouseover="$('#submenu').stop(true,false).slideDown();" onmouseout="$('#submenu').stop(true,false).slideUp();">Main Menu</div>
<div id="submenu" style="display: none">Some submenu contents here</div>

What I try to achieve is, when I mouseover submenu，the submenu holds and stop the mouse out ( the slideUp() animation. How can I achieve it ?

Note: given that the main_menu and sub_menu did not overlap.

UPDATE: here is the the jsFiddle

Raptor
  • 53,206
  • 45
  • 230
  • 366

2 Answers2

2

An easy way you can do is adding a parent dom, and binding the mouse event to it.

html

<div id="menu">
    <div id="main_menu">Main Menu</div>
    <div id="submenu" style="display: none">Some submenu contents here</div>
</div>

js

$('#menu').hover(function () {
    $('#submenu').stop(true, false).slideDown();
},

function () {
    $('#submenu').stop(true, false).slideUp();
});

here is jsfiddle demo. http://jsfiddle.net/vyDVd/

update

If you don't want to adding a parent dom, you can try putting submenu into main_menu as a child menu.

I update your jsfiddle demo here http://jsfiddle.net/9KfYr/2/

I add 2 css attributes to #submenu to keep UI unchange.

position:absolute;
top:30px;

And here, I suggest use .hover() provided by jQuery.

pktangyue
  • 8,326
  • 9
  • 48
  • 71
  • looks good, but if my Main Menu has multiple menu items, and I only want 1 of the menu items to have mouse over effects only, how can I achieve it ? – Raptor Jan 23 '13 at 04:31
  • @ShivanRaptor since you need only one, you can put `submenu` into `main_menu` as a child dom, then do that like my post will be an easy way. – pktangyue Jan 23 '13 at 05:07
  • would you mind to try update my jsFiddle? I tried putting the submenu into main_menu, but it will alter the user interface. ( my jsFiddle link is in the question ) – Raptor Jan 23 '13 at 05:29
  • if you mouseleave and instantly mouseover - it stucks. – Roman Losev Jul 03 '15 at 13:37
2

Actually, I was able to achive this using pure css:

.header-submenu-item {
 display:none;
}
.header-parent-link:hover + .header-submenu-item,
.header-submenu-item:hover {
 display:block;
}
<div class="header-parent-link">Item 1</div>
  <div class="header-submenu-item"></div><!-- Empty submenu -->
<div class="header-parent-link">Item 2</div>
  <div class="header-submenu-item">
    <a href="#">Child Item</a>
    <a href="#">Child Item</a>
    <a href="#">Child Item</a>
  </div>

It doesn't include slideDown() effect, but is very simple. I guess, slidedown can be achieved using other css effects.

Artem
  • 81
  • 6
  • It's nicely done! However, it probably needs a fallback plan for older browsers. (p.s. It's better to use ` – Raptor Dec 22 '17 at 01:51
  • Maybe. But you know what, actually, I did just check on www.w3schools.com, and they don't even specify the earliest browser versions for the + selector, except for IE, which is 7. So I guess it's not much of a problem. I did use nav, only as a menu wrapper, and these are its child items – Artem Dec 23 '17 at 02:43
  • Never trust w3schools, their tutorials are full of errors. Refer to MDN instead. – Raptor Dec 23 '17 at 03:11