Switch Menu Positioning
1) Script Title:
Switch menu script
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...switchmenu.htm
3) Describe problem:
When I click the button that makes the sub-menu appear, I prevent the content under the sub-menu from shifting down by using position:absolute in the sub-menu styles but if I resize the screen, the sub-menu moves around.
How can I prevent the content from shifting down while also keeping the sub-menu in the same position?
<style type="text/css">
.menutitle{
cursor:hand;
margin: 2 0 5 4;
background-color:#D4D0C8;
color:#000000;
width:130px;
height: 17px;
text-align:center;
font-weight:bold;
font-size: 8pt;
border: 1px solid #000000;
font-family: arial, verdana, helvetica, sans;
}
.submenu{
margin-bottom: 0.5em;
position:absolute;
}
</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
***********************************************/
if (document.getElementById){ //DynamicDrive.com change
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"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>
</head>
<body marginwidth=0 marginheight=0 topmargin="4">
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%" height="100%" bordercolor="#000080">
<tr><td>
<div align="center">
<table cellpadding="0" width="796" border="1">
<tr style="padding-top:0px;">
<td height="418" valign="top">
<div id="masterdiv">
<table border="0" cellpadding="0" style="border-collapse: collapse">
<tr>
<td width="140" valign="top">
<div class="menutitle" onclick="SwitchMenu('sub1')">Button 1</div>
<span class="submenu" id="sub1">
- <a href="new.htm">What's New</a><br>
- <a href="hot.htm">What's hot</a><br>
- <a href="revised.htm">Revised Scripts</a><br>
- <a href="morezone/">More Zone</a>
</span>
</td>
<td width="140" valign="top">
<div class="menutitle" onclick="SwitchMenu('sub2')">Button 2</div>
<span class="submenu" id="sub2">
- <a href="notice.htm">Usage Terms</a><br>
- <a href="faqs.htm">DHTML FAQs</a><br>
- <a href="help.htm">Scripts FAQs</a>
</span>
</td>
</tr>
</table>
</div>
<div style="padding-top:45px;" align="center">
<table border="1" width="95%" bordercolor="#808080" cellpadding="0" style="border-collapse: collapse">
<tr class="regtext"><td><b>123123123</b></td></tr>
<tr class="regtext"><td height="10"></td></tr>
<tr class="boldtext"><td style="padding-left:5px;" height="20">123123123</td></tr>
<tr class="boldtext"><td style="padding-left:5px;" height="20">123123123</td></tr>
<tr class="boldtext"><td style="padding-left:5px;" height="20">123123123</td></tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks