1
У меня есть меню, которое работает при наведении указателя мыши (mouseover). Я хочу, чтобы он работал на клавиатуре TAB.Доступное выпадающее меню для клавиатуры
Я пробовал следующее, но в моем случае это не работает. Что я здесь делаю неправильно?
Вот мой JavaScript, CSS и HTML код:
$.fn.accessibleDropDown = function()
{
\t var el = $(this);
\t
\t /* Setup dropdown menus for IE 6 */
\t
\t $("li", el).mouseover(function() {
\t \t $(this).addClass("hover");
\t }).mouseout(function() {
\t \t $(this).removeClass("hover");
\t });
\t
\t /* Make dropdown menus keyboard accessible */
\t
\t $("a", el).focus(function() {
\t \t $(this).parents("li").addClass("hover");
\t }).blur(function() {
\t \t $(this).parents("li").removeClass("hover");
\t });
}
$(document).ready(function()
{ \t
\t $(".tableIconHambMenuBlackBgOnly").accessibleDropDown();
});ul.css3menu1,ul.css3menu1 ul{
list-style:none;background-color:none;border-width:0px;border-style:transparent;display:inline-block;}
ul.css3menu1 ul, .menuHidden {
visibility:hidden;position:absolute;right:0;top:0;opacity:0;-moz-transition:all 0.5s;-webkit-transition:opacity 0.5s;-o-transition:opacity 0.5s,visibility 0.5s;transition:opacity 0.5s;background-color:#transparent;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;margin:23px 1px 0;}
ul.css3menu1 li:hover>ul, ul.css3menu1 li:focus>ul,ul.css3menu1 li.hover>ul, .menuVisible {
visibility:visible;opacity:1; z-index:9999;}
ul.css3menu1 li{
width:200px;position:relative;display:block;font-size:0;border-width:1px;}
ul.css3menu1 li:hover{
}
ul.css3menu1 ul ul{
position:absolute;right:100%;top:0;-moz-box-shadow:0px 0px 0px #63dbc3;-webkit-box-shadow:0px 0px 0px #63dbc3;box-shadow:0px 0px 0px #63dbc3;}
ul.css3menu1{
width:20px;font-size:0;position:absolute;display:block;float:left;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;margin-top:4px;}
ul.css3menu1>li{
width:25px;margin:-12px 0px 0px 0px;height:28px;}
ul.css3menu1 a:active, ul.css3menu1 a:focus{
/*outline-style:none;*/}
ul.css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px ROsans,Arial,sans-serif;color:#000000;cursor:pointer;padding:0px 2px;background-color:transparent;border-width:0px;border-style:transparent;}
ul.css3menu1 ul li{
float:right; margin:0px 0px 0px 1px;}
ul.css3menu1 ul a{
text-align:right;padding-top:4px;padding-bottom:4px;background-color:#f6d4b2;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-bottom-width: 1px;border-left-width: 1px;font:12px ROsans,Arial,sans-serif;line-height:18px;color:#000000;text-decoration:none;border-style:solid;border-color:#fff;}
ul.css3menu1 li:hover>a,ul.css3menu1 li:focus>a,ul.css3menu1 li.hover a,ul.css3menu1 li a.pressed{
border-style:none;color:#000000;text-decoration:none;border-style:solid;border-color:#fff;}
ul.css3menu1 ul li img{
border:none;vertical-align:middle;margin-right:20px;padding-left:5px;float:left}
ul.css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul.css3menu1 ul span{
text-align:right;padding:6px 2px;background-color:#f6d4b2;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:12px ROsans,Arial,sans-serif;color:#000000;text-decoration:none;border-style:solid;border-color:#fff;border-bottom-width: 1px;border-left-width: 1px;}
ul.css3menu1 ul li:hover>a,ul.css3menu1 ul li:focus>a,ul.css3menu1 ul li.hover a,ul.css3menu1 ul li a.pressed{
background-color:#fbead9;color:#000000;text-decoration:none;}
ul.css3menu1 li.topmenu>a{
background-color:#f6d4b2;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}
ul.css3menu1 li.topmenu:hover>a,ul.css3menu1 li.topmenu:focus>a,ul.css3menu1 li.topmenu.hover>a,ul.css3menu1 li.topmenu a.pressed{
background-color:#f6d4b2;}
ul.css3menu1 ul span img{
border:none;vertical-align:middle;margin-right:20px;padding-left:5px;float:left}<td class="tableIconHambMenuBlackBgOnly">
<ul class="css3menu1">
\t <li><a href="#"><samp>
\t \t \t \t <img src="./images/hamburgMenu_16px_Black.png" width="16"
\t \t \t \t \t height="16" alt="menu">
\t \t \t </samp> </a>
\t \t <ul>
\t \t \t <li><a href="#" class="jQueryNoEventPropagation" title="li1"
\t \t \t \t tabindex="12"><img src="./images/li1_black.png" alt="li1">li1</a></li>
\t \t \t <li><a href="#" class="jQueryNoEventPropagation" title="li2"
\t \t \t \t tabindex="13"><img src="./images/li2_Black.png" alt="li2">li2</a></li>
\t \t \t <li><a href="#" target="_blank" title="li3"
\t \t \t \t class="jQueryNoEventPropagation" tabindex="14"><img
\t \t \t \t \t src="./images/li3_Black.png" alt="li3">li3</a></li>
\t \t \t <li><a href="#" class="jQueryNoEventPropagation" title="li4"
\t \t \t \t tabindex="15"><img src="./images/li4_Black.png" alt="li4">li4</a></li>
\t \t \t <li><a href="#" class="jQueryNoEventPropagation" title="li5"
\t \t \t \t tabindex="16"><img src="./images/Icon5_Black.png" alt="li5">li5</a></li>
\t \t </ul></li>
</ul>
</td>