keyboard navigation menu

i have a hide and show menu which works on keyboard navigation.
right now it works only for the first submenu. how to make it work for all the menus.
also i want to highlight the topmenu item when the respective submenu is shown.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 
<style>
td {
	color:white;
	font: 20px bold arial;
	border-bottom:1px solid #fff;
}
 
tr.rowhighlight {
      background-color: green;
}
tr.rowdefault {
      background-color: #000;
}
.selected {
	background-color: orange;
}
</style>
 
<script type="text/javascript">
intRowCount = 6;
intSelectedRow = 1;
function pressKey(e) {
      var key = (e.keyCode)? e.keyCode : e.which;
      if (key == 38) {  
            //up
            document.getElementById("tr" + intSelectedRow).className = "trdefault";
            intSelectedRow = intSelectedRow - 1;
            if (intSelectedRow == 0) intSelectedRow = intRowCount - 1;
            document.getElementById("tr" + intSelectedRow).className = "rowhighlight ";
            window.location.href = '#' + whichRow(intSelectedRow, intRowCount);
      }
      if (key == 40) {  
            //up
            document.getElementById("tr" + intSelectedRow).className = "trdefault";
            intSelectedRow = intSelectedRow + 1;
            if (intSelectedRow == intRowCount) intSelectedRow = 1;
            document.getElementById("tr" + intSelectedRow).className = "rowhighlight ";
            window.location.href = '#' + whichRow(intSelectedRow, intRowCount);
      }
}
function whichRow(row, maxRow) {
      if (row < 4) {
            return 1;
      } else if (row > maxRow - 2) {
            return maxRow - 4;
      } else {
            return row - 4;
      }
}
</script>
 
<script type="text/javascript">
 
 var menulist = ['menu1', 'menu2', 'menu3', 'menu4', 'menu5'];
 var selected = -1;
 function dropdown(id){
        for(i=0;i<menulist.length;i++){
                document.getElementById(menulist[i]).style.display='none';
        }
        document.getElementById(menulist[id]).style.display='';
        selected = id;
 }
document.onkeyup = function(e) {
	if(!e) e = window.event;
	
	switch(e.keyCode ? e.keyCode : e.charCode) {
	case 39: //right arrow
		moveRight();
		dropdown(selected >= menulist.length-1 ? 0 : selected+1);
		break;
	case 37: //left arrow
		moveLeft();
		dropdown(selected <= 0 ? menulist.length-1 : selected-1);
		break;
	case 38: //up arrow
		moveUp();
		break;
	case 40: //down arrow
		moveDown();
		break;
	}
}
 
var prev = null;
function select(el) {
	if(prev) prev.className = "";
	el.className = "selected";
	prev = el;
}
 
function moveRight() {
	if(!prev) return;
	
	var next = getRightCell(prev);
	
	if(!next) {
		alert("Already at end of row!");
		return;
	}
	
	select(next);
}
 
function moveLeft() {
	if(!prev) return;
	
	var next = getLeftCell(prev);
	
	if(!next) {
		alert("Already at beginning of row!");
		return;
	}
	
	select(next);
}
 
function moveUp() {
	if(!prev) return;
	
	var col = getColNum(prev);
	var nrow = getUpRow(prev);
	
	if(!nrow) {
		alert("Already top of column!");
		return;
	}
 
	var cellDiff = getCellDiff(col, nrow);
	select(nrow.cells[cellDiff]);
}
 
function moveDown() {
	if(!prev) return;
	
	var col = getColNum(prev);
	var nrow = getDownRow(prev);
	
	if(!nrow) {
		alert("Already at bottom of column!");
		return;
	}
	
	var cellDiff = getCellDiff(col, nrow);
	select(nrow.cells[cellDiff]);
}
 
//Calculate potential difference in cells per row
function getCellDiff(cell, nrow) {
	var diff = 0;
	var index = 0;
	for(i=0;i<nrow.cells.length;i++){
		if(index==cell) break;
		if(index>cell) {
			diff--;
			break;
		}
		if(nrow.cells[i].colSpan) index += nrow.cells[i].colSpan;
		else index++;
		diff++;
	}
	
	return diff;
}
 
