Menu
I have read that DropDownList Box is a windowed control and that you can’t use Z-Index to make any non windowed control to display on top of a windowed control. I have also read that IFrames can be used to overcome this problem. I have also read JoeKing’s blog which talks about using an IFrame shim to cover select box and other windowed controls. Yet, I am stuck here with this sliding menu. I got this sliding menu code from w3Schools web site and it works fine except of the fact that the dropdownlist box shows on top of the menu. I tried the IFrame solution but the sliding menu is no longer working. I don’t know what mistake I am doing here, that it is not working.
I have pasted the code here.
Could someone help me please?
The code …
<code>
<html>
<head>
<style>
body{font-family:arial;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
iframe.nav
{
position:absolute;
font:bold 80%;
top:0px;
left:-135px;
}
</style>
<script type=”text/javascript”>
var i=-135
var intHide
var speed=3
function showmenu()
{
clearInterval(intHide)
intShow=setInterval(“show()”,10)
}
function hidemenu()
{
clearInterval(intShow)
intHide=setInterval(“hide()”,10)
}
function show()
{
if (i<-12)
{
i=i+speed
document.getElementById(‘myMenu’).style.left=i
}
}
function hide()
{
if (i>-135)
{
i=i-speed
document.getElementById(‘myMenu’).style.left=i
}
}
</script>
</head>
<body>
<iframe class=”nav” width=”150″ height=”500″ frameborder=”no” src=”myMenu.html”></iframe>
<table width=100% height =100% border=1>
<tr>
<!–
<td valign=”top”>
<iframe class=”nav” width=”150″ height=”500″ frameborder=”no” src=”myMenu.html”></iframe>
</td>
–>
<td width=100% align=”left” valign=”top”>
<SELECT NAME=”Cats” SIZE=”1″>
<OPTION VALUE=”1″>Calico
<OPTION VALUE=”2″>Tortie
<OPTION VALUE=”3″ SELECTED>Siamese
</SELECT>
</td>
</tr>
</table>
<p>Mouse over the MENU to show/hide the menu</p>
<p>Try changing the “speed” variable in the script, to change the menus’s sliding speed</p>
</body>
</html>
and the code for myMenu.html …
<html>
<head>
<title>My menu</title>
<style>
td.menu{background:lightblue}
</style>
<script type=”text/javascript”>
var i=-135
var intHide
var speed=3
function showmenu()
{
clearInterval(intHide)
intShow=setInterval(“show()”,10)
}
function hidemenu()
{
clearInterval(intShow)
intHide=setInterval(“hide()”,10)
}
function show()
{
if (i<-12)
{
i=i+speed
document.getElementById(‘myMenu’).style.left=i
}
}
function hide()
{
if (i>-135)
{
i=i-speed
document.getElementById(‘myMenu’).style.left=i
}
}
</script>
</head>
<body>
<table id=”myMenu” width=”135″ onmouseover=”showmenu()” onmouseout=”hidemenu()”>
<tr><td class=”menu”><a href=”/default.asp” target=”_top”>HOME</a></td>
<td rowspan=”5″ align=”center” bgcolor=”#FF8080″>M<br>E<br>N<br>U</td></tr>
<tr><td class=”menu”><a href=”/asp/default.asp” target=”
<tr><td class=”menu”><a href=”/js/default.asp” target=”_top”>JavaScript</a></td></tr>
<tr><td class=”menu”><a href=”default.asp” target=”
<tr><td class=”menu”><a href=”/vbscript/default.asp” target=”_top”>VBScript</a></td></tr>
</table>
</body>
</html>
</code>
On doing so, I see a border and a horizontal scroll bar in the Iframe portion and also the menu doesn’t slide across. The sliding action is not working. I don’t know what mistake I am doing.
please help.
kind regards,
S