View Full Version : Please help with Switch Menu

08-04-2006, 08:21 PM
1) Script Title:
Switch menu script

2) Script URL (on DD):

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">

margin: 2 0 5 4;
height: 17px;
font-size: 8pt;
border: 1px solid #000000;
font-family: arial, verdana, helvetica, sans;

margin-bottom: 0.5em;


<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')

function SwitchMenu(obj){
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";
el.style.display = "none";


<body marginwidth=0 marginheight=0 topmargin="4">

<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%" height="100%" bordercolor="#000080">

<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">
<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>

<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>



<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>




08-04-2006, 08:57 PM
Just use this script instead:


08-08-2006, 03:09 PM
thanks for your suggestion but I do not want to use the other script. i would really appreciate help with the question that I asked.

08-08-2006, 04:25 PM
Don't be so stubborn, if another script will do the job, use it. Also, please do not double post.

08-10-2006, 03:35 PM
> Don't be so stubborn...

With all due respect, what kind of response is that? The name of this forum is Dynamic Drive scripts help.

Why not just respond with "Hey, if you can't figure it out yourself, don't use it!"

Also, sorry about the double-posting but was hoping for a better response.

08-10-2006, 05:35 PM
Well, forget about the 'don't be so stubborn' part then. The real help was contained in this part of my post:

if another script will do the job, use it

08-10-2006, 08:38 PM
shouldn't using:


do the trick?

08-10-2006, 09:54 PM
shouldn't using:


do the trick?

That won't work in FF. Also, if you are having a problem with your layout so extreme that it requires the above to fix it, you need to redesign your layout. However, generally whatever was 'put right' when the page originally loaded, can be 'put right' again onresize, it just takes a little thought to see what needs to be measured and what needs to be adjusted according to that measurement's value, a full page reload is rarely needed. Still, if one can avoid messing with the onresize event by using a different but similar script, that is the way to go.

08-12-2006, 04:29 AM
That won't work in FF.

good point. but the code above shouldn't have the problem described in FF. onresize should be a quick fix for IE.

08-12-2006, 06:51 AM
good point. but the code above shouldn't have the problem described in FF. onresize should be a quick fix for IE.

Absolute positioning used to arbitrarily place items on a page in reference to the window's edges will often cause items to appear in unexpected places when any browser is resized, especially if left, top and/or values of dimensions of other elements on the page are in percentage units. In the case of element sizes, this is even likely with absolute positioning in relation to an element. Absolute positioning (outside a suitable container) is in relation to the browser window. To avoid this, its use should generally be limited to within relatively positioned elements of fixed dimensions.