Collapse menu and every item having a clickimage

[kevdog98]

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

[Ruth]

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

[kevdog98]

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

[kevin3442]

Hi Kevin,

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).

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

[kevdog98]

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

[kevin3442]

... 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

[kevdog98]

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

[kevin3442]

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

[kevdog98]

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

[kevin3442]

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

[kevdog98]

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