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

drop-down menu appearing under the page text and images


Poster: juliaw
Dated: Friday November 17 2006 - 14:16:01 GMT

I have a menu where the drop-down part is appearing under the text and images of the page.

this is the style:

with(TestStyle=new mm_style()){
styleid=2;
fontfamily="comic sans ms,verdana,helvetica";
fontsize="12px";
fontstyle="normal";
fontweight="normal";
offbgcolor="#000000";
offcolor="#FFFFFF";
onbgcolor="red";
oncolor="#000000";
padding=3;
separatorcolor="red";
separatorsize=1;
bgimage="images/j77button.gif";
overbgimage="images/j77button_on.gif";
}
Please can anyone help?

Thanks

Julia


Poster: Ruth
Dated: Friday November 17 2006 - 14:23:15 GMT

Hello,

Please, we need a page to see what's happening. There isn't any way to tell from a style post because the issue you address has nothing to do with style it has to do with your page and how the actual menu is functioning.

In the years I've been helping here I've never had a question that says the menu is going behind images when it opens so we have nothing to base a response on with regard the issue and we'd need to see the page to figure it out.

Thanks

Ruth


Poster: juliaw
Dated: Friday November 17 2006 - 14:45:13 GMT

Thanks for you prompt reply.
This page is on my laptop at the moment so I can't direct you to a site, the only way would be sending you an image of the page fom a screen print in word or something - would that be acceptable?

Julia


Poster: Ruth
Dated: Friday November 17 2006 - 14:49:58 GMT

Hi,

An image doesn't help, we need to see the coding. You could paste all the necessary info here and we could try and make a page. We'd need the page html coding, any css file coding, and all the menu_data.js file coding.

Ruth


Poster: juliaw
Dated: Friday November 17 2006 - 20:30:04 GMT

Here goes, it's long!

As a side I am also having to put in very large off-sets in the menu_data.js file, so if you could help me with that also that would be great!!

<html >

<head>
<title>Jubilee77 YFC home page</title>
<link rel="stylesheet" href="style/j77Stylediv1.css" />

</head>

<body>
<script type="text/javascript" src="milonic_src.js"></script>
<noscript><a href="http://www.milonic.com/">JavaScript Menus and DHTML Menus Powered by Milonic</a></noscript>
<script type="text/javascript">
<!--
if(ns4)_d.write("<script language=JavaScript src=mmenuns4.js><\/script>");
else _d.write("<script language=JavaScript src=mmenudom.js><\/script>");
-->
</script>
<div id="divcontent" >
<div id="leftcolumn" >
<div id="logo">
<div id="image-wrapper" >
<img src="images/mediumlogo.gif" alt="" border="0" width="140" height="218" />
<div id="menu">
<!-- --> <script language="JavaScript" src="source/j77menu_data.js" type="text/javascript"></script>
</div>
</div>
</div>

</div>
<div class="rightcolumn" >
<img src="images/Name.gif" />
<div id="primarycontent">
<br />
<h1> Welcome to the Jubilee 77 YFC home page</h1>
<br />
<p class="para"> We are a boys football club situated in West Fareham, our home ground being Henry Cort School,
We play in the Portsmouth Youth football league which plays Sundays, we have teams for uhder9's right up to under 16's
each year trains during the week and if you work hard you will be picked for the team on sunday!
</p>
<p class="para2">
<img alt="Jubilee77 Logo" src="images/J77Logo_GreySmall.gif" width="22" border="0">
<b> Want to join?</b> More players are required at most age groups Come along to a training session. To find out where the training sessions are email club __at__ jubilee77.com or telephone 023 92xx xxxx and leave a message stating: Name, Age Group and a number we can call you back on.
</p>
<p class="para2">
<img alt="Jubilee77 Logo" src="images/J77Logo_GreySmall.gif" width="22" border="0">
<b>Jubilee 77 Youth football Club</b>
was first set up in 1977, the Silver Jubilee year. It has grown from x clubs to 16 youth clubs plus some Adult indoor football teams. <a href="#">more...</a>
</p>


</div>
<div id="secondarycontent">
<div align="right">
<img src="images/footballphoto2.jpg" alt="" /> </div>

<p class="stoppress">Stop Press</p>

<!-- <p><?php echo $display_block; ?> </p>-->

<div id="pyfllogo"> <img alt="pyfl Logo" src="images/pyfllogo.gif" width="70" border="0"></div>
<div id="falogo"> <img alt="pyfl Logo" src="images/FACrestMedium.jpg" width="40" border="0"> </div>
</div>
</div>
</div>




