Dropdown menu coding - mouse over

sticker · 31-07-2014 4:51pm #1

Hi All,

I've a code snippet I'm trying to edit.

My website has a link navigation dropdown menu in place, but the default setting it to activate it on a mouse click, not to function on mouse hover as I would prefer.

Below is a snippet of the JS code - Anyone recommend a change to allow mouse hover to operate the dropdown?

EDIT - I've added "hover" instead of "click" but it did not work...

Thanks!

$("#nav .navbar-nav > li .dropdown-toggle").click(function () {

$(this).parent().toggleClass("open-nav")

});

31-07-2014 5:12pm

You changed ".click" to ".hover"? Should work. If you throw an alert into the hover, does it get fired at all?

sticker · 31-07-2014 5:22pm

28064212 wrote: »

You changed ".click" to ".hover"? Should work. If you throw an alert into the hover, does it get fired at all?

Odd - in Dreamweaver, the click code had a red color, but when i click on it, i'm not presented with alternatives.

When I manually type in ".hover" - the code goes black like its not recognised as a command.

31-07-2014 5:27pm

That's down to Dreamweaver's syntax highlighting, it obviously doesn't support jQuery. click() is both a Javascript and jQuery function, hover() is jQuery only

sticker · 31-07-2014 5:33pm

28064212 wrote: »

That's down to Dreamweaver's syntax highlighting, it obviously doesn't support jQuery. click() is both a Javascript and jQuery function, hover() is jQuery only

OK - I'm not to savvy at writing code, is there any other way to edit this code to allow for a hove command?

31-07-2014 5:39pm

sticker wrote: »

OK - I'm not to savvy at writing code, is there any other way to edit this code to allow for a hove command?

Ignore the colors, they don't affect anything. Does this work (i.e. show an alert box when you hover over the menu)?

$("#nav .navbar-nav > li .dropdown-toggle").hover(function () {
alert('working');
$(this).parent().toggleClass("open-nav")
});

sticker · 31-07-2014 7:13pm

28064212 wrote: »
Ignore the colors, they don't affect anything. Does this work (i.e. show an alert box when you hover over the menu)?
$("#nav .navbar-nav > li .dropdown-toggle").hover(function () {
alert('working');
$(this).parent().toggleClass("open-nav")
});

Yes! - I get a Javascript box - "Working"

Dropdown menu coding - mouse over

Comments