Menu Items won't stay positioned absolutely where I say so

Poster: Akinola
Dated: Tuesday October 2 2007 - 21:34:33 BST

I recently looked into Milonic's absolute positioning menu, and there is something I need to know.

Below is my menudata.js code:

fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

/*orientation="horizontal";*/ /*code to display the submenus horizontally*/

horizontalMenuDelay="1";

/*below is the code for the sub-meuns--why I did the reverse of what I thought is
beyone my understanding*/
with(vertStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="arial, tahoma";
fontsize="78%";
fontstyle="normal";
headerbgcolor="#ffdf32";
headerborder=1;
headercolor="#000099";
imagepadding=3;
offbgcolor="transparent";
offcolor="#001d50";
/*onbgcolor="#FEFAD2";*/
onborder="1px solid #999999";
oncolor="#a50000";
outfilter="randomdissolve(duration=0.2)";
overfilter="Fade(duration=0.1);Alpha(opacity=95);Shadow(color=#777777', Direction=135, Strength=3)";
padding=3;
/*pagebgcolor="001d50";*/
/*pagecolor="#001d50";*/ /*color of the item of the particular page you're on: drexel blue on off-white background*/
separatoralign="left";
separatorcolor="#999999";
separatorpadding=1;
separatorwidth="85%";
valign="left";
menubgcolor="#F5F5F5"; /*the background color of the drop-down menu*/
}

/*below is code for the stule of the menu itself*/
with(horizStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="arial, tahoma";
fontsize="78%";
fontstyle="normal";
headerbgcolor="#ffdf32";
headerborder=1;
headercolor="#000099";
offbgcolor="#001d50";/*this is the background of the menu, currently DREXEL BLUE*/
offcolor="#ffdf32"; /*this is the foreground text, currently DREXEL YELLOW*/
onbgcolor="#001d50"; /*this is the rollover bar color, currently DREXEL BLUE*/
onborder="1px solid #999999"; /*this is the thickness and color of the outer bar of the menu, currently GREY*/
oncolor="#ffdf32"; /*don't touch-this is the color of the text when the menu is rolled-over, current3y drexel yellow*/
padding=5; /*how close the items are together. 0= really close.*/
pagebgcolor="#001d50";
pagecolor="#ffdf32";
valign="left";
separatoralign="center";
separatorcolor="#001d50"; /*color of the sub-menu bar text, currently DREXEL BLUE*/
separatorwidth="85%";
}



with(milonic=new menuname("menu1")){
style=vertStyle;
divides=1;
aI("text=Overview;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Overview/Overview.aspx;");
aI("text=Administration;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Admin/Admin.aspx;");
aI("text=Governance;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Gov/Gov.aspx;");
aI("text=Strategic Plan;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Plan/Plan.aspx;");
aI("text=Annual Report;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Report/Report.aspx");
aI("text=Centers of Excellence;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/Centers.aspx;");
aI("text=Molecular Medicine;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Grad/Grad.aspx");
aI("text=Scholar Programs;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Scholar/Scholar.aspx;");
aI("text=Research Seminars;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Seminar/Seminar.aspx;");
aI("text=Scientific Workshops;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Workshop/Workshop.aspx;");
aI("text=Newsletters;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Newsletters/Newsletters.aspx;");
aI("text=Research Highlights;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Archive/Archive.aspx;");
aI("text=Facilities;url=");
aI("text=Members;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/Member.aspx");
aI("text=Contact Us;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Contact/Contact.aspx");
aI("text=IMMID Home;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/index2.aspx");
}


with(milonic=new menuname("menu2")){
margin=3;
style=vertStyle;
divides=2;
aI("text= Immunology and Vaccine Science;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/IVS/IVS.aspx;");
aI("text= Bacterial Pathogenesis and Biodefense ;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/BPB/BPB.aspx;");
aI("text= Molecular Therapeutics and Resistance;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/MTR/MTR.aspx;");
aI("text= Molecular Virology and Neuroimmunology;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/MVN/MVN.aspx");
aI("text= Pediatric Cancer and Infectious Disease ;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/PCID/PCID.aspx;");
aI("text= Cancer Biology;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/CB/CB.aspx;");
aI("text= Molecular Parasitology;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/MP/MP.aspx;");
aI("text= Sexually Transmitted Disease;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/STD/STD.aspx;");

aI("text= Aging and Degenerative Disease;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/ADD/ADD.aspx;");
aI("text= Clinical and Translational Research;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/CTR/CTR.aspx;");
aI("text= Immunogenetics and Inflammatory Disease;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/IID/IID.aspx;");
aI("text= Cell and Protein Science;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/CPS/CPS.aspx");
aI("text= Epidemiology and Biomedical Informatics;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/BI/BI.aspx;");
aI("text= Molecular and Functional Genomics;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/MFG/MFG.aspx;");
aI("text= Scientific Administration and Training;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/SAT/SAT.aspx;");
aI("text= Scientific Communication and Outreach;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Centers/SCO/SCO.aspx;");


}


