1

マウス オーバーまたはキーボード フォーカスのいずれかに表示される CSS ドロップ ダウンがあります。ドロップ ダウンはマウスでアクセスできますが、キーボードでアクセスしようとすると、ドロップ ダウンが消えます (ただし、アイテムは循環します)。 .

キーボードでドロップダウン メニュー項目にアクセスするときに、ドロップダウンを表示し続ける方法についてアイデアをお持ちの方はいますか? CSSコードは以下です。

http://testingtesting1.info/joomla-test/でデモにアクセスできます。

HTML コードは Joomla によって生成されます。

/* Parent menu items */
.h-nav {
    width:720px;
    height:90px;
}
.h-nav ul {
    left:0;
}
.h-nav li {
    display:block;
    list-style:none;
    position:relative;
    float:left;
    margin-right:10px;
}
.h-nav a {
    display:block;
    padding:33px 24px;
    margin:0;
    float:left;

}
.h-nav li a:hover, 
.h-nav li a:focus {
    background-color:#ffbb58;
}
.h-nav li.parent {
    background:url("../../images/standard/arrow-down.png")no-repeat right;
}
/* Sub menu links */
.h-nav li li a {
    text-align:left;
}

.h-nav li li a:hover,
.h-nav li li a:focus {
    text-decoration:underline; 
    background-color:transparent; /* hide the background-color:#ffbb58 */
}
/* 1st Sub menu dropdown */
.h-nav li.parent ul.nav-child {
    margin:4px auto;
    position:absolute;
    margin-left:-9999%; /* using margin-left instead of display:none; because display isn't read by screen readers */
    text-align:left;
    padding:10px 5px;
    width:220px;
    background:url("../../images/standard/bg-submenu.png") repeat;
    z-index:9999;
    /*rounded corners - rounding only bottom corners */
    border-bottom-right-radius:10px 10px;
    border-bottom-left-radius:10px 10px;
    -moz-border-bottom-right-radius:10px 10px;
    -webkit-border-bottom-left-radius:10px 10px;    
}
/* keeps the drop down visible when hovering over parent menu */
.h-nav li.parent:hover .nav-child,
.h-nav li.parent a:focus + ul.nav-child {
    margin:auto;
    top:90px;
}
/* Resize the padding for the drop down menu items */
.h-nav li li a {
    display:block;  
    padding:2px 25px;
}
4

1 に答える 1

0

HTML にアクセスして手動で a を追加する機能がない場合tabindex、または毎回動的に生成される場合は、Javascript を使用tabindexしてli要素に a を追加できます (これは jQuery を使用します)。

$(document).ready(function(){
    $('.h-nav>li').attr('tabindex',0);
});

または通常の Javascript:

window.onload=function(){
    menu = document.getElementById("h-nav")
    navElems = menu.getElementsByTagName('li');
    for(e = 0; e < navElems.length; e++){
        if(navElems[e].parentNode == menu){
            navElems[e].tabIndex = 0;
        }
    }
}

を追加できない場合tabindex、に集中する他の方法はないと思いますli

編集 9/21/13

これは完全ではありませんが、キーボードのみで使用できます。

JSフィドル

それが機能するためには、アンカー付きのliを含むサブULを作成することはできません。アンカーは兄弟でなければなりません。このソリューションでは~セレクターを使用しますが、残念ながらターゲット要素の後の兄弟にのみ適用されるため、フォーカスされた要素が消える前にアンカーが作成されます。

于 2013-09-16T20:44:49.947 に答える