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

How to open submenu between vertical main menu items?


Poster: db
Dated: Monday August 22 2005 - 2:13:03 BST

I have to remake this flash menu (left): http://www.aquasphereusa.com/home.html
to milonic menu, but I am having hard times with making it look the same as on the web.
1. How can I make the submenu to open between vertical main menu items?
2. How to keep submenu open till I click on some other menu item?
3. How to make spaces between menu items so the backgroung image shows up in between?

So far I managed to set it like this:

with(menuStyle=new mm_style()){
onbgcolor="#CCCCCC";
oncolor="#000000";
offbgcolor="#CCCCCC";
offcolor="#000000";
padding=2;
offborder="1px solid #666666";
onborder="1px solid #666666";
fontsize="11";
fontstyle="normal";
fontweight='bold';
fontfamily="ArialCE, Arial, sans-serif";
pagecolor="white";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
}

with(submenuStyle=new mm_style()){
onbgcolor="#FF6600";
oncolor="#000000";
offbgcolor="#666666";
offcolor="#ffffff";
padding=2;
offborder="1px solid #666666";
onborder="1px solid #666666";
fontsize="11";
fontstyle="normal";
fontfamily="ArialCE, Arial, sans-serif";
pagecolor="white";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
}

with(milonic=new menuname("Main Menu")){
style=menuStyle;
menuwidth=118;
alwaysvisible=1;
position="relative";
orientation="vertical";
align="center";
aI("text=Masky Seal;showmenu=seal;");
aI("text=Masky Seal XP;showmenu=seal_xp;");
aI("text=Masky Seal Kid;showmenu=seal_kid;");
aI("text=Brýle Kaiman;showmenu=kaiman;");
aI("text=Sphera;url=sphera.html;");
aI("text=Sphera JR;url=sphera_jr.html;");
aI("text=Zip Fin;url=zipfin.html;");
aI("text=Šnorchl Aqua FM;showmenu=aqua_fm;");
aI("text=Obleky Aqua Skin;showmenu=aqua_skin;");
aI("text=Aqua Bobber;url=aqua_bobber.html;");
aI("text=Stingray;url=products/stingray.html;");
aI("text=Příslušenství;showmenu=prislusenstvi;");
}

Thank you for any advice.
Dan

question no.2 solved


Poster: db
Dated: Monday August 22 2005 - 9:12:49 BST

question no.2 solved :idea:
please help with the rest.


Poster: Ruth
Dated: Tuesday August 23 2005 - 0:40:59 BST

Hi db,

If I am right in what you want to do, you will need to use the collapse style menu with the treemenu.js module treemenu module. The module for it is about 2/3 down.

If you want the sample for it that is here

I played with it and you can try this data file. Save it as collapse.js
Code:
_scrollAmount=5      // Used for Netscape 4 scrolling
_scrollDelay=10        // Used for Netscape 4 scrolling

_menuCloseDelay=500  // The delay for menus to remain visible on mouse off
_menuOpenDelay=150   // The delay for opening menus on mouse over
_subOffsetTop=0;     // Sub menu offset Top position
_subOffsetLeft=0;  // Sub menu offset Left position

Goverfilter="Alpha(style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=100,
finishY=0);Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
Goverfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135,
Strength=5)"
Goutfilter="randomdissolve(duration=0.3)"
Goutfilter=""
Goverfilter=""

AllMargin=0

treeOffset=0;  // Used to set the offset of sub menus
singleMasterMenu=true // Informs the system to only have one menu open at a time

with(tstyle1=new mm_style()){
offcolor = "#000000";
onbgcolor = "transparent";
oncolor = "#000000";
offbgcolor="transparent";
borderstyle = "solid";
subimage="";
onsubimage="";
bordercolor="#666666";
borderwidth=0;
padding = 2;
fontsize = "11px";
fontfamily = "arial, verdana, tahoma";
fontweight="bold";
separatorsize=1;
separatorcolor="#666666";
subimagepadding=3;
imagepadding=2;
headerbgcolor="transparent";
headercolor="";
itemwidth="118px";
align="center";
offclass="mmalign";
onclass="mmalign";
}


sub1Style=new copyOf(tstyle1)
sub1Style.offcolor = "#ffffff";
sub1Style.offbgcolor="#666666";
sub1Style.oncolor="#000000";
sub1Style.onbgcolor="#FF6600";
sub1Style.separatorcolor="#556E8C";
sub1Style.itemwidth="116px";

