<html>
<head>
<title>键盘控制级联菜单</title>
<style type="text/css">
input {border:1px solid #fff; background:#fff; }
input {star : expression(
οnmοuseοver=function(){this.style.backgroundColor="#eee"},
οnmοuseοut=function(){this.style.backgroundColor="#fff"})}
.in40 {width:40px;}
.in80 {width:80px;}
.in120 {width:120px;}
.in200 {width:200px;}
</style>
<script defer>
var root=["menu1","menu2","menu3"];
var menu1=["menu1.1","menu1.2"];
var menu2=["menu2.1","menu2.2"];
var menu3=["menu3.1","menu3.2"];
var obj=document.getElementsByTagName("input");
var urlpath = "";
for(var i=0;i<obj.length;i++){
if(obj[i].input){
obj[i].focus();
break;
}
}
document.οnkeydοwn=function(){
try{
if(event.keyCode==13){
window.open(urlpath);
}
if(event.keycode == 27){
window.closed();
}
if(event.keyCode==40){//下
if(event.srcElement.submenu){
if(document.getElementById(event.srcElement.submenu).style.display=="block"){
var arr=eval(event.srcElement.name);
document.getElementsByName(arr[0])[0].focus();
}else{
var parentMenu=event.srcElement.parentMenu;
var selfName=event.srcElement.name;
var arr=eval(event.srcElement.parentMenu);
var n;
for(var i=0;i<arr.length;i++){
if(arr[i]==selfName){
n=i;
break;
}
}
if(n!=arr.length-1){
document.getElementsByName(arr[n+1])[0].focus();
}
}
}else{
var parentMenu=event.srcElement.parentMenu;
var selfName=event.srcElement.name;
var arr=eval(parentMenu);
var n;
for(var i=0;i<arr.length;i++){
if(arr[i]==selfName){
n=i;
break;
}
}
if(n!=arr.length-1){
document.getElementsByName(arr[n+1])[0].focus();
}else{
selfName=parentMenu;
parentMenu=document.getElementsByName(parentMenu)[0].parentMenu;
var arr=eval(parentMenu);
var n;
for(var i=0;i<arr.length;i++){
if(arr[i]==selfName){
n=i;
break;
}
}
if(n!=arr.length-1){
document.getElementsByName(arr[n+1])[0].focus();
}
}
}
}
else if(event.keyCode==38){//上
var parentMenu=event.srcElement.parentMenu;
var selfName=event.srcElement.name;
var arr=eval(event.srcElement.parentMenu);
var n;
for(var i=0;i<arr.length;i++){
if(arr[i]==selfName){
n=i;
break;
}
}
if(n>0){
var preMenu=document.getElementsByName(arr[n-1])[0];
if(preMenu.submenu){
var preSubDiv=document.getElementById(preMenu.submenu);
if(preSubDiv.style.display=="none"){
preMenu.focus();
}else{
var preSubArr=eval(arr[n-1]);
var focusMenu=document.getElementsByName(preSubArr[preSubArr.length-1])[0];
focusMenu.focus();
}
}else{
preMenu.focus();
}
}else{
if(parentMenu!="root"){
document.getElementsByName(parentMenu)[0].focus();
}
}
}
else if(event.keyCode==37){//左
if(event.srcElement.submenu){
document.getElementById(event.srcElement.submenu).style.display="none";
}
}
else if(event.keyCode==39){//右
if(event.srcElement.submenu){
document.getElementById(event.srcElement.submenu).style.display="block";
}
}
}catch(e){
}
}
function url(obj){
urlpath =obj.value;
}
</script>
</head>
<body>
键盘控制级联菜单演示:
<div style="position:absolute;left:10px;top:50px">
<input type=text name="menu1" class="in200" submenu="submenu1" parentMenu="root" value="http://www.google.com" οnfοcus="this.select();url(this)" size="40" readonly="readonly"><br>
<div id="submenu1" style="display:none">
<input type=text name="menu1.1" parentMenu="menu1" class="in80" value=" 菜单1.1" οnfοcus="this.select();url(this)" readonly="readonly"><br/>
<input type=text name="menu1.2" parentMenu="menu1" class="in80" value=" 菜单1.2" οnfοcus="this.select();url(this)" readonly="readonly">
</div>
<input type=text name="menu2" class="in200" submenu="submenu2" parentMenu="root" value="http://www.google.com" οnfοcus="this.select();url(this)" size="40" readonly="readonly"><br>
<div id="submenu2" style="display:none">
<input type=text name="menu2.1" parentMenu="menu2" class="in80" value=" 菜单2.1" οnfοcus="this.select();url(this)" readonly="readonly"><br>
<input type=text name="menu2.2" parentMenu="menu2" class="in80" value=" 菜单2.2" οnfοcus="this.select();url(this)" readonly="readonly">
</div>
<input type=text name="menu3" class="in200" submenu="submenu3" parentMenu="root" value="http://www.google.com" οnfοcus="this.select();url(this)" size="40" readonly="readonly">
<div id="submenu3" style="display:none">
<input type=text name="menu3.1" parentMenu="menu3" class="in80" value=" 菜单3.1" οnfοcus="this.select();url(this)" readonly="readonly"><br>
<input type=text name="menu3.2" parentMenu="menu3" class="in80" value=" 菜单3.2" οnfοcus="this.select();url(this)" readonly="readonly">
</div>
</div>
</body>
</html>