html - Unable to navigate unorderlist menu via keyboard tab -
i trying work out why can not navigate our menu uses multiple unordered lists via keyboard.
does have tips? have feeling more of css issue html.
related css:
/* menu */ #cssmenu{ border:none; border:0px; margin:0px; padding:0px; font: 67.5% 'lucida sans unicode', 'bitstream vera sans', 'trebuchet unicode ms', 'lucida grande', verdana, helvetica, sans-serif; font-size:11px; font-weight:bold; } #cssmenu ul{ background:#333333; height:39px; list-style:none; margin:0; padding:0; display: table; width: 100%; } #cssmenu li{ padding:0px; display: table-cell; width: 115px; } #cssmenu li a{ background:#333333 url('../images/seperator.gif') bottom right no-repeat; color:#fff; display:block; font-weight:normal; line-height:39px; margin:0px; padding:0px 0px; text-align:center; text-decoration:none; width: 115px; } #cssmenu li a:hover, #cssmenu ul li:hover a{ background: #2580a2; color:#ffffff; text-decoration:none; float: none; } #cssmenu li ul{ background:#333333; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:230px; z-index:200; /*top:1em; /*left:0;*/ } #cssmenu li:hover ul{ display:block; } #cssmenu li li { background:url('../images/sub_sep.gif') bottom left no-repeat; display:block; float:none; margin:0px; padding:0px; width:230px; } #cssmenu li:hover li a{ background:none; } #cssmenu li ul a{ display:block; height:35px; font-size:10px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; width: 205px; } #cssmenu li ul a:hover, #cssmenu li ul li:hover a{ background:#2580a2 url('../images/hover_sub.gif') center left no-repeat; border:0px; color:#ffffff; text-decoration:none; width: 205px; } #cssmenu p{ clear:left; } :focus {outline:none;} ::-moz-focus-inner {border:0;} related html code:
<div id="cssmenu"> <ul> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:homepage:2059103169:pc=pc_90001">home</a></li> <li class="has-sub"> <a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90002">operations</a> <ul> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90003">individuals</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90123">aircraft owners</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90276">aircraft operators </a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90389">flight training</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90405">aerodromes</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90447">office of airspace regulation</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_93439">sport aviation</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_93379">class d</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100058">non-towered aerodromes</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90385">dangerous goods</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100808">ground operations</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100847"> non-compliance notice </a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100374">unmanned aircraft systems (uas) </a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100705">general aviation (ga) task force</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100852">regional aviation safety forum (rasf)</a> </li> <li><a href="http://casa.gov.au/aod" target="_top">drug , alcohol management plans</a> </li> </ul></li> <li class="has-sub"> <a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90473">airworthiness</a> <ul> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100610">maintenance regulations</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90474">personnel</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90496">certification , design</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90507">manufacturing</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90515">continuing airworthiness</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90822">airworthiness directives</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90821">maintenance organisations</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_101038">flight test , evaluation</a> </li> </ul></li> <li class="has-sub"> <a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90900">regulations & policy</a> <ul> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90902">current rules</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:pwa:2059103169:pc=pc_91070">changing rules</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91181">enforcement action</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:pwa:2059103169:pc=pc_91190">policy notices</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100396">australia's state safety program</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_101078">performance based navigation (pbn)</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_101326">licensing regulations</a> </li> </ul></li> <li class="has-sub"> <a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91263">manuals & forms</a> <ul> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91264">manuals</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91308">forms</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91316">casa online store</a> </li> </ul></li> <li class="has-sub"> <a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91314">education</a> <ul> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_101349">aviationworx</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100101">elearning catalogue</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91346">flight safety australia</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_90006"> pilot guides , information </a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100138">ontrack</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100994">human factors</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91430">safety management systems</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91329">seminars , workshops</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91317">aviation safety advisers</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91455">advice air travellers</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91316">casa online store</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_101317">out-n-back</a> </li> </ul></li> <li class="has-sub"> <a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91488">services</a> <ul> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91489">licences , registrations</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91510">service standards , fees</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:pwa:2059103169:pc=pc_91499">self service portal</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91517">permission application centre (pac)</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91521">aviation medicals</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100450">delegates , authorised persons</a> </li> </ul></li> <li class="has-sub"> <a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91621">about casa</a> <ul> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91622">contact casa</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_93342">casa board</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91668">casa's director</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_91703">recent media releases </a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_92568">corporate publications</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100448">casa on twitter</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_92918">corporate policy</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_92936">careers @ casa</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_92956">research , statistics</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100223">international engagement</a> </li> <li><a href="http://wcmsdev/scripts/nc.dll?wcms:standard:2059103169:pc=pc_100330">casa mailing lists</a> </li> </ul></li> </ul> </div>
it not working because have :hover rules keyboard not trigger. when element has tab focus has :focus pseudo-class, notice when add menu items light when focused still don't open menu.
jsfiddle: :focus rules along side :hover rules
this due following rule:
#cssmenu li:hover ul, #cssmenu li:focus ul{ display:block; } the li never gets focus because has no tab index, a inside of li gets focus. since li parent of ul a sibling of ul need use different rule targeting work. can use next sibling selector + target ul based on a:focus. gets 1 step closer.
#cssmenu li:hover ul, #cssmenu li a:focus + ul{ display:block; } 
unfortunately far can go css (as far i'm aware). when try go next a, :focus dropped on top-level a , menu hide sub-menu lose display:block;. since can't traverse tree when applying styles there no way can apply display:block ancestor ul when :focus a further down.
the way can see getting around use javascript , handle focus (and maybe blur()) event top-level menu items. must handle click() event hide menu when clicking anywhere in document otherwise stay active.
css
#cssmenu li.force-show ul, #cssmenu li:hover ul, #cssmenu li a:focus + ul{ display:block; } js
$('#cssmenu > ul > li > a').focus(function () { $('#cssmenu > ul > li').removeclass('force-show'); $(this).parent().addclass('force-show'); }); // clear menu class if clicked anywhere in document. $(document).click(function () { $('#cssmenu > ul > li').removeclass('force-show'); });
Comments
Post a Comment