//sub2Style=new copyOf(tstyle1)
//sub2Style.offcolor = "#000000";
//sub2Style.offbgcolor="#D6DDE6"
//sub2Style.separatorcolor="#8EA2BB"
//sub2Style.itemwidth="116px";


tstyle1.clickcolor="#ffffff"
tstyle1.clickbgcolor="#D70B0B"
//tstyle1.clickimage="red_blip.gif"
//tstyle1.clicksubimage="white_arrow_down.gif"




   with(new menuname("seal")){
   style = sub1Style;
   margin=AllMargin
   aI("text=seal sub;url=page1.htm;");
   aI("text=International;url=#");
   aI("text=Technology;url=#");
   aI("text=Politics;url=#");
   aI("text=Campaign 2004;url=#");
   aI("text=Health & Wellness;url=#");
   }


   with(new menuname("seal_xp")){
   style = sub1Style;
   margin=AllMargin
   aI("text=seal xp sub;url=#");
   aI("text=Portfolio;url=#");
   aI("text=Watch list;url=#");
   aI("text=Price Alert;url=#");
   aI("text=Sectors;url=#");
   aI("text=Advanced Chart;url=#");
   }

      with(new menuname("prislusenstvi")){
      style = sub1Style;
      margin=AllMargin
      aI("text=prislusenstvi sub;url=page1.htm;");
      aI("text=Market Movers;url=#");
      aI("text=Word on The Street;url=#");
      aI("text=Gainers/Losers;url=#");
      aI("text=Most Actives;url=#");
      aI("text=News;url=#");
      }

   with(new menuname("seal_kid")){
   style = sub1Style;
   margin=AllMargin
   aI("text=seal kid sub;url=#");
   aI("text=NBA;url=#");
   aI("text=NFL;url=#");
   aI("text=NHL;url=#");
   aI("text=College Sports;url=#");
   aI("text=Golf;url=#");
}

   with(new menuname("kaiman")){
   style = sub1Style;
   margin=AllMargin
   aI("text=kaiman sub;url=#");
   aI("text=Cable TV Showcase;url=#");
   aI("text=Movie Trailers;url=#");
   }

   with(new menuname("aqua_fm")){
   style = sub1Style;
   margin=AllMargin
   aI("text=aqua fm sub;url=#");

   }
   
with(new menuname("aqua_skin")){
   style = sub1Style;
   margin=AllMargin
   aI("text=aqua skin sub;url=#");

   }
drawMenus()


Then on your page, down where you have the
Code:
<SCRIPT language=JavaScript>
        if (FlashInstalled())
             FlashWrite('leftnav.swf',118,500);
        else
             noFlashWrite();
        </SCRIPT>
