Switch Menu Appears Behind Form Elements
1) Script Title: Switch Menu
2) Script URL (on DD): http://dynamicdrive.com/dynamicindex1/switchmenu.htm
3) Describe problem: When my submenu collapses, it is appearing behind other buttons and form elements. How can I make it appear over these items?
Excuse the messy code, server side output !
<style type="text/css">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
.menutitle{
cursorointer;
position: absolute;
top: 80px;
color:#000000;
}
.submenu{
position: absolute;
top: 104px;
width:120px;
border:1px solid #000000;
}
</style>
<script type="text/javascript">
/* Switch Menu */
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>
</head>
</head>
<div id="masterdiv">
<table border="0" cellpadding="0" cellspacing="0" style="padding-left:0px;" width="720">
<tr>
<!-- Inventory Menu -->
<td width="132" nowrap>
<div class="menutitle" onclick="SwitchMenu('sub1')">
<button style="width:120;height:23;font-family:verdana;;">Inventory</button>
</div>
<span class="submenu" id="sub1">
<table border="0" cellpadding="0" width="100%" bgcolor="#809CC8" style="border-collapse: collapse" bordercolor="#008000">
<form method="POST" name="inventory" style="margin-bottom:0" style="margin-bottom:0;">
<tr><td width="100%" height="5"></td></tr>
<tr><td width="100%" height="30"><p align="center"><input type="button" value="Upload Manifest" class="button" style="width:105px;" onClick="location.href='../inventory.asp?action=uploadManifest';"></td></tr>
<tr><td width="100%" height="30"><p align="center"><input type="button" value="Enter An Item" class="button" style="width:105px;" onClick="location.href='../inventory.asp?action=enterItem';"></td></tr>
<tr><td width="100%" height="30"><p align="center"><input type="button" value="Receive Items" class="button" style="width:105;" onClick="location.href='../inventory.asp?action=receiveItem';"></td></tr>
<tr><td width="100%" height="5"></td></tr>
</form>
</table>
</span>
</td>
<!-- Inventory Menu -->
</tr>
</table>
</div>
</td>
</tr>
<tr><td valign="top">
<head>
<style type="text/css">
.reports_menu{
cursor
position: absolute;
top: 125px;
color:#000000;
}
.reports_submenu{
position: absolute;
top: 149px;
width:120px;
border:1px solid #000000;
}
</style>
<script type="text/javascript">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
/* Switch Menu */
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.reports_submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchReportsMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("reports_masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="reports_submenu")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>
<div id="reports_masterdiv">
<table border="0" cellpadding="0" cellspacing="0" style="padding-left:0px;" width="432">
<tr>
<!-- Begin Sold Items Menu -->
<td width="132" nowrap>
<div class="reports_menu" onclick="SwitchReportsMenu('sub_reports1')">
<button style="width:120;height:23;font-family:verdana;background:white;font:10pt;">Sold Items</button>
</div>
<span class="reports_submenu" id="sub_reports1">
<table border="0" cellpadding="0" width="100%" bgcolor="#809CC8" style="border-collapse: collapse" bordercolor="#008000">
<form method="POST" action="reports/sold_items.asp" onsubmit="return validate(this);" name="sold_items" style="margin-bottom:0" style="margin-bottom:0;">
<tr><td width="100%" height="5"></td></tr>
<tr><td width="100%" height="20"><p align="center"><font size="1" face="Verdana" color="#FFFFFF">Select Category</font></td></tr>
<tr><td width="100%" height="5"></td></tr>
<tr><td width="100%" height="20"><p align="center"><font size="1" face="Verdana" color="#FFFFFF">Enter Item Number<br>(blank for all)</font></td></tr>
<tr><td width="100%"><p align="center"><input type="text" name="item_number" style="font-size:8pt;" size="17"></td></tr>
<tr><td width="95%"> </td></tr>
</form>
</table>
</span>
</td>
<!-- Sold Items Menu -->
</table>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks