[css-d] getting the TJK design vertical css drop down menu to work
hey all, If this looks familiar it's because I changed the subject. I didn't get any replies to my last email, subject line sub menus show up on hover but not on focus and I'm stumped. I hope someone out there can help! I am working on a test page that has a sub menu which displays on hover but not on focus. How do I get the sub menus (for example the 3 links under location) to show up when someone tabs to the link the way they do when someone hovers over it? http://sandyfeldman.com/villab/en/index.shtml http://sandyfeldman.com/villab/css_js/villab.css http://sandyfeldman.com/villab/css_js/TJK_keyBoardDropDown.js The styles I am using more or less came from http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp but I seem to have lost a key ingredient when I put this to work in my page. Any thoughts about how to fix this up? Thanks! Sandy __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] getting the TJK design vertical css drop down menu to work
On 26/04/2011 5:17 AM, Sandy wrote:
hey all,
If this looks familiar it's because I changed the subject. I didn't get
any replies to my last email, subject line sub menus show up on hover
but not on focus and I'm stumped. I hope someone out there can help!
I am working on a test page that has a sub menu which displays on hover
but not on focus. How do I get the sub menus (for example the 3 links
under location) to show up when someone tabs to the link the way they
do when someone hovers over it?
http://sandyfeldman.com/villab/en/index.shtml
http://sandyfeldman.com/villab/css_js/villab.css
http://sandyfeldman.com/villab/css_js/TJK_keyBoardDropDown.js
The styles I am using more or less came from
http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp
The sub-menu only show in full when you have JS enabled. It's a attempt
at making a menu keyboard friendly. I did similar with this demo [1],
which is another solution and someone else added to that with another
demo [2].
but I seem to have lost a key ingredient when I put this to work in my
page. Any thoughts about how to fix this up?
Thanks!
Sandy
Change this CSS,
#menu li:hover ul, #menu li:focus ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}
to this (li can not gain focus).
#menu li:hover ul, #menu li a:focus+ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}
As with my menu, Opera shows the best accessibility.
[1] http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm
[2] http://www.adipalaz.com/accessible_ddmenu.html
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] getting the TJK design vertical css drop down menu to work
http://sandyfeldman.com/villab/en/index.shtml
http://sandyfeldman.com/villab/css_js/villab.css
http://sandyfeldman.com/villab/css_js/TJK_keyBoardDropDown.js
The sub-menu only show in full when you have JS enabled. It's a attempt
at making a menu keyboard friendly. I did similar with this demo [1],
which is another solution and someone else added to that with another
demo [2].
Change this CSS,
#menu li:hover ul, #menu li:focus ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}
to this (li can not gain focus).
#menu li:hover ul, #menu li a:focus+ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}
As with my menu, Opera shows the best accessibility.
[1] http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm
[2] http://www.adipalaz.com/accessible_ddmenu.html
Alan, Thanks so much! (and sorry for the long delay in writing back -
I've had a bit of a crazy day)
This is much better
http://sandyfeldman.com/villab/en/index.shtml
The sub menu now shows when you tab on the menu item. Tabbing to the
next item skips the sub menu items and goes directly to the next menu
item. Any idea of why that's happening?
thanks again,
Sandy
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