get rid of that and insert this, which takes the place of the table you now have there.
Code:
<TABLE width="118" border="0" bordercolor="#ff0000" cellspacing="0" cellpadding="0"
height="95%" background="mybg.jpg">
  <TR>
    <TD>
   <script>with(new menuname("main Tree Menu")){
style = tstyle1;
alwaysvisible = 1;
itemwidth=118;
position="relative"
align="center";
menuheight=500;
aI("image=spacer_menu_10x5.gif;type=header;");
aI("text=Masky Seal;showmenu=seal;type=tree;onbgcolor=#cccccc;offbgcolor=#cccccc;");
aI("image=spacer_menu_10x3.gif;type=header;");
aI("text=Masky Seal XP;showmenu=seal_xp;type=tree;onbgcolor=#cccccc;offbgcolor=#cccccc;");
aI("image=spacer_menu_10x3.gif;type=header;");
aI("text=Masky Seal Kid;showmenu=seal_kid;type=tree;onbgcolor=#cccccc;offbgcolor=#cccccc;");
aI("image=spacer_menu_10x3.gif;type=header;");
aI("text=Brýle Kaiman;showmenu=kaiman;type=tree;onbgcolor=#cccccc;offbgcolor=#cccccc");
aI("image=spacer_menu_10x3.gif;type=header;");
aI("text=Sphera;url=sphera.html;onbgcolor=#cccccc;offbgcolor=#cccccc");
aI("image=spacer_menu_10x3.gif;type=header;");
aI("text=Sphera JR;url=sphera_jr.html;onbgcolor=#cccccc;offbgcolor=#cccccc");
aI("image=spacer_menu_10x3.gif;type=header;");
aI("text=Zip Fin;url=zipfin.html;onbgcolor=#cccccc;offbgcolor=#cccccc");
aI("image=spacer_menu_10x3.gif;type=header;");
aI("text=Šnorchl&nbsp;Aqua&nbsp;FM;showmenu=aqua_fm;type=tree;onbgcolor=#cccccc;
offbgcolor=#cccccc");
aI("image=spacer_menu_10x3.gif;type=header;");
aI("text=Obleky Aqua Skin;showmenu=aqua_skin;type=tree;onbgcolor=#cccccc;offbgcolor=#cccccc");
aI("image=spacer_menu_10x3.gif;type=header;");
aI("text=Aqua Bobber;url=aqua_bobber.html;onbgcolor=#cccccc;offbgcolor=#cccccc");
aI("image=spacer_menu_10x3.gif;type=header;");
aI("text=Stingray;url=products/stingray.html;onbgcolor=#cccccc;offbgcolor=#cccccc");
aI("image=spacer_menu_10x3.gif;type=header;");
aI("text=Príslušenství;showmenu=prislusenstvi;type=tree;onbgcolor=#cccccc;offbgcolor=#cccccc");
aI("image=spacer_menu_10x3.gif;type=header;");
}
drawMenus();
</script></TD>
  </TR>
</TABLE>


Then right after the body tag call the menu files

Code:
<SCRIPT language=JavaScript src="milonic_src.js" type=text/javascript></SCRIPT>

<SCRIPT language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>");
</SCRIPT>

<SCRIPT language=JavaScript src="collapse.js"
type=text/javascript></SCRIPT>

<SCRIPT language=JavaScript src="treemenu.js" type=text/javascript></SCRIPT>


A couple of things to note:

1. you need to make two transparent images, spacer_menu_10x5.gif, and spacer_menu_10x3.gif. The 10x is the size of the images, 10 wide and 5 or 3 high.

2. You need to create a class for the text align. I don't know why but I can't get it to work using align="center"; there may be something conflicting from the style sheet but, since I was testing I just put it in the head of the document
Code:
<style type="text/css">
.mmalign{text-align:center;}
</style>
You'll see in the data file where I called that class.

3. The reason I have the offbgcolor and onbgcolor set in the data file as transparent and then have placed them in the items other than the 'spacer' so the bg shows is because for some reason, if you set the off and on bgcolor in the style itself it will become the headerbgcolor, even if you try making headerbgcolor=transparent; what shows through is the grey rather than the background.

I used all this with your page and it looks the same, of course I used a background in the table that I made, you'll have to put in the background you want, that's part of the flash and I couldn't get it.

Hope this helps.

Ruth


Poster: pym59
Dated: Sunday September 11 2005 - 22:29:19 BST

Thanks Ruth,

I am trying to use the milonic menus with the feature of the treemenu included, it is working fine, but i have another wish

Is it possible to have also the functionality to open the tree on mouseover and also to close the tree after a certain timeout using the _menuCloseDelay=500;
_menuOpenDelay=150;

Now the tree is opening on clic and the sublevels are not collapsed after the mainlevel is collapsed

I try to set the closeonclick and openonclick, without success

P:S I do not found the collapse.js, but it seems working also, perhapts its is the reason why it is not working onmouseover`?


Poster: Ruth
Dated: Monday September 12 2005 - 10:49:41 BST

Hi,

As far as I know you can't have it open on mouseover. It's built into the treemenu to open onclick. As to the other item, the menus not closing all the subs, you need to set singleMaster=true up toward the top of the data file.

Ruth


Poster: pym59
Dated: Monday September 12 2005 - 11:22:20 BST

i try that but does not seems to work

http://www.ludiques.net/genius/index.php

Take a look at the last menu item "Classement" and open the submenu "gagnants", that works fine. And now open another menu like "communication", the menu "classement" collapse, thats ok, try to reopen "Classement" and the submenu "gagnants" is also open, and my wish is , than wenn we open a menu allsubmenu are displayed but collapsed

Thanks for your help

©1998-2012 Milonic Solutions Ltd. UK Registered Company #4406835
Privacy Policy | License Agreement | Contact Us | Tech Support