• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 931
  • Last Modified:

Javascript Slide Menu that covers a Select Box

Hi,

I found a script in W3Schools web site for a javascript based sliding menu. This menu is fine but then my problem is that I have dropdownlist boxes(Select controls) on the main page on the left column and it shows up on top of the sliding menu. I read somewhere that IFrames have to be used to fix this problem. It would be nice if someone can provide some sample code to do this.

The DHTML sliding menu code that I got from W3Schools web site ...

<html>
<head>
<style>
body{font-family:arial;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}

table.nav
{
background:black;
position:relative;
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>
<table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()">
<tr><td class="menu"><a href="/default.asp">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">ASP</a></td></tr>
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></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>

kind regards,
S
0
Sarav16
Asked:
Sarav16
1 Solution
 
BatalfCommented:
The problem is that a select box in IE is referred to as a windowed element, while <table>, <div> and other tags are windowless elements. A windowless elements can never be placed on top of a windowed element in IE. That's why you need to a) move your select box or b) put the menu inside an iframe.

The iframe solution is done by replacing your table:

<table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()">
<tr><td class="menu"><a href="/default.asp">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">ASP</a></td></tr>
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
</table>

with an iframe

<iframe width="150" height="500" frameborder="no" src="myMenu.html"></iframe>

Then you put the menu as content of the file myMenu.html.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My menu</title>
</head>
<body>
<table id="myMenu" class="nav" width="150" 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="_top">ASP</a></td></tr>
<tr><td class="menu"><a href="/js/default.asp" target="_top">JavaScript</a></td></tr>
<tr><td class="menu"><a href="default.asp" target="_top">DHTML</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp" target="_top">VBScript</a></td></tr>
</table>
</body>
</html>


The only difference is that the target is set to "_top" on the <a> tags.
0
 
Sarav16Author Commented:
Hi Batalf,

I tried something like this ...

<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="_top">ASP</a></td></tr>
<tr><td class="menu"><a href="/js/default.asp" target="_top">JavaScript</a></td></tr>
<tr><td class="menu"><a href="default.asp" target="_top">DHTML</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp" target="_top">VBScript</a></td></tr>
</table>
</body>
</html>

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
0
 
Sarav16Author Commented:
Hi everyone,

I found a solution to this problem and we don't have to put the menu or the select box inside an IFRAME.

Thanks for the help.

For the curious ones ...

please follow this link ...

http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx

kind regards,
S
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Sarav16Author Commented:
Hi Administrator,

I would like to close this question please.

Thank you.

kind regards,
S
0
 
Cem TürkSenior Software EngineerCommented:
No comment has been added to this question in more than 21 days, so it is now classified as abandoned..
I will leave the following recommendation for this question in the Cleanup topic area:

PAQ - Refund

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

cem_turk

EE Cleanup Volunteer
0
 
CetusMODCommented:
PAQed with points refunded (50)

CetusMOD
Community Support Moderator
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now