if mouse on hover of div then display menu

Question

I have the following menu which cascades on hover but i need to add some conditional checks like if the mouse is on hover on the div then keep the menu sliding down.

Also if the mouse is hovered on the LI then check them menu down.

As you can see it just slides down and back up once you leave the "div".

Im stuck... and have tried for hours searching for if statements etc, i just cant get the syntax correct.

my example

score 2 · Answer 1 · answered Sep 14 '11 at 09:36

2

Make it a child of the <div>, then it won't cancel the event when you leave it.

Also I should note that it's more semantic to make a navigation out of nested lists (such as

Category
- Item
- Item

<ul>
    <li>Category 
        <ul>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </li>
</ul>

answered Sep 14 '11 at 09:36

Madara's Ghost

172,118
50
264
308

You see i am using an xsl style sheet to create the HTML... if i posted my xsl would you be able to help me? – PD24 Sep 14 '11 at 09:38

ShadowScripter · Accepted Answer · 2011-09-14T11:26:10.017

Here is a working example

HTML

<div id="leftWrap">
    <div id='accordion'>
        <ul>
           <li><div>Absorption</div>
               <ul style="display: none;">
                   <li>Accessories</a>
                       <ul style="display: none;">
                           <li>AA500AFG</li>
                           <li>AA500F</li>
                           <li>AA500G</li>
                           <li>AA990F</li>
                       </ul>
                   </li>
                   <li>Consumables</li>
                   <li>Products</li>
               </ul>
           </li>
           <li><div>Fluorescence</div>
               <ul style="display: none;">
                   <li>Accessories</li>
                   <li>Consumables</li>
                   <li>Products</li>
               </ul>
           </li>
       </ul>
    </div>
</div>

Javascript/JQuery

jQuery(document).ready(function() {
    $('#accordion ul > li').hover(function() {
        $(this).children("ul").slideToggle('slow');
    });
});

If you ask me, it gets really messy when you use mousehover/mouseenter for such things. I'd prefer using a click event after the first hover or something, this way the user won't get annoyed by all that movement.

jQuery(document).ready(function() {
    $('#accordion ul:first-child > li').hover(function() {
        $(this).children("ul").slideToggle('slow');
    });

    $('#accordion ul:not(:first-child) > li').click(function(){
        $(this).children("ul").slideToggle('slow');
    });
});

score 1 · Answer 3 · answered Sep 14 '11 at 09:59

^{I tried to fiddle in your fiddle, but the markup and css are a lot confusing.}

As Rikudo said, you should make the div, its child its much easier to do it that way. I have created a simplest accordion skeleton. You can see it here.

It does everything you want. However for the customizations and others things, I will leave it up to you.

score 1 · Answer 4 · answered Sep 14 '11 at 09:59

1

http://jsfiddle.net/dttdB/13/

You had attached hover to the heading div when the mouse leaves that, the hover effect is lost.

answered Sep 14 '11 at 09:59

Mesh

6,262
5
34
53

1

The 'Hover' was only being called, when the cursor was on the div. When you move down to the menu items, you are leaving the div, so the toggle closes the UL. Mainly I attached the Hover to the LI, and changed a couple of other selectors...You will need to sort out the sub-sub-menu items... – Mesh Sep 14 '11 at 11:01

if mouse on hover of div then display menu

4 Answers4