javascript - How to make this css based menu open and close on click instead of open on hover and close on mouseout? - Stack Ove

admin管理员组

文章数量:1392105

The working version of the css menu is here / and it works on all browsers and after changing hover to click, menu has to continue working on all browsers too.

Complete menu markup on jsfiddle

.menu ul li a:hover {background:#fff; color:#000;}

As you can see all I need is to make the menu open on click, and close on click, so that when user selects a tab by one click, the tab remains open unless another tab is selected by click, or the same tab is reclicked to close it.. I already tried JQuery, but could not get it to work, and looked another posts but the tips did not work either. In other words menu has to work like this bootstrap menu which is activated on clicks: .html#buttonDropdowns

Thanks in advance for your help.

The working version of the css menu is here http://jsfiddle/nexU/PEvrW/1/ and it works on all browsers and after changing hover to click, menu has to continue working on all browsers too.

Complete menu markup on jsfiddle

.menu ul li a:hover {background:#fff; color:#000;}

As you can see all I need is to make the menu open on click, and close on click, so that when user selects a tab by one click, the tab remains open unless another tab is selected by click, or the same tab is reclicked to close it.. I already tried JQuery, but could not get it to work, and looked another posts but the tips did not work either. In other words menu has to work like this bootstrap menu which is activated on clicks: http://twitter.github.io/bootstrap/ponents.html#buttonDropdowns

Thanks in advance for your help.

• javascript
• jquery
• css
• xhtml

Share Improve this question Follow edited May 16, 2013 at 14:50 kami asked May 15, 2013 at 21:54 kamikami 23344 silver badges1111 bronze badges 13

• Post your jQuery attempt. – Brad M Commented May 15, 2013 at 21:56
• Why did you choose a CSS meny with hover effects if you wanted something pletely different ? – adeneo Commented May 15, 2013 at 21:58
• jQuery has a menu plugin: jQuery UI Menu – Dave Commented May 15, 2013 at 22:02
• I don't want something pletely different. I want that exact menu to work with clicks instead of hovers. The hover functionality is not working well, so that's why I need to replace the hover for clicks to open and close the menu. I tried using hoverIntent jquery plug-in, and jquery toggle as mentioned on other similar posts, but perhaps I'm not using it correctly because when I remove the hovers, and put the toggle and jquery, the menu no longer works. ie: $("a").click(function(e){ $(this).closest("li").children("ul").toggle(); }); $("a").click(); – kami Commented May 15, 2013 at 22:14
• This question has nothing to do with CSS selectors. Please don't put the tag back in. – BoltClock Commented May 15, 2013 at 22:28

 |  Show 8 more ments

3 Answers 3

Sorted by: Reset to default 2

As can be seen at http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html, a pure CSS menu can work and is actually fairly easy to do, just use the :active pseudo-class.

Here is the basic structure of all CSS menus with the appropriate CSS selectors.

NOTE: there are many ways to structure the HTML, I chose these tags as they are unambiguous in the below css selectors. Almost any structure of this form works.

<menu>
    <div>
        <a href="#non-existant-tag-to-avoid-jumping-to-it">Tab #1</a>
        <li>
            ...
        </li>
    </div>
    ...
</menu>

And the CSS selectors:

menu > div > li {
    /* rules to hide it */
}
menu > div > a:active + li, /* clicked */
menu > div:hover > li { /* hovered */
    /* rules to show it */
}

:hover is a css class that you can use to change the appearance of things on... hover.

On order to "Click and do stuff" (even if it's basically changing the state/appearance of something, similar to that hover) use Javascript. So you'd need to add javascript and possibly jquery.

jQuery might be something like

$('a').click(function() {this.background='#fff'; this.color='#000'})

maybe show/hide with .slideDown.toggle or the like.

Its Simple Just Make Change In Your Script. wherever you have used

onmouseover

change it to

onclick

本文标签：