我用css+html做了一个菜单,当鼠标移上去的时候菜单出来,移开菜单消失。
但现在要添加功能:"当用Tab聚焦到主菜单上按下enter键时子菜单显示出来,此时按tab键可以选择子菜单项,按下ESC子菜单消失",该怎样改?可以用css或者结合javascript,只要能实现即可,现在非常急,请大家帮忙。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>prod menus</title>
<style>
ul.hMenu li:hover a { color:red;}
ul.hMenu li div table{ background-color:yellow;}
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;
}
/**Why this line can not work when the "Tab" to focus on the menu?**/
ul.hMenu li :focus div{
display:block;
}
</style>
</head>
<body>
<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>
</body>
</html>
但现在要添加功能:"当用Tab聚焦到主菜单上按下enter键时子菜单显示出来,此时按tab键可以选择子菜单项,按下ESC子菜单消失",该怎样改?可以用css或者结合javascript,只要能实现即可,现在非常急,请大家帮忙。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>prod menus</title>
<style>
ul.hMenu li:hover a { color:red;}
ul.hMenu li div table{ background-color:yellow;}
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;
}
/**Why this line can not work when the "Tab" to focus on the menu?**/
ul.hMenu li :focus div{
display:block;
}
</style>
</head>
<body>
<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>
</body>
</html>
解决方案 »
- 类GoogleMap的WebGIS
- 求一导航栏的javascript代码
- 各位老师帮忙呀,使用JS代码找对象,如果重名只能找到第一个怎么办呀,我晕,帮忙,,
- 求jsp+spring+mysql实现动态树形菜单的实例,要求所有菜单项都是从数据库中读取到的,还可以增删菜单项
- 反防止frame
- 鼠标样式都有哪些?
- 请问各位:如何让JAVA小程序做的水波纹效果自动显示,自动下载JAVA虚拟机?
- 怎么判断checkbox为空,我的这个那里错了,谢谢
- 初次编写函数,不起作用,请帮忙看一下
- javascript分不分大小写?
- 新人求教关于这段代码
- 问一个问题,是不是javascript有一个内置的类Option
var key = ev.keyCode || ev.witch;
switch(key) {
case 13://回车
alert('回车');
break;
case 27:
alert('esc');
break;
case 38:
alert('上');
break;
case 40:
alert('下');
break;
}
});
$(document).keydown(function(ev){
var key = ev.keyCode || ev.witch;
switch(key) {
case 13://回车
alert('回车');
break;
case 27:
alert('esc');
break;
case 38:
alert('上');
break;
case 40:
alert('下');
break;
}
});