Grow your CSS skills. Land your dream job.

Vertical Fly-Out Menu

  • # January 31, 2013 at 10:44 pm

    Hi folks, is there any way to trigger and reveal sub-menu in vertical fly-out nav with just a keyboard “Tab” navigation if the link in nav gets focus to improve accessibility? I am trying this on [Here…](http://cdpn.io/Lfjen “”) to no avail.

    # February 1, 2013 at 9:54 am

    Use the `+` selector to targeting the next element from the focused anchor ⇒ http://codepen.io/tovic/full/vAriq

    nav li:hover > ul,
    nav li a:focus + ul {
    /* show the submenus */
    }
    # February 1, 2013 at 10:55 am

    @Hompimpa, thank you, that’s a great start. How would we go about it to continue tabbing through all fly-out items before it goes to next parent?

    # February 1, 2013 at 11:00 am

    @jurotek I was confused on that part o_O

    # February 1, 2013 at 11:08 am

    @Hompimpa, you accomplish to reveal fly-out with tab key. But when you hit Tab second time the fly-out disappears. When you keep pushing Tab it seems that it cycles through fly-out items while the fly-out is hidden before it goes to next parent. Is there a way to have the fly-out visible while you cycle through it’s items?

    # February 1, 2013 at 11:11 am

    @Hompimpa That technique is genius and I love you for it! <3

    # February 2, 2013 at 12:50 am

    @jurotek No idea. I’ve tried using JavaScript too. But I think again, even if I can do this with JavaScript, then if I manipulate the tab key by adding `return false` at the end of function, then I will destroy the accessibility itself.

    # February 2, 2013 at 1:35 am

    Ok. So I use a very long transition delay to keep the submenu visible as long as possible ⇒ http://codepen.io/tovic/full/mDvyn

    nav li ul {
    top:-999px;
    left:-999px;
    transition:all 0s linear 999999s;
    }

    nav li:hover > ul,
    nav li a:focus + ul {
    top:0;
    left:0;
    transition-delay:0s;
    }

    Then, I don’t know how to remove the transition delay on `focusout`. Maybe CSS animation can handle it. `animation-play-state` for example.

    # February 2, 2013 at 3:48 pm

    @Hompimpa, I just finished building horizontal drop-down nav which is completely accessible just with a Tab Key. I had to use script for that. I put it on Codepen and it didn’t work at all. I tested it on Chrome, FF, Opera, Safari and IE10,IE9, IE8. Had problem with IE7 which I will prolly be able to fix with conditional statement and style couple things differently. I can put it back on Pen if you’d like. I have no idea why it didn’t work on Codepen at all.

    Edit: You getting close on that vertical one tho and just like you said the fly-out just stays open.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".