with(milonic=new menuname("menu3")){
margin=3;
style=vertStyle;
divides=3;
aI("text=Carol Artlett, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-artlett.aspx;");
aI("text=Lawrence W. Bergman, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-bergman.aspx;");
aI("text=Elizabeth Blankenhorn, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-blankenhorn.aspx;");
aI("text=Tim Block, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-block.aspx;");

aI("text=Alina Boesteanu, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-boesteanu.aspx;");
aI("text=Michael Bouchard, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-bouchard.aspx;");
aI("text=Farrel Joel Buchinsky, M.D., F.A.C.S.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-buchinsky.aspx;");
aI("text=James Burns, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-burns.aspx;");

aI("text=Jane Clifford, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-clifford.aspx;");
aI("text=Simon Cocklin, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-cocklin.aspx;");
aI("text=Thomas Edlind, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-edlind.aspx;");
aI("text=Garth D. Ehrlich, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-ehrlich.aspx;");

aI("text=Itzhak Fisher, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-fisher.aspx;");
aI("text=James England, M.D., Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-england.aspx;");
aI("text=Marla Gold, M.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-gold.aspx;");
aI("text=John Harvey, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-harvey.aspx;");

aI("text=Mary K. Howett, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-howett.aspx;");
aI("text=Ying-Hsiu Su, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-su.aspx;");
aI("text=Fen Z. Hu, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-hu.aspx;");

aI("text=Jeffrey Jacobson, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-jacobson.aspx;");
aI("text=Pooja Jain, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-jain.aspx;");
aI("text=Stephen Jennings, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-jennings.aspx;");
aI("text=Sandeep Kathju, M.D., Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-kathju.aspx;");

aI("text=Peter Katsikis, M.D., Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-katsikis.aspx;");
aI("text=Zafar Khan, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-khan.aspx;");
aI("text=Evelyn Kilareski, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-kilareski.aspx;");

aI("text=Fred Krebs, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-krebs.aspx;");
aI("text=Kirsten Larson, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-larson.aspx;");
aI("text=Peter Lelkes, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-lelkes.aspx;");
aI("text=Patrick J. Loll, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-loll.aspx;");

aI("text=Xuanyong Lu, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-lu.aspx;");
aI("text=Julio Martin-Garcia, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-martingarcia.aspx;");
aI("text=Anand Mehta, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-mehta.aspx;");
aI("text=Olimpia Meucci, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-meucci.aspx;");

aI("text=Yvonne Mueller, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-mueller.aspx;");
aI("text=Donna Murasko, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-murasko.aspx;");
aI("text=Sonia Navas-Martin, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-navasmartin.aspx;");
aI("text=Michael Nonnemacher, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-nonnemacher.aspx;");

aI("text=Pamela Norton, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-norton.aspx;");
aI("text=Banu Onaral, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-onaral.aspx;");
aI("text=James Christopher Post, M.D., Ph.D., F.A.C.S.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-post.aspx;");
aI("text=Richard Rest, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-rest.aspx;");

aI("text=Donna Russo, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-russo.aspx;");
aI("text=Laura Steel, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-steel.aspx;");
aI("text=Luanne Hall-Stoodley, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-hallstoodley.aspx;");
aI("text=Paul Stoodley, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-stoodley.aspx;");

aI("text=Akhil Vaidya, Ph.D.;url=;http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-vaidya.aspx");
aI("text=Brian Wigdahl, Ph.D.;url=http://drexelmed.edu/portals/0/microimmuno/immidhd/Member/ri-wigdahl.aspx;");
}


with(milonic=new menuname("menu4")){
margin=3;
style=vertStyle;
divides=4;
}

with(milonic=new menuname("menu5")){
margin=3;
style=vertStyle;
divides=2
}

with(milonic=new menuname("menu6")){
margin=3;
style=vertStyle;
divides=4;
}



drawMenus();

the other relevant .js files havent changed at all, but the menus won't open where I want them to: what I want ultimately is:

in the center-positioned absolute positioning menu that's on Milonic's website, all the menu items open up at the leftmost part of the subject it's under.

-------------------------------
MENU|OPTIONS|HELP|SUPPORT|
-------------------------------
if you moused over "OPTIONS", the menu should display it's contents--the leftmost side of the drop-down menu aligns with the left border of the "OPTIONS" graphic, going downwards. it should be the same (optimally) if the menu items were arranged in a box, rather than a horizontal line:

--------------
MENU|OPTIONS|
HELP|SUPPORT|
--------------

Can anyone help? It would be great.

Re: Menu Items won't stay positioned absolutely where I say so

Poster: Ruth
Dated: Saturday October 6 2007 - 5:20:11 BST

Hi,

I'd be glad to test it, but I really need the page so I have all relevant files. Just having the menu file doesn't tell me how the page is set up and I don't have the css if there is any, nor any of the html on the page. If it is absolutely impossible to give a link then I'll need you to post the html and the css so I can make up all that stuff to test.

Ruth

Re: Menu Items won't stay positioned absolutely where I say so

Poster: Akinola
Dated: Thursday October 11 2007 - 18:13:53 BST

Ok, I'll post the necessary files here.

Re: Menu Items won't stay positioned absolutely where I say so

Poster: Akinola
Dated: Thursday October 11 2007 - 18:23:39 BST

HTML:

<html>
<head>
<title>Multi-column menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
BODY{
FONT-FAMILY:verdana;
font-size:18px;
background-color:#001d50;
}

.backG {
FONT-FAMILY:verdana;
background-color:#93c39b;
color:#ffffff;
border-bottom:#538c4d 2px solid;
font-size:18px;
}
td.form1
{
FONT-FAMILY:verdana;
background:#eaeaea;
font-size:18px;
}
a {
font-size: 1pt;
}
a:lin
k {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {color: #FFFFFF}
body,td,th {
color: #FFFFFF;
}
</style>

</head>

<body>


<!-- ***** This is the section of code you need to paste into your web pages ***** -->
<script type="text/javascript" src="milonic_src.js"></script>
<script type="text/javascript" src="mmenudom.js"></script>
<!-- The next file contains your menu data, links and menu structure etc -->
<script type="text/javascript" src="menu_data.js"></script>
<!-- **** JavaScript Menu HTML Code --></td>

<table border=0 width=100%>


<tr>

<td align=center style="font-size:125%">
<div align="right">
<script>
with(milonic=new menuname("Main Menu")){
style=horizStyle;
divides=2;
orientation="vertical";
alwaysvisible=1;
overfilter="";
position="relative";
aI("text=Institute Navigation;showmenu=menu1;");
aI("text=Centers of Excellence;showmenu=menu2;");
aI("text=Members;showmenu=menu3;");
aI("text=Facilities;showmenu=menu4;");
aI("text=Molecular Medicine;showmenu=menu5;");
aI("text=Contact Us;showmenu=menu6;");
}
drawMenus();
</script>
</div></td>
</tr>
</table>

</body>
</html>

Re: Menu Items won't stay positioned absolutely where I say so

Poster: Ruth
Dated: Thursday October 11 2007 - 22:34:56 BST

Hi,

Actually, given your layout the menu is acting as it should. Since you have the main menu set as vertical in orientation, the submenus open at the left of the item, just like any vertical menu.

Now, you can get what you want. Set the main menu as follows



Since the orientation is now set to horizontal, the submenus open below. This will also cause it to open all the way at the bottom of the full menu, that is the bottom of the last items. This means if you mouse down to get to the submenu, it will close because you have gone over another main menu item. So, to fix that you can do one of two things.

1. play with the menuOpenDelay and the menuCloseDelay to get the menus to stay opened longer so if you mouseover the item below the first one it won't open the next submenu unless you stay on it a bit. That I don't think is the best solution

2. set the offsets in each submenu, i.e. top="offset=-x"; where x is the number of pixels you need to have the submenu move up. Now, this is the better solution, however for this to work best your main menu should be made up of images. Since images are a fixed size your offset amounts will always be the same no matter what the resolution...I think

Hope this helps.

Ruth

Re: Menu Items won't stay positioned absolutely where I say so

Poster: Akinola
Dated: Tuesday October 16 2007 - 20:25:21 BST

Thanks so much for your input. Now I see where I went wrong and I feel stupid,

But it works the way we need it. Your help was greatly appreciated.