function getUpRow(el) {
	var nrow = el.parentNode.previousSibling;
	if(!nrow) return null;
	if(nrow.nodeType == 3) nrow = nrow.previousSibling;
	return nrow;
}
 
function getDownRow(el) {
	var nrow = el.parentNode.nextSibling;
	if(!nrow) return null;
	if(nrow.nodeType == 3) nrow = nrow.nextSibling;
	return nrow;
}
 
function getLeftCell(el) {
	var lcell = el.previousSibling;
	if(!lcell) return null;
	if(lcell.nodeType == 3) lcell = lcell.previousSibling;
	return lcell;
}
 
function getRightCell(el) {
	var rcell = el.nextSibling;
	if(!rcell) return null;
	if(rcell.nodeType == 3) rcell = rcell.nextSibling;
	return rcell
}
 
//Return column number of el
function getColNum(el) {
	var num = 0;
	while(el = el.previousSibling) {
		if(el.nodeType != 1) continue;
		else if(el.colSpan) num += el.colSpan;
		else num++;
	}
	return num;
}
</script>
 
 </head>
 <body onkeydown="pressKey(event);document.getElementById('1').focus();">
<table cellpadding="0" cellspacing="1" border="1" width="900">
	<tr>
			<td id="1" tabIndex="1" width="220" height="35" onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="green">tretre</td>
			<td tabIndex="2" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">rter</td>
			<td tabIndex="3" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">tert</td>
			<td tabIndex="4" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">eter</td>
			<td tabIndex="4" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">tert</td>
	</tr>
	<tr>
			<td align="left">
					<div id="menu1" style="display:none;width:220px;background-color:#fff">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
								   <tr id="TR1" class="ROWHIGHLIGHT">
									   <td>423</td>
								   </tr>
								   <tr id="TR2" class="ROWDEFAULT">
										<td>342</td>
								   </tr>
								   <tr id="TR3" class="ROWDEFAULT">
										<td>234</td>
								   </tr>
								   <tr id="TR4" class="ROWDEFAULT">
										<td>4234</td>
								   </tr>
								   <tr id="TR5" class="ROWDEFAULT">
										<td>2423</td>
									</tr>	  
						  </table>
					</div>
				</td>
				<td>
		   
					<div id="menu2" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1" class="ROWHIGHLIGHT">
								<td>tert</td>
								</tr>
								<tr id="TR2" class="ROWDEFAULT">
								<td>erter</td>
								</tr>
								<tr id="TR3" class="ROWDEFAULT">
								<td>terte</td>
							  </tr>
						  </table>
					</div>
				</td>
				<td>
			
					<div id="menu3" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1" class="ROWHIGHLIGHT">
								<td>4534</td>
								</tr>
								<tr id="TR2" class="ROWDEFAULT">
								<td>34543</td>
								</tr>
								<tr id="TR3" class="ROWDEFAULT">
								<td>43534</td>
								</tr>
								<tr id="TR4" class="ROWDEFAULT">
								<td>3534</td>
								</tr>
								<tr id="TR5" class="ROWDEFAULT">
								<td>43534</td>
							  </tr>
						  </table>
					</div>
				</td>
				<td>
			
					<div id="menu4" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1" class="ROWHIGHLIGHT">
								<td>gdfgdf</td>
								</tr>
								<tr id="TR2" class="ROWDEFAULT">
								<td>gdfgdf</td>
								</tr>
								<tr id="TR3" class="ROWDEFAULT">
								<td>dfgdfg</td>
							  </tr>
						  </table>
					</div>
				</td>
				<td>
			
					<div id="menu5" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1" class="ROWHIGHLIGHT">
								<td>34324</td>
								</tr>
								<tr id="TR2" class="ROWDEFAULT">
								<td>34543</td>
								</tr>
								<tr id="TR3" class="ROWDEFAULT">
								<td>345345</td>
								</tr>
								<tr id="TR4" class="ROWDEFAULT">
								<td>3543</td>
							  </tr>
						  </table>
					</div>
			</td>
			<td colspan="4" width="780"></td>
		</tr>
	</table>
 </body>
</html>

Open in new window

vidhubalaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jose_juanCommented:
Hi,

your problem is