now here is my .css file:

body {
text-align: center;
background: #CCCCCC;
background-color : #CCCCCC;
}
p {
font-family: Comic Sans MS,Arial Black,Aharoni, sans-serif;
font-size:10pt;
margin:10px;

}
h1{font-family: Comic Sans MS,Arial Black,Aharoni, sans-serif;
font-size:13pt;
color:blue;
text-align: center;
top :10;
}

#divcontent{
margin: 0 auto; background-color:white; width: 804px; text-align: left;
}
#leftcolumn {
position: relative;
left:0px;
top:0px;
width:200px;

border:0;
float:left;
height:600px;
background: url(../images/column.gif);
}
.rightcolumn {
position: relative;
left:0px;
top:0px;
width:604px;

border:0;
float:left;

}


#logo {
position: relative;
left:0px;
top:0px;
width:200px;
background:red;
border:0;
height: 600px
}
#image-wrapper {
top: 7px;
left: 30px;
position: relative;
}

#menu{
top: 10px;
position: relative;
z-index:+2;

}
#primarycontent{
position: relative;
left:0px;
top:0px;
width:400px;
z-index:-1;
border:0;
float:left;
}
#secondarycontent{
position: relative;
left:0px;
top:0px;
width:204px;
background:#fff;
border:0;
float:left;

}
#paraheader
{font-size:16pt;
text-align="center" ;
color:blue;
font-family: Comic Sans MS, Arial Black, Aharoni,sans-serif;
}
#para{font-size:12pt;
text-align="left" ;
color:black;
font-family: Comic Sans MS, Arial , Aharoni,sans-serif;
margin: 5px;
z-index:-1;
}
#para2{ position: relative;
font-family: Comic Sans MS, Arial Black, Aharoni,sans-serif;

font-size:10pt;
z-index:-1;
}

.stoppress{background-color:red;
vertical-align: top;
text-align: center;
position: relative;
top:0px;
width:204px;
border:0;
padding:0;
margin:0;
}



}
#pyfllogo{ position: relative;
top:300px;
left:20px;
float:left ;
}
#falogo{ position: relative;
top:310px;
float:left ;
left:60px;
}




now here is my j77menu_data.js



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;

with(menuStyle=new mm_style()){
styleid=2;
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";

offcolor="#FFFFFF";

oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="white";
separatorsize=1;
subimage="images/arrow.gif";
subimagepadding=2;
bgimage="images/j77button.gif";
overbgimage="images/j77button_on.gif";
}




with(background=new mm_style()){
bgimage="images/j77button.gif";
fontfamily="comic sans ms,verdana,helvetica";
borderstyle="solid";
fontfamily="Helvetica";
fontsize="75%";
fontstyle="italic";
fontweight="bold";
image="images/transparent.gif";
imagepadding=4;
itemheight=25;
itemwidth=170;
offcolor="#333300";
oncolor="#ffffff";
overbgimage="images/j77button_on.gif";
separatorcolor="transparent";
separatorsize=10;
subimage="images/arrow.gif";
}




with(TestStyle=new mm_style()){
styleid=2;
fontfamily="comic sans ms,verdana,helvetica";
fontsize="12px";
fontstyle="normal";
fontweight="normal";
offbgcolor="#000000";
offcolor="#FFFFFF";
onbgcolor="red";
oncolor="#000000";
padding=3;
separatorcolor="red";
separatorsize=1;
bgimage="images/j77button.gif";
overbgimage="images/j77button_on.gif";
}


with(milonic=new menuname("Main Menu")){
screenposition="left";
alwaysvisible=1;
position="relative";
itemwidth=159;
top=50;
orientation="vertical";
style=background;
aI("align=center;text=Home;url=index.php;");
aI("align=center;showmenu=Teams;text=Teams;");
aI("align=center;text=News;url=newslist.php;");
aI("align=center;showmenu=Information;text=Information;");
aI("align=center;text=Forums;url=/phpBB2/index.php;");
aI("align=center;text=Contacts;url=contacts.html;");
}

with(milonic=new menuname("Milonic")){
orientation="horizontal";
style=TestStyle;
top="offset=-5";
aI("align=center;text=Purchasing;url=http://www.milonic.com/cbuy.php;");
aI("align=center;text=Contact Us;url=http://www.milonic.com/contactus.php;");
aI("align=center;text=Newsletter;url=http://www.milonic.com/newsletter.php;");
aI("align=center;;text=FAQ;url=http://www.milonic.com/menufaq.php;");
aI("align=center;;text=Privacy Policy;url=http://www.milonic.com/privacy.php;");
aI("align=center;text=Discussion Forum;url=http://www.milonic.com/forum/;");
}

