Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to keep submenu navigation open after you click off?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #239756
    nmcintosh
    Participant

    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! :)

    #239758
    bearhead
    Participant

    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).

    #239759
    nmcintosh
    Participant

    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.

    #239770
    bearhead
    Participant

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.