document.getElementById("tr" + intSelectedRow)

statement. Your try use a tr-N object but N object, not exists!

Check correct values for intSelectedRow and initialite it correctly.

e.g.

if( intSelectedRow < 0 || intSelectedRow > max )
   intSelectedRow = 0;

Regards.
0
vidhubalaAuthor Commented:
just tried. didnt help.  can u pl insert in my code and show it?
0
jose_juanCommented:
Uhm...

your first problem are you call "tr" + ..., javascript are case sensitive use "TR" + ... (or rename <tr id="TR"... to <tr id="tr"...).

your second problem was you have write
 

  ...className = "rowhighlight     "

but spaces not is correct put

  ...className = "rowhighlight"

your third problem are you higlight only for the first menu (up/down only run on first menu).

your fourth problem...

On the other hand, your schema not is the best way to do it. It is the reason for I suggest to you read examples in the net.

Do not be discouraged, but have patience to learn.

Regards.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

vidhubalaAuthor Commented:
made the suggested changes. didnt help. this was an example in the net and i am trying to customize. not getting resolved.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
<script type="text/javascript">
intRowCount = 6;
intSelectedRow = 1;
function pressKey(e) {
      var key = (e.keyCode)? e.keyCode : e.which;
      if (key == 38) {  
            //up
            document.getElementById("tr" + intSelectedRow).className = "trdefault";
            intSelectedRow = intSelectedRow - 1;
            if (intSelectedRow == 0) intSelectedRow = intRowCount - 1;
            document.getElementById("tr" + intSelectedRow).className = "rowhighlight";
      }
      if (key == 40) {  
            //up
            document.getElementById("tr" + intSelectedRow).className = "trdefault";
            intSelectedRow = intSelectedRow + 1;
            if (intSelectedRow == intRowCount) intSelectedRow = 1;
            document.getElementById("tr" + intSelectedRow).className = "rowhighlight";
           // window.location.href = '#' + whichRow(intSelectedRow, intRowCount);
	  }
	  if (key == 39) {
			dropdown(selected >= menulist.length-1 ? 0 : selected+1); 
      }
 
	  if (key == 37) {
			dropdown(selected <= 0 ? menulist.length-1 : selected-1); 
	  }
}
function whichRow(row, maxRow) {
      if (row < 4) {
            return 1;
      } else if (row > maxRow - 2) {
            return maxRow - 4;
      } else {
            return row - 4;
      }
}
 
 var menulist = ['menu1', 'menu2', 'menu3', 'menu4', 'menu5'];
 var selected = -1;
 function dropdown(id){
        for(i=0;i<menulist.length;i++){
                document.getElementById(menulist[i]).style.display='none';
        }
        document.getElementById(menulist[id]).style.display='';
		document.getElementById("tr" + intSelectedRow).className = "trdefault";
        selected = id;
 }
</script>
<style type="text/css">
tr.rowhighlight {
      background-color: orange;
}
tr.rowdefault {
      background-color: #000;
}
 
td {
		color:white;
		font: 20px bold arial;
		border-bottom:1px solid #fff;
	}
</style>
 </head>
 <body onkeydown="pressKey(event);document.getElementById('1').focus();">