with(milonic=new menuname("Teams")){
orientation="vertical";
position="absolute";
style=TestStyle;
top="offset=-900";
left="offset=-250";
aI("align=center;text=U8;url=http://www.a-q.co.uk/;");
aI("align=center;text=U9;url=http://www.sms2email.com/;");
aI("align=center;text=U10;url=http://www.sms2email.com/;");
aI("align=centerf;text=U11A;url=http://www.sms2email.com/;");
aI("align=center;text=U11B;url=http://www.sms2email.com/;");
aI("align=center;text=U12;url=http://www.sms2email.com/;");
aI("align=center;text=U13;url=http://www.sms2email.com/;");
aI("align=center;text=U14A;url=http://www.sms2email.com/;");
aI("align=center;showmenu=14Bmenu;text=U14B;");
aI("align=center;text=U15;url=http://www.sms2email.com/;");
aI("align=center;text=U16;url=http://www.softidiom.com/?milonicmenu;");
}


with(milonic=new menuname("14Bmenu")){
orientation="horizontal";
style=TestStyle;
top="offset=-250";
left="offset=-250";
position="absolute";

aI("align=center;text=Fixtures;clickfunction=javascript:window.open('U14CResults.html','mywindow','status=no, toolbar=no, resizable=no, scrollbars=no, location=no, width=500px, height=500px,left=200,top=50,screenX=200,screenY=50');");
aI("align=center;text=News;clickfunction=javascript:window.open('U14BNews.mht','mywindow','status=no, toolbar=no, resizable=no, scrollbars=no, location=no, width=500px, height=500px,left=200,top=50,screenX=200,screenY=50');");
aI("align=center;text=results;clickfunction=javascript:window.open('U14Bfixtures.htm','mywindow','status=no, toolbar=no, resizable=no, scrollbars=no, location=no, width=600px, height=600px,left=200,top=50,screenX=200,screenY=50');");
}

with(milonic=new menuname("Information")){

itemwidth=167;
orientation="horizontal";
style=TestStyle;
top="offset=-250";
left="offset=-250";
aI("align=center;text=Boot Exchange;url=Bootex.html;");
aI("align=center;text=Locations;url=locations.html;");
aI("align=center;text=Events;url=http://www.php.net/;");
}

drawMenus();


Poster: Ruth
Dated: Saturday November 18 2006 - 2:25:04 GMT

Hi,

It's a z-index problem in your divs. The left column is a z-index which puts it 'under' the right one.

You also have a real problem in placing the menu in the div. You cannot put it in there like that.

The left column css is
Code:

#leftcolumn {
position: relative;
left:0px;
top:0px;
width:200px;
border:0;
float:left;
height:600px;
background: url(../images/column.gif);
z-index:1;
}



This is your menu_data, it is now two files. You have to have two files, one which has only the main menu in it and is called in the div, and then the other with the subs which is called with the other program files. I did this but you need to read the info on relative positioned menus at the main site, it refers to table placement but it also applies to divs, any situation in which the menu is placed relatively.

Note the difference in the coding for the two subs in the sub_data file that actually open. Use that setup as you add submenus. You can work on the offsets as you see fit. I removed the left offset from the team one and used openstyle="rtl" which opens the submenu at the right of the main.

Main data file, I've named it embedded_main_data.js
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
itemwidth=159;
orientation="vertical";
style=background;
aI("align=center;text=Home;url=index.php;");
aI("align=center;showmenu=Teams;text=Teams;");
aI("align=center;text=News;url=newslist.php;");
aI("align=center;showmenu=Information;text=Information;");
aI("align=center;text=Forums;url=/phpBB2/index.php;");
aI("align=center;text=Contacts;url=contacts.html;");
}
drawMenus();


The sub_data I've name sub_data.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;

with(menuStyle=new mm_style()){
styleid=2;
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offcolor="#FFFFFF";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="white";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
bgimage="j77button.gif";
overbgimage="j77button_on.gif";
}

with(background=new mm_style()){
bgimage="j77button.gif";
fontfamily="comic sans ms,verdana,helvetica";
borderstyle="solid";
fontfamily="Helvetica";
fontsize="75%";
fontstyle="italic";
fontweight="bold";
image="transparent.gif";
imagepadding=4;
itemheight=25;
itemwidth=170;
offcolor="#333300";
oncolor="#ffffff";
overbgimage="j77button_on.gif";
separatorcolor="transparent";
separatorsize=10;
subimage="arrow.gif";
}

