Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:12

top offset of submenus from main menus


Poster: ssalter
Dated: Wednesday September 1 2004 - 17:29:11 BST

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

Re: top offset of submenus from main menus


Poster: kevin3442
Dated: Wednesday September 1 2004 - 21:53:11 BST

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

Re: top offset of submenus from main menus


Poster: ssalter
Dated: Wednesday September 1 2004 - 22:10:19 BST

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!


Poster: kevin3442
Dated: Wednesday September 1 2004 - 22:46:36 BST

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