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…]( “”) to no avail.

    # February 1, 2013 at 9:54 am

    This reply has been reported for inappropriate content.

    Use the + selector to targeting the next element from the focused anchor ⇒

    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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

    Ok. So I use a very long transition delay to keep the submenu visible as long as possible ⇒

    nav li ul {
    transition:all 0s linear 999999s;

    nav li:hover > ul,
    nav li a:focus + ul {

    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.