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: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()


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


Poster: kevdog98
Dated: Monday October 16 2006 - 16:07:17 BST

Kevin:

The image padding does not work perfectly either. It does not always keepp it in the center. Can you tell me how to use your transparency idea?

Thanks.

Kevin