How to open submenu between vertical main menu items?

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
db
Advanced
Advanced
Posts: 15
Joined: Tue Feb 08, 2005 5:59 pm

How to open submenu between vertical main menu items?

Post by db »

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
Top
db
Advanced
Advanced
Posts: 15
Joined: Tue Feb 08, 2005 5:59 pm

question no.2 solved

Post by db »

question no.2 solved :idea:
please help with the rest.
Top
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:
Contact Ruth

Post by Ruth »

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: Select all

_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: Select all

 <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: Select all

<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: Select all

<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: Select all

<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
Top
pym59
Beginner
Beginner
Posts: 9
Joined: Sun Sep 11, 2005 10:12 pm

Post by pym59 »

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`?
Top
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:
Contact Ruth

Post by Ruth »

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
Top
pym59
Beginner
Beginner
Posts: 9
Joined: Sun Sep 11, 2005 10:12 pm

Post by pym59 »

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
Top
Post Reply

Return to “Help & Support for DHTML Menu Version 5+”