with(TestStyle=new mm_style()){
styleid=2;
fontfamily="comic sans ms,verdana,helvetica";
fontsize="12px";
fontstyle="normal";
fontweight="normal";
offbgcolor="#000000";
offcolor="#FFFFFF";
onbgcolor="red";
oncolor="#000000";
padding=3;
separatorcolor="red";
separatorsize=1;
bgimage="j77button.gif";
overbgimage="j77button_on.gif";
}

with(milonic=new menuname("Milonic")){
orientation="horizontal";
style=TestStyle;
top="offset=-5";
aI("align=center;text=Purchasing;url=http://www.milonic.com/cbuy.php;");
aI("align=center;text=Contact Us;url=http://www.milonic.com/contactus.php;");
aI("align=center;text=Newsletter;url=http://www.milonic.com/newsletter.php;");
aI("align=center;;text=FAQ;url=http://www.milonic.com/menufaq.php;");
aI("align=center;;text=Privacy Policy;url=http://www.milonic.com/privacy.php;");
aI("align=center;text=Discussion Forum;url=http://www.milonic.com/forum/;");
}

with(milonic=new menuname("Teams")){
orientation="vertical";
position="absolute";
style=TestStyle;
openstyle="rtl";

aI("align=center;text=U8;url=http://www.a-q.co.uk/;");
aI("align=center;text=U9;url=http://www.sms2email.com/;");
aI("align=center;text=U10;url=http://www.sms2email.com/;");
aI("align=centerf;text=U11A;url=http://www.sms2email.com/;");
aI("align=center;text=U11B;url=http://www.sms2email.com/;");
aI("align=center;text=U12;url=http://www.sms2email.com/;");
aI("align=center;text=U13;url=http://www.sms2email.com/;");
aI("align=center;text=U14A;url=http://www.sms2email.com/;");
aI("align=center;showmenu=14Bmenu;text=U14B;");
aI("align=center;text=U15;url=http://www.sms2email.com/;");
aI("align=center;text=U16;url=http://www.softidiom.com/?milonicmenu;");
}

with(milonic=new menuname("14Bmenu")){
orientation="horizontal";
style=TestStyle

aI("align=center;text=Fixtures;clickfunction=javascript:window.open('U14CResults.html','mywindow','status=no, toolbar=no, resizable=no, scrollbars=no, location=no, width=500px, height=500px,left=200,top=50,screenX=200,screenY=50');");
aI("align=center;text=News;clickfunction=javascript:window.open('U14BNews.mht','mywindow','status=no, toolbar=no, resizable=no, scrollbars=no, location=no, width=500px, height=500px,left=200,top=50,screenX=200,screenY=50');");
aI("align=center;text=results;clickfunction=javascript:window.open('U14Bfixtures.htm','mywindow','status=no, toolbar=no, resizable=no, scrollbars=no, location=no, width=600px, height=600px,left=200,top=50,screenX=200,screenY=50');");
}

with(milonic=new menuname("Information")){

itemwidth=167;
orientation="horizontal";
style=TestStyle;
aI("align=center;text=Boot Exchange;url=Bootex.html;");
aI("align=center;text=Locations;url=locations.html;");
aI("align=center;text=Events;url=http://www.php.net/;");
}

drawMenus();


You're call for the main menu in that div is this
Code:
<div id="menu"> <script language="JavaScript" src="embedded_main.js" type="text/javascript"></script>
</div>


and your call for your other menu files has this added to them.
Code:
<script type="text/javascript" src="milonic_src.js"></script>
<noscript><a href="http://www.milonic.com/">JavaScript Menus and DHTML Menus Powered by Milonic</a></noscript>
<script type="text/javascript">
<!--
if(ns4)_d.write("<script language=JavaScript src=mmenuns4.js><\/script>");
else _d.write("<script language=JavaScript src=mmenudom.js><\/script>");
-->
</script>
<script language="JavaScript" src="sub_data.js" type="text/javascript"></script>


Ruth


Poster: juliaw
Dated: Saturday November 18 2006 - 8:26:34 GMT

Thanks for your reply - :D
Julia


Poster: juliaw
Dated: Sunday November 19 2006 - 15:03:22 GMT

Thanks for your help - It'sworking now and have read through the information about relative positioning.

Julia