How to keep submenu navigation open after you click off?

[nmcintosh]

I am so new to web design and I have to complete a project for my supervisors. Any help is greatly appreciated!

I basically copied the CSS from the link below and added my own headings:

http://www.cssscript.com/demo/simple-accordion-menu-with-css3-transitions/#

The one problem with this code is that the accordion does not stay open when its clicked off and the cursor is elsewhere.

I’ve seen posts saying to add :

#menu ul ul {display: block !important;}

So far, no luck. Any ideas? I’ve gotten so lost in this “has-sub” or “has-children” and I cant figure out how it works.

Thanks for helping a newbie like myself! :)

[bearhead]

Right now the menu is being run entirely by css with the hover state. Therefore, if the user isn’t hovering a list item, the menu will collapse. You’ll need to use javascript to get the menu to work on clicks (and stay open even if the user clicks outside the menu).

[nmcintosh]

Thanks, I will try to look for more javascript snippits. It is still confusing for me, but I’ll keep looking. I forgot to mention that I did try to change the color on the links’ focus state an that did work. So, the color will stay changed when I click off.

Is there anything similar like that in CSS for the accordion? I will look for javascript if I have to, but I think I would just get lost.

[bearhead]

Focus will only remain on an element if the user doesn’t click on anything else on the page. Take a look at this demo:

http://codepen.io/kvana/pen/PNjqJQ

If you click on the list item it will gain focus and turn red, but if you click anywhere else on the page it will lose focus.

It is possible to build an accordion menu with focus states, but I don’t think anyone could recommend doing that as focus can behave unpredictably on non-form elements (especially on mobile devices).

I would strongly encourage you to keep pursuing a javascript solution.

[Author]

Posts