top offset of submenus from main menus

ssalter · Post by **ssalter** » Wed Sep 01, 2004 5:29 pm

I am having a problem with the placement of the submenus that appear when a mouseover event occurs on a main menu item. This is an intranet site so I can't post the url. The submenus appear a couple of inches down from the main menus. What value determines where the submenus appear below the main level menus?

UPDATE: this is a horizontal menu. When I mouseover a submenu item that has a menu associated with it, its submenu appears very low as well.

UPDATE 2: I downloaded and am using 5.44

Note: I also have this wrapped in a <div> which is probably my problem. How to work around it?

The menu is in the div named #headerbot. I am including menu_data2.js which is the menu code, part of which I show in this post.

here is my page code:

Code: Select all

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>absolute, fluid, dhtml positioning</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="x_core.js"></script>
<script type="text/javascript" src="x_event.js"></script>
<script type="text/javascript" src="index.js"></script>
<script language=JavaScript src="/milonic/milonic_src.js" type=text/javascript></script>	
<script	language=JavaScript src="/milonic/mmenudom.js"></script>
<script type="text/javascript" src="quote.js"></script>

</head>
<body>

<div id="headertop"><table class="header" border=0 cellspacing=0 cellpadding=0 width="100%"><tr><td  width="10%">&nbsp; &nbsp;<a href="#"  class="button"><a class="button" href="default.asp">Home</a></td><td width="10%"><a href="#"  class="button">Phone List</a></td><td width="10%"><a href="#"  class="button">ITS Help</a></td><td align="right"><a href="javascript:showm();"  class="button">My IUHC</a> &nbsp; &nbsp;</td></tr></table></div>
<div id="header"></div>
<div id="headerbot"><script type="text/javascript" src="menu_data2.js"></div>

<div id="if" style="z-index:-100;">
<iframe src="mainx.asp"  width="100%" height="100%" id="ifr" name="ifr" scrolling="auto" frameborder=0></iframe>
</div>

<div id="if2" style="z-index:-100;">
<iframe src="userpanelx.asp" width="100%" height="100%" id="ifr2" name="ifr2" scrolling="auto" frameborder=0></iframe>
</div>

<div id="footer"><table class="header" border=0 cellspacing=0 cellpadding=0 width="100%"><tr><td>FOOTER</td></tr></table></div>
</body>

</html>

and #headerbot is defined in my css file as:

Code: Select all

#headerbot{
  color:#000; background:#36538F;
  margin:0; padding:0;
  position:absolute;
  visibility:hidden;
  margin:0;
  background-image:url("bluebord.jpg");
  background-repeat:repeat-x;
}

Note: I turn on the visibility of this layer on upon page load.

The menu definitions:

Code: Select all

<SCRIPT language=JavaScript>
_menuCloseDelay=50           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=50            // The time delay before menus open on mouse over
_subOffsetTop=4             // Sub menu top offset
_subOffsetLeft=-10            // Sub menu left offset
// top level menu style
with(mainmenu=new mm_style()){
onborder="1px inset #ccc";
offborder="1px outset #ccc";
onbgcolor="#243E74";
oncolor="#ffffff";
offbgcolor="transparent";
offcolor="#ffffff";
padding=0;
fontsize="80%";
fontfamily="Verdana, Tahoma, Arial";
itemwidth="100";
align="center";

}
//submenus style
with(menuStyle=new mm_style()){
menuheight=10;
onbgcolor="#A9AFC4";
oncolor="#000000";
offbgcolor="#BBBFCB";
offcolor="#000000";
bordercolor="#296488";
borderstyle="solid";
borderwidth=0;
padding=5;
fontsize="94%";
fontstyle="bold";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#B2B7CB";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="arrow.gif";
subimagepadding="9";
overfilter="Fade(duration=0.2);Alpha(opacity=98);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="Fade(duration=0.3);";
overflow="scroll";
}

//----------------------------------TOP MENU DEFINITION
with(milonic=new menuname("Main Menu")){
style=mainmenu;
alwaysvisible=1;
orientation="horizontal";
aI("text=Departments;showmenu=departments;");
aI("text=Resources;showmenu=resources;");
aI("text=WebTools;showmenu=webtools;");
}
.....and so on

kevin3442 · Post by **kevin3442** » Wed Sep 01, 2004 9:53 pm

Hi,

ssalter wrote:...Note: I also have this wrapped in a <div> which is probably my problem. How to work around it?

You're probably correct that this is likely to be at least part of the problem. How you might work around it depends on why you put it in a <div>. Why?

Just to be sure that there aren't other issues... The problem involves submenus opening, but you haven't posted any of the code that defnies your submenus (just a "Main Menu"). Could you please post all of menu_data2.js?

Cheers,

Kevin

ssalter · Post by **ssalter** » Wed Sep 01, 2004 10:10 pm

kevin3442 wrote:Hi,

ssalter wrote:...Note: I also have this wrapped in a <div> which is probably my problem. How to work around it?
You're probably correct that this is likely to be at least part of the problem. How you might work around it depends on why you put it in a <div>. Why?

Because I am positioning my layout dynamically according to the clientHeight/clientWidth. The div that encapulates the menu had a background-image that stretches according to the screen res.

I believe I worked around it by simply redesigning things. Since I always want my menu to start at a specific left/top regardless of screen resolution, I can just absolutely position it outside of the <div> but including it outside of the <div>

Thanks!

kevin3442 · Post by **kevin3442** » Wed Sep 01, 2004 10:46 pm

Glad you worked it out. There are built in was to specify the verall menu width; e.g. as a percentage of the available width. You can also change this dynamically. Holler if you're interested.

Kevin

Milonic JavaScript Menu

top offset of submenus from main menus

top offset of submenus from main menus

Re: top offset of submenus from main menus

Re: top offset of submenus from main menus