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:53
Collapse menu and every item having a clickimage
Poster: kevdog98
Dated: Tuesday October 3 2006 - 23:29:36 BST
Hi,
I need to be able to have every menu item have a arrow image displayed when the item
is clicked. However, I can not figure out how to do this.
Here is my code:
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()){
offbgcolor = "#3399CC";
onbgcolor = "#297AB8";
offcolor="#FFFFFF";
oncolor="#FFFFFF";
subimagepadding=0;
subimageposition="right";
bordercolor="black"
borderstyle="solid";
borderwidth=0;
fontsize="11px";
fontfamily="Trebuchet MS";
itemwidth=114;
itemheight=30;
rawcss="padding:2px 0px 2px 4px";
keepalive=true;
}
sub1Style=new copyOf(tstyle1)
sub1Style.offcolor = "#3399CC";
sub1Style.offbgcolor="#8EA2BB"
sub1Style.separatorcolor="#556E8C"
sub1Style.clickcolor="#3399CC"
sub2Style=new copyOf(tstyle1)
sub2Style.offcolor = "#000000";
sub2Style.offbgcolor="#D6DDE6"
sub2Style.separatorcolor="#8EA2BB"
tstyle1.onbgcolor = "#297AB8";
tstyle1.offbgcolor = "#3399CC";
sub3Style=new copyOf(tstyle1)
sub3Style.padding=4;
sub3Style.fontsize="10.5px";
with(new menuname("main Tree Menu")){
top=170
left=0
style = tstyle1;
alwaysvisible = 1;
menuheight=30;
menuwidth=114;
clickimage="mis_arrow.gif";
//margin=AllMargin
//position="relative"
aI("text=<b>Mission</b>;");
aI("text=<b>What We Believe</b>;");
aI("text=<b>Urban Missions</b>;showmenu=Urban;type=tree;");
aI("text=<b>Global Missions</b>;showmenu=Global;type=tree;");
aI("text=<b>Shoulder-to-Shoulder</b>;url=#;");
aI("text=Youth Missions;");
aI("text=Univ. Missions;");
}
with(new menuname("Urban")){
style = tstyle1;
margin=AllMargin
aI("text=Shoulder-to-Shoulder;url=");
aI("text=Urban ministries;url=#");
aI("text=Urban partners;url=#");
aI("text=Classes;url=#");
}
with(new menuname("Finance")){
style = sub1Style;
margin=AllMargin
aI("text=MILONIC;url=#");
aI("text=US Markets;showmenu=US Markets;type=tree;image=lblue_blip.gif;");
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("US Markets")){
style = sub2Style;
margin=AllMargin
aI("text=Market Snapshot;url=#");
aI("text=Market Movers;url=#");
aI("text=Word on The Street;url=word.php");
aI("text=Gainers/Losers;url=#");
aI("text=Most Actives;url=#");
aI("text=News;url=#");
}
with(new menuname("Sports")){
style = sub1Style;
margin=AllMargin
aI("text=MLB;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("Global")){
style = sub3Style;
margin=AllMargin
aI("text=Missionaries/ Partners;url=http://www.upc.org;target=mid;clickimage=mis_arrow.gif;");
aI("text=Task Force & Prayer Group;url=cable.php");
aI("text=Short-Term Missions;showmenu=shortterm");
}
with(new menuname("shortterm")){
style = tstyle1;
margin=AllMargin
aI("text=Classes/ Events/ Resources;url=#");
}
drawMenus()
_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()){
offbgcolor = "#3399CC";
onbgcolor = "#297AB8";
offcolor="#FFFFFF";
oncolor="#FFFFFF";
subimagepadding=0;
subimageposition="right";
bordercolor="black"
borderstyle="solid";
borderwidth=0;
fontsize="11px";
fontfamily="Trebuchet MS";
itemwidth=114;
itemheight=30;
rawcss="padding:2px 0px 2px 4px";
keepalive=true;
}
sub1Style=new copyOf(tstyle1)
sub1Style.offcolor = "#3399CC";
sub1Style.offbgcolor="#8EA2BB"
sub1Style.separatorcolor="#556E8C"
sub1Style.clickcolor="#3399CC"
sub2Style=new copyOf(tstyle1)
sub2Style.offcolor = "#000000";
sub2Style.offbgcolor="#D6DDE6"
sub2Style.separatorcolor="#8EA2BB"
tstyle1.onbgcolor = "#297AB8";
tstyle1.offbgcolor = "#3399CC";
sub3Style=new copyOf(tstyle1)
sub3Style.padding=4;
sub3Style.fontsize="10.5px";
with(new menuname("main Tree Menu")){
top=170
left=0
style = tstyle1;
alwaysvisible = 1;
menuheight=30;
menuwidth=114;
clickimage="mis_arrow.gif";
//margin=AllMargin
//position="relative"
aI("text=<b>Mission</b>;");
aI("text=<b>What We Believe</b>;");
aI("text=<b>Urban Missions</b>;showmenu=Urban;type=tree;");
aI("text=<b>Global Missions</b>;showmenu=Global;type=tree;");
aI("text=<b>Shoulder-to-Shoulder</b>;url=#;");
aI("text=Youth Missions;");
aI("text=Univ. Missions;");
}
with(new menuname("Urban")){
style = tstyle1;
margin=AllMargin
aI("text=Shoulder-to-Shoulder;url=");
aI("text=Urban ministries;url=#");
aI("text=Urban partners;url=#");
aI("text=Classes;url=#");
}
with(new menuname("Finance")){
style = sub1Style;
margin=AllMargin
aI("text=MILONIC;url=#");
aI("text=US Markets;showmenu=US Markets;type=tree;image=lblue_blip.gif;");
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("US Markets")){
style = sub2Style;
margin=AllMargin
aI("text=Market Snapshot;url=#");
aI("text=Market Movers;url=#");
aI("text=Word on The Street;url=word.php");
aI("text=Gainers/Losers;url=#");
aI("text=Most Actives;url=#");
aI("text=News;url=#");
}
with(new menuname("Sports")){
style = sub1Style;
margin=AllMargin
aI("text=MLB;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("Global")){
style = sub3Style;
margin=AllMargin
aI("text=Missionaries/ Partners;url=http://www.upc.org;target=mid;clickimage=mis_arrow.gif;");
aI("text=Task Force & Prayer Group;url=cable.php");
aI("text=Short-Term Missions;showmenu=shortterm");
}
with(new menuname("shortterm")){
style = tstyle1;
margin=AllMargin
aI("text=Classes/ Events/ Resources;url=#");
}
drawMenus()
Thanks for your help.
Kevin
Poster: Ruth
Dated: Wednesday October 4 2006 - 1:32:01 BST
Hi,
Whatever size your click image is, create another transparent image that size, then set your items as image=whatever;clickimage=yourclickimage
When you click the item, then the click image should show up. If you have a url it would be much easier to help you.
Ruth
Poster: kevdog98
Dated: Wednesday October 4 2006 - 17:13:41 BST
Ruth:
That worked, but it put my image on the left and I need it to be on the right. Also, Is there a way to do this globally so that all of the items so the image when clicked. Here is a url to my page. http://205.158.143.230/calendar.asp
Thanks.
Kevin
Poster: kevin3442
Dated: Thursday October 5 2006 - 1:28:37 BST
Hi Kevin,
kevdog98 wrote:
That worked, but it put my image on the left and I need it to be on the right.
You can set imageposition="right"; in the menu style definition to move the image and clickimage to the right side of each menu item that uses that particular style. (But if you have a subimage defined, I believe it will take precedence).
kevdog98 wrote:
Also, Is there a way to do this globally so that all of the items so the image when clicked.
Yes. Instead of using image and clickimage as menu item properties, use them as style properites. In other words, instead of setting the values per item, in each aI(), set them once in the menu's style definition (e.g., in tstyle1).
A question for you: Do you want these images on every menu item, or just those that open submenus when clicked? If the later, then I would suggest looking into the subimage properties rather than the image properties.
Hope that helps,
Kevin
Poster: kevdog98
Dated: Thursday October 5 2006 - 16:36:01 BST
Thanks for thee reply, that worked, but I also need the image to be centered and on the right is there a way to do that? I've played around with imageposition and imagealign, but it seems to only allow one to be called and ignores the other if I use both.
Thanks.
Kevin
Poster: kevin3442
Dated: Friday October 6 2006 - 19:23:23 BST
kevdog98 wrote:
... but I also need the image to be centered and on the right is there a way to do that? ...
Hi Kevin,
I'm not sure I get it... centered AND on the right???
Kevin
Poster: kevdog98
Dated: Friday October 6 2006 - 22:57:06 BST
Kevin,
I want the image to be on the right side of the text, which I can get when I use imageposition="right"; but it alings it to the top right, and I need it to be aligned to the center right. The odd thing is that when I use clicksubimage call it centers it and puts the imnage on the right, The only thinks is I need it to work on all itms on the menu not just the sub items.
Thanks.
Kevin
Poster: kevin3442
Dated: Friday October 6 2006 - 23:02:26 BST
OK... I dig. I should have figured that out. What threw me is the CSS mind set for vertical centering is "middle." I believe you can combine options in the imageposition, like imageposition="middle right", although I haven't messed around with that for quite awhile.
Cheers,
Kevin
Poster: kevdog98
Dated: Saturday October 7 2006 - 17:28:20 BST
Kevin,
That does not work it uses which ever one is called first so If i go middle right it puts it on the middle on the left, if I put right middle it puts it on the right aligned to the top. Any other Ideas on houw to make this work?
Thanks.
Kevin
Poster: kevin3442
Dated: Sunday October 8 2006 - 4:26:31 BST
Hi Kevin,
Hmmm... well darn. Sure would have been nice if it worked! I'm pretty sure it's supposed to work like that. I'll have to let Andy know about that. Meantime, you could try a different approach. The various padding properties can be defined like padding in css; i.e., you can define top, right, bottom, left padding separately. In this case, we can make the top padding for the image a little more than the other sides, essentially forcing the image down. Like so:
imagepadding = "10px 2px 2px 2px";
The order is as with css: top, right, bottom, left. Pick a value for the top padding that works for your menu item height. Of course, this won't position the image in the vertical middle dynamically, but if the height of your menu items doesn't change, that shouldn't be a problem.
If that doesn't work, I have one more suggestion... kind of old school, involving transparency in a .gif image; but we'll keep that one in reserve for now.
Cheers,
Kevin