<table cellpadding="10" cellspacing="10" border="0" width="1000">
	<tr>
			<td id="1" tabIndex="1" width="200" height="35" align="center" bgcolor="orange">1</td>
			<td id="2" tabIndex="2" width="200" height="35" align="center"  bgcolor="black">2</td>
			<td id="3" tabIndex="3" width="200" height="35"  align="center"  bgcolor="black">3</td>
			<td id="4" tabIndex="4" width="200" height="35" align="center" bgcolor="black">4</td>
			<td id="5" tabIndex="4" width="200" height="35" align="center" bgcolor="black">5</td>
	</tr>
	<tr>
			<td align="left">
					<div id="menu1" style="display:none;width:220px;background-color:#fff">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
								   <tr id="tr1" class="ROWHIGHLIGHT">
									   <td>11</td>
								   </tr>
								   <tr id="tr2" class="ROWDEFAULT">
										<td>12</td>
								   </tr>
								   <tr id="tr3" class="ROWDEFAULT">
										<td>13</td>
								   </tr>
								   <tr id="tr4" class="ROWDEFAULT">
										<td>14</td>
								   </tr>
								   <tr id="tr5" class="ROWDEFAULT">
										<td>15</td>
									</tr>	  
						  </table>
					</div>
		   
					<div id="menu2" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="tr1" class="ROWHIGHLIGHT">
								<td>21</td>
								</tr>
								<tr id="tr2" class="ROWDEFAULT">
								<td>22</td>
								</tr>
								<tr id="tr3" class="ROWDEFAULT">
								<td>23</td>
							  </tr>
						  </table>
					</div>
			
					<div id="menu3" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="tr1" class="ROWHIGHLIGHT">
								<td>31</td>
								</tr>
								<tr id="tr2" class="ROWDEFAULT">
								<td>32</td>
								</tr>
								<tr id="tr3" class="ROWDEFAULT">
								<td>33</td>
								</tr>
								<tr id="tr4" class="ROWDEFAULT">
								<td>34</td>
								</tr>
								<tr id="tr5" class="ROWDEFAULT">
								<td>35</td>
							  </tr>
						  </table>
					</div>
			
					<div id="menu4" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="tr1" class="ROWHIGHLIGHT">
								<td>41</td>
								</tr>
								<tr id="tr2" class="ROWDEFAULT">
								<td>42</td>
								</tr>
								<tr id="tr3" class="ROWDEFAULT">
								<td>43</td>
							  </tr>
						  </table>
					</div>
			
					<div id="menu5" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="tr1" class="ROWHIGHLIGHT">
								<td>51</td>
								</tr>
								<tr id="tr2" class="ROWDEFAULT">
								<td>52</td>
								</tr>
								<tr id="tr3" class="ROWDEFAULT">
								<td>53</td>
								</tr>
								<tr id="tr4" class="ROWDEFAULT">
								<td>54</td>
							  </tr>
						  </table>
					</div>
			</td>
			<td colspan="4" width="780"></td>
		</tr>
	</table>
 </body>
</html>

Open in new window

0
jose_juanCommented:
Uhm...

What do you want? A complete solution? I think this is not the way.
You must do the job.

(I don't know if a administrator will warn me... but)

one little more advanced version (see code).

you should strive

Good luck!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 
<style>
td {
	color:white;
	font: 20px bold arial;
	border-bottom:1px solid #fff;
}
 
tr.rowhighlight {
      background-color: green;
}
tr.rowdefault {
      background-color: #000;
}
.selected {
	background-color: orange;
}
</style>
 
<script type="text/javascript">
intRowCount = 6;
intSelectedRow = 1;
function pressKey(e) {
      var key = (e.keyCode)? e.keyCode : e.which;
 
      var step = 0
 
      if (key == 38) step = -1
      if (key == 40) step = +1
 
      var op0 = document.getElementById("TR" + intSelectedRow + "_" + (selected+1))
      var op1 = document.getElementById("TR" + (intSelectedRow+step) + "_" + (selected+1))
 
      if( op1 == null )
      	return; // not exists
 
		op0.className = "trdefault";
		op1.className = "rowhighlight";
		intSelectedRow += step
 
		window.location.href = '#' + whichRow(intSelectedRow, intRowCount);
}
function whichRow(row, maxRow) {
      if (row < 4) {
            return 1;
      } else if (row > maxRow - 2) {
            return maxRow - 4;
      } else {
            return row - 4;
      }
}
</script>
 
<script type="text/javascript">
 
 var menulist = ['menu1', 'menu2', 'menu3', 'menu4', 'menu5'];
 var selected = -1;
 function dropdown(id){
        for(i=0;i<menulist.length;i++){
                document.getElementById(menulist[i]).style.display='none';
        }
        document.getElementById(menulist[id]).style.display='';
        selected = id;
 }
document.onkeyup = function(e) {
	if(!e) e = window.event;
 
	switch(e.keyCode ? e.keyCode : e.charCode) {
	case 39: //right arrow
		moveRight();
		dropdown(selected >= menulist.length-1 ? 0 : selected+1);
		break;
	case 37: //left arrow
		moveLeft();
		dropdown(selected <= 0 ? menulist.length-1 : selected-1);
		break;
	case 38: //up arrow
		moveUp();
		break;
	case 40: //down arrow
		moveDown();
		break;
	}
}
 
var prev = null;
function select(el) {
	if(prev) prev.className = "";
	el.className = "selected";
	prev = el;
}
 
function moveRight() {
	if(!prev) return;
 
	var next = getRightCell(prev);
 
	if(!next) {
		alert("Already at end of row!");
		return;
	}
 
	select(next);
}
 
function moveLeft() {
	if(!prev) return;
 
	var next = getLeftCell(prev);
 
	if(!next) {
		alert("Already at beginning of row!");
		return;
	}
 
	select(next);
}
 
function moveUp() {
	if(!prev) return;
 
	var col = getColNum(prev);
	var nrow = getUpRow(prev);
 
	if(!nrow) {
		alert("Already top of column!");
		return;
	}
 
	var cellDiff = getCellDiff(col, nrow);
	select(nrow.cells[cellDiff]);
}
 
function moveDown() {
 
	if(!prev) return;
 
	var col = getColNum(prev);
	var nrow = getDownRow(prev);
 
	if(!nrow) {
		alert("Already at bottom of column!");
		return;
	}
 
	var cellDiff = getCellDiff(col, nrow);
	select(nrow.cells[cellDiff]);
}
 
//Calculate potential difference in cells per row
function getCellDiff(cell, nrow) {
	var diff = 0;
	var index = 0;
	for(i=0;i<nrow.cells.length;i++){
		if(index==cell) break;
		if(index>cell) {
			diff--;
			break;
		}
		if(nrow.cells[i].colSpan) index += nrow.cells[i].colSpan;
		else index++;
		diff++;
	}
 
	return diff;
}
 
function getUpRow(el) {
	var nrow = el.parentNode.previousSibling;
	if(!nrow) return null;
	if(nrow.nodeType == 3) nrow = nrow.previousSibling;
	return nrow;
}
 
function getDownRow(el) {
	var nrow = el.parentNode.nextSibling;
	if(!nrow) return null;
	if(nrow.nodeType == 3) nrow = nrow.nextSibling;
	return nrow;
}
 
function getLeftCell(el) {
	var lcell = el.previousSibling;
	if(!lcell) return null;
	if(lcell.nodeType == 3) lcell = lcell.previousSibling;
	return lcell;
}
 
function getRightCell(el) {
	var rcell = el.nextSibling;
	if(!rcell) return null;
	if(rcell.nodeType == 3) rcell = rcell.nextSibling;
	return rcell
}
 
//Return column number of el
function getColNum(el) {
	var num = 0;
	while(el = el.previousSibling) {
		if(el.nodeType != 1) continue;
		else if(el.colSpan) num += el.colSpan;
		else num++;
	}
	return num;
}
</script>
 
 </head>
 <body onkeydown="pressKey(event);document.getElementById('1').focus();">
<table cellpadding="0" cellspacing="1" border="1" width="900">
	<tr>
			<td id="1" tabIndex="1" width="220" height="35" onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="green">tretre</td>
			<td tabIndex="2" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">rter</td>
			<td tabIndex="3" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">tert</td>
			<td tabIndex="4" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">eter</td>
			<td tabIndex="4" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">tert</td>
	</tr>
	<tr>
			<td align="left">
					<div id="menu1" style="display:none;width:220px;background-color:#fff">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
								   <tr id="TR1_1" class="ROWDEFAULT">
									   <td>423</td>
								   </tr>
								   <tr id="TR2_1" class="ROWDEFAULT">
										<td>342</td>
								   </tr>
								   <tr id="TR3_1" class="ROWDEFAULT">
										<td>234</td>
								   </tr>
								   <tr id="TR4_1" class="ROWDEFAULT">
										<td>4234</td>
								   </tr>
								   <tr id="TR5_1" class="ROWDEFAULT">
										<td>2423</td>
									</tr>
						  </table>
					</div>
				</td>
				<td>
 
					<div id="menu2" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1_2" class="ROWDEFAULT">
								<td>tert</td>
								</tr>
								<tr id="TR2_2" class="ROWDEFAULT">
								<td>erter</td>
								</tr>
								<tr id="TR3_2" class="ROWDEFAULT">
								<td>terte</td>
							  </tr>
						  </table>
					</div>
				</td>
				<td>
 
					<div id="menu3" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1_3" class="ROWDEFAULT">
								<td>4534</td>
								</tr>
								<tr id="TR2_3" class="ROWDEFAULT">
								<td>34543</td>
								</tr>
								<tr id="TR3_3" class="ROWDEFAULT">
								<td>43534</td>
								</tr>
								<tr id="TR4_3" class="ROWDEFAULT">
								<td>3534</td>
								</tr>
								<tr id="TR5_3" class="ROWDEFAULT">
								<td>43534</td>
							  </tr>
						  </table>
					</div>
				</td>
				<td>
 
					<div id="menu4" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1_4" class="ROWDEFAULT">
								<td>gdfgdf</td>
								</tr>
								<tr id="TR2_4" class="ROWDEFAULT">
								<td>gdfgdf</td>
								</tr>
								<tr id="TR3_4" class="ROWDEFAULT">
								<td>dfgdfg</td>
							  </tr>
						  </table>
					</div>
				</td>
				<td>
 
					<div id="menu5" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1_5" class="ROWDEFAULT">
								<td>34324</td>
								</tr>
								<tr id="TR2_5" class="ROWDEFAULT">
								<td>34543</td>
								</tr>
								<tr id="TR3_5" class="ROWDEFAULT">
								<td>345345</td>
								</tr>
								<tr id="TR4_5" class="ROWDEFAULT">
								<td>3543</td>
							  </tr>
						  </table>
					</div>
			</td>
			<td colspan="4" width="780"></td>
		</tr>
	</table>
 </body>
</html>

Open in new window

0
vidhubalaAuthor Commented:
thanks for time jo. i was also working in many different ways to get to the shape i got. but it needs some real expert eye to figure the problem as its driven by keys, by mouse its a cake walk. also i donot want the sub menu items to go under the respective top menu items.
0
jose_juanCommented:
Hi,

a complete menu controller not is trivial, I suggest (again) search and see examples.

to control keys like "hotKeys" you can test my next example code (see code).

Good luck!

<html>
<head>
<script>
 
	// Internet Explorer is different...
	var IE = window.Event == null;
 
	var cCtrl, cAlt, cShift
 
	function getid(id) {
		return document.getElementById(id);
	}
 
	function SetConfig() {
		cCtrl = getid("sCtrl").checked;
		cAlt = getid("sAlt").checked;
		cShift = getid("sShift").checked;
		ShowConfig();
	}
 
	function GetConfig() {
		var w = '';
		if( cCtrl ) w += "Ctrl+";
		if( cAlt ) w += "Alt+";
		if( cShift ) w += "Shift+";
		return "<br>You must press <b>" + w + "Key</b><br><br>Take care when press a key, some will be close your browser! (or other effects)<br><br>";
	}
 
	function ShowConfig() {
		getid('msg').innerHTML = GetConfig();
	}
 
	function Body_OnKeyPress(e) {
		var k = IE ? window.event.keyCode : e.which;
		var c = IE ? window.event.ctrlKey : e.ctrlKey;
		var a = IE ? window.event.altKey : e.altKey;
		var s = IE ? window.event.shiftKey : e.shiftKey;
 
		if( ( c || !cCtrl ) && ( a || !cAlt ) && ( s || !cShift ) )
			getid("msg").innerHTML = GetConfig() + "<br>Your key code is <b>" + k + "</b>";
	}
 
</script>
</head>
<body onkeypress="Body_OnKeyPress(event)" onload="SetConfig()">
 
<div>
Check <b>Ctrl</b>&nbsp;<input id="sCtrl" type="checkbox" onclick="SetConfig()" checked>&nbsp;
Check <b>Alt</b>&nbsp;<input id="sAlt" type="checkbox" onclick="SetConfig()" checked>&nbsp;
Check <b>Shift</b>&nbsp;<input id="sShift" type="checkbox" onclick="SetConfig()" checked>&nbsp;
</div>
 
<div id="msg"></div>
 
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
vidhubalaAuthor Commented:
thanks jose.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.