Menu bouncing

LindaO · Post by **LindaO** » Mon Mar 20, 2006 6:25 pm

Whenever an item is selected in the menu it causes the content below the menu to bounce. It looks like the menu loading causes this. Does anyone know how to fix this problem? It is on our intranet so I can't provide a link.

Thanks

vikenk · Post by **vikenk** » Mon Mar 20, 2006 6:33 pm

Hi,

Can you give us a bit more information? For instance, it'll help to know if it happens in all browsers or just one type of browser.

Also, although you cannot provide a link, it'll help if you could cut and paste your menu_data.js file and/or some html.

I'm not sure what you mean about the "content below it to bounce". Do you mean that the content moves down the page to make room for the menu?

Also, is your menu in a table?

Just a little more info would be great for us to help you, which we'd be glad to do! :>)

Migru · Post by **Migru** » Mon Mar 20, 2006 6:38 pm

Hi
looks like not properly installed in the table.

If so (it is in a table) please see:

http://milonic.com/tablemenu.php

Michael

LindaO · Post by **LindaO** » Mon Mar 20, 2006 6:43 pm

I thought I would quickly answer a couple of your questions. It looks like the content is moving down for the menu to load. I just tested it using Netscape and it doesn't bounce, but the menu doesn't react or look the same in Netscape. In netscape there is no drop shadow and the menu just pops in. In IE it looks like it kind of slowy loads and there is a drop shadow.

Migru · Post by **Migru** » Mon Mar 20, 2006 6:50 pm

The "drop shadow" is visualized in IE only, not in any other browser. So this is nothing unusual.

Michael

LindaO · Post by **LindaO** » Mon Mar 20, 2006 7:00 pm

<body>


<table cellpadding="0" cellspacing="0" border="0" width="760" height="68">
<tr valign="top">
<td width="110" class="bbg" height="46">
<img border="0" src="http://www.crossville-connections.com/i ... /logo2.jpg" width="287" height="40"></td>
<td width="650" class="mbbg" align="right" height="46">
<table align="right" cellspacing="0" cellpadding="0" border="0" height="29">
<tr class="cty-tou">
<td class="upper-masthead-corner" width="17" rowspan="2" style="background-image: url('http://www.crossville-connections.com/i ... av-cnr.gif')" height="18"><a href="#main">
<td align="left" height="17">
<table align="left" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><span class="spacer">  <font color="#FFFFFF">  </font></span><font color="#FFFFFF"><b>Home</b></font></td>
<td class="upper-masthead-divider" width="29" style="background-image: url('http://www.crossville-connections.com/i ... ivider.gif')">    </td>
<td align="left"><b>
<font color="#FFFFFF">Signoff</font></a></b></td>
</tr>
</table>
</td>
<td width="40" height="17"></td>
</tr>
<tr>
<td colspan="2" height="1" class="cty-tou-border">
<img width="1" height="1" alt="" src="c.gif" /></td>
</tr>
<tr>
<td colspan="3" height="1"><img width="1" src="c.gif" height="8" alt="" /></td>
</tr>
<tr>
<td height="13"></td>
<td colspan="2" align="center" height="13">
</form>
<font color="#FFFFFF"><b>Inventory Management</b></font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" class="blbg" height="22" style="border-color: #FFFFFF; background-color: #FFFFFF">
<table width="760" cellspacing="0" cellpadding="0" border="0" height="9">
<tr>
<td height="9">
<table cellspacing="0" cellpadding="0" border="0" width="762">
<tr>
<td width="762">
<div class=milonic style="width: 756; height: 14">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="81%">
<tr>
<td width="100%"> <SCRIPT language=JavaScript src="../inv/milonic_src.js" type=text/javascript></SCRIPT>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=../inv/mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=../inv/mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="../inv/menu_data.js"></script></td>
</tr>
</table>
</td>

Migru · Post by **Migru** » Mon Mar 20, 2006 7:04 pm

Hi

exactly what I said:

PLEASE, SEE:

http://milonic.com/tablemenu.php

and you should be able to do it as suggested.

Michael

vikenk · Post by **vikenk** » Mon Mar 20, 2006 7:06 pm

[quote="LindaO"]I thought I would quickly answer a couple of your questions. It looks like the content is moving down for the menu to load. [quote]

Is this happening only during the inital page loading of the menu, or does it happen every time a submenu appears?

The menu will not look the same in Netscape/Firefox because, as Michael pointed out, they do not support the drop shadow and may render the html differently.

If it's only happening on initial page load, and the menu is in a table, then what could be happening is that the rest of the content of the site is filling in before the menu so, when the menu comes in, the content pushes down to make room for it.

One way to resolve this is to make your table-cell height a fixed height in pixels (equal to the height of your menu) so the browser automatically reserves that amount of space for the menu and would elimiate the hopping effect.

Of course, I'm assuming that you're using the menu in a table and that it only happens during the initial menu load.

LindaO · Post by **LindaO** » Mon Mar 20, 2006 7:07 pm

Thanks Michael I will try it.

vikenk · Post by **vikenk** » Mon Mar 20, 2006 7:09 pm

Wow...you both wrote two replies while I was busy typing mine :>)

LindaO · Post by **LindaO** » Mon Mar 20, 2006 7:10 pm

It happens whenever the page is reloaded. We have a drop down selection thing on the page and when ever they choose an item the page reloads and that causes the bouncing effect.

LindaO · Post by **LindaO** » Mon Mar 20, 2006 7:17 pm

Thanks guys for your quick responses and help.

Vikenk I tried what you said and it fixed it. Thank you so much.

You guys are great!

vikenk · Post by **vikenk** » Mon Mar 20, 2006 7:23 pm

You're welcome, LindaO.

I assume, though, that you corrected the menu/table implementation as Michael suggested?

LindaO · Post by **LindaO** » Mon Mar 20, 2006 7:34 pm

No I didn't, it worked just by adjusting the cell height.

vikenk · Post by **vikenk** » Mon Mar 20, 2006 7:40 pm

I'm glad it worked for you, but you should correct the menu implementation in the table. Someday, it may cause a different headache for you if not implemented correctly in the table.

Also, the menu will load much faster if you place the script files as the first item after the opening <body> tag, as opposed to near the bottom, as you currently have it.

LindaO · Post by **LindaO** » Mon Mar 20, 2006 7:42 pm

Ok I will correct it. Thanks