如何使用css僞類選擇器來實現這個菜單？

我開發了一個菜單，但我想添加一些鍵盤功能到菜單。當菜單集中時，我希望能夠按輸入來顯示菜單。然後我可以按標籤選擇菜單項。然後我想按ESC隱藏菜單項。如何使用css僞類選擇器來實現這個菜單？

如何更改我的CSS？

HTML

<ul class="hMenu"> 
    <li><a href="">prod1</a> 
    <div> 
     <a href="">test1</a> 
     <a href="">test2</a> 
     <a href="">test3</a>     
    </div> 
    </li> 
    <li><a href="javascript:void(0);" >prod2</a> 
    <div> 
     <a href="">test4</a> 
     <a href="">test5</a>     
    </div> 
    </li> 
</ul>

CSS

ul.hMenu li:hover a { 
    color:red; 
}   
ul.hMenu { 
    margin: 0; 
    padding: 0; 
    z-index: 1;    
} 
ul.hMenu li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    float: left; 
    width:140px; 
} 
ul.hMenu li a { 
    display: block; 
    text-align: left; 
    text-decoration: none 
}   
ul.hMenu li div {      
    position: absolute;    
    display: none;     
} 
ul.hMenu div a { 
    background: yellow;  
} 
ul.hMenu li :hover { 
    background: yellow 
} 
/**Mouse hover the menus can show up**/ 
ul.hMenu li:hover div{   
    display:block; 
}

來源

2013-07-09 Harim

我不認爲你可以做到這一點沒有js – Horst

我同意@fattomhk有：active和：focus僞選擇器https://developer.mozilla.org/en-US/docs/Web/CSS/:active和https://developer.mozilla.org/en-US/docs/Web/CSS/:focus只有當主鼠標按鍵關閉時，主動鍵才起作用，而焦點只在元素有鍵盤焦點。對於你要求用JavaScript來改變類是必需的。 – HJ05

我想出了一個解決方案，將讓你在正確的方向前進。

CSS無法處理與鍵入的特定鍵有關的事件。你需要使用javascript，或者在這種情況下使用jQuery來幫助你。

keypress功能就是您在這種情況下所需要的功能。

我不知道該怎麼辦互聯功能，但我的確得到了輸入和ESC功能工作

這裏是jQuery的

$('document').ready(function() { 
    var menu = $(".hMenu"); 
    menu.hide() 
    $("body").on("keypress", function (e) { 
     if (e.keyCode === 13) { //Key Code for Enter 
      menu.fadeIn(); 
     } 
     if (e.keyCode === 27) { //Key Code for ESC 
      menu.fadeOut(); 
     } 
     if (e.keyCode === 9) { //Key Code for Tab 
      //Tabbing function here 
     } 
    }); 
});

Fiddle

當你按下相應的鍵時，這將有效地淡入菜單。

來源

2013-07-09 04:41:53

嗨，感謝您的回覆，我的意思是當我專注於菜單並按下回車鍵後，菜單項就會出現。 – Harim

所以你想點擊頂部的菜單項，然後按回車顯示子菜單？ –

是的，然後單擊ESC將隱藏子菜單。此外，我們可以使用Tab來選擇子菜單項。 – Harim

如何使用css僞類選擇器來實現這個菜單？

回答

相關問題