将CSS悬停菜单转换为jQuery菜单

Question

I found a blog post on creating the menu found in gmail with css dropdown .

The dropdown is displayed when we hover over the buttons but I want to convert this to a jQuery menu

where the dropdown is displayed when we click on a button rather than on mouseover, Please help.

Thanks in advance .

http://jsfiddle.net/PSUkW/

Answer 1

It's really simple logic. I replaced a few of the :hover CSS rules with a .clicked class and added this JS:

$('.menu > ul > li').click(function() {
    $(this).siblings().removeClass('clicked');
    $(this).toggleClass('clicked');
});

Instead of allowing the browser to trigger the dropdown with the :hover pseudo class, I have jQuery toggle the class .clicked on each top-level li clicked. This produces the same behavior, but with JS.

This line:

$(this).siblings().removeClass('clicked');

Basically removes the clicked class from the siblings of that element, which allows the user to drop down only one menu at a time (otherwise overlap occurs).

Demo: http://jsfiddle.net/PSUkW/5/

Answer 2

Pretty simply. Inside of the CSS adding styles and showing the dropdown on li:hover, you can update it to add a class: something like .menu ul li.click ul . And then 2 lines of jQuery to target that click action.

See the code here: http://jsfiddle.net/PSUkW/3/