Make a submenu with jQuery and html5

Question

I want to make a submenu with jQuery and javascript. I have this html structure:

<nav class="container">
    <ul>
        <li><a href="#" title="Werken in de zorg">Werken in de zorg</a>
            <ul class="submenu">
                <li><a class="label" href="#" title="Lees meer over Werkvelden">Werkvelden</a></li>
                <li><a href="#" title="Lees meer over Eerstelijnzorg">Eerstelijnzorg</a></li>
                <li><a href="#" title="Lees meer over Geestelijke Gezondheidszorg">Geestelijke Gezondheidszorg</a></li>
                <li><a href="#" title="Lees meer over Gehandicaptenzorg">Gehandicaptenzorg</a></li>
            </ul>
        </li>
        <li><a href="#" title="Vacatures">Vacatures</a></li>
        <li><a href="#" title="Opleidingen en scholen">Opleidingen en scholen</a></li>
    </ul>
</nav>

In the CSS is set the .submenu to display none. But now the javascript. I would like. If you have a hovert li item. Then the submenu appear. And when you go from the submenu. Then that still remain 300ms. But how should I do with jQuery?

Thank you very much for your help!

There are so many ready-made dropdown menu solutions out there that do this. Best check out one of them — Pekka
– Pekka, Commented Dec 21, 2011 at 12:33

john · Accepted Answer · 2011-12-21 13:16:39Z

1

You can give this a try:

$(document).ready(function() {
    $('nav.container').children('ul').children('li').hover(function() {
        if ($(this).find('.submenu').length > 0) {
            $(this).find('.submenu').slideToggle();
        }
    }, function() {
        $(this).find('.submenu').delay(300).slideToggle();
    });
});

Here's a fiddle to show it working.

answered Dec 21, 2011 at 13:16

john

1,31912 silver badges24 bronze badges

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

2 Comments

dex3703 Over a year ago

This only seems to work on the very first li with a ul. If there are other submenu blocks they don't open.

dex3703 Over a year ago

I also get this error when I include this jquery in my page: Uncaught SyntaxError: Unexpected token ILLEGAL

Ruben · Accepted Answer · 2012-12-13 16:02:22Z

0

try superfish http://users.tpg.com.au/j_birch/plugins/superfish/#examples

it has a delay and you can use hoverintent

answered Dec 13, 2012 at 16:02

Ruben

9,28415 gold badges72 silver badges104 bronze badges

Collectives™ on Stack Overflow

Make a submenu with jQuery and html5

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related