PDA

View Full Version : Switch Menu Positioning



yourbudweiser
08-02-2006, 02:35 PM
1) Script Title:
Switch menu script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/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>

mburt
08-02-2006, 02:47 PM
That's one of the downsides of using position:absolute

Just hope that your user has the same screen resolution :)

yourbudweiser
08-02-2006, 07:47 PM
thanks for replying mburt, do you have any suggestions on how to accomplish what I am trying to do?

mburt
08-02-2006, 08:13 PM
Well, dropdown menus may look fancy and everything :), but sometimes, they can't serve their purpose. I suggest using basic links, or some type of menu without using position:absolute.. But: You may come across a way to keep the menu positioned properly, but I wouldn't know how.