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.
@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?
@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.
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.
@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.
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.
Use the
+selector to targeting the next element from the focused anchor ⇒ http://codepen.io/tovic/full/vAriq@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?
@jurotek I was confused on that part o_O
@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?
@Hompimpa That technique is genius and I love you for it! <3
@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 falseat the end of function, then I will destroy the accessibility itself.Ok. So I use a very long transition delay to keep the submenu visible as long as possible ⇒ http://codepen.io/tovic/full/mDvyn
Then, I don't know how to remove the transition delay on
focusout. Maybe CSS animation can handle it.animation-play-statefor example.@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.