Simple Two Column in Sub-Menu

[satsoft]

I need a solution that allows part of my submenu text to align left(in this case a business title), and the rest of the text to align right(a business phone number).

I don't have a working site up yet, so bare with me.
I've Tried using DIV tags:

Code: Select all

	aI("text=City Tavern<div align=right>842-5555</div>;url=#");

This knocks the phone number down to the next line. For testing, I've set the itemwidth well beyond what is needed to ensure that isn't causing it to drop down.

And Table Tags:

Code: Select all

	aI("text=<table width=100%><tr><td>City Tavern</td><td align=right>842-5555</td></tr></table>;url=#");

This makes the text too large, and I can't seem to control it with anything in the menu_data.js file. This seems like too simple of a problem...hopefully one of you can catch what I'm missing.

Here is the Full 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


AllMargin=0

treeOffset=5;  // 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()){

align = "center";
offcolor = "#ffffff";
oncolor = "#FFFFFF";
padding = 2
fontsize = "12px";
fontweight = "bold";
fontfamily = "Comic Sans MS, arial, verdana, tahoma";    
itemheight=22
itemwidth=500
}


sub1Style=new copyOf(tstyle1)
sub1Style.offcolor = "#000000";
sub1Style.oncolor = "#999999";
sub1Style.offbgcolor="#ffffff";
sub1Style.separatorcolor="#FFFFFF";
sub1Style.align = "left";
sub1Style.padding = 0;
sub1Style.fontsize= "10px";
sub1Style.fontweight= "bold";
sub1Style.itemheight= "16";


with(new menuname("main Tree Menu")){
top=150
left=100
style = tstyle1;
alwaysvisible = 1;
margin=AllMargin
position="relative"
aI("text=Clothing Stores;bgimage=1.gif;overbgimage=1.gif;showmenu=Clothing;type=tree;");
aI("text=<center>Convience Stores;bgimage=2.gif;overbgimage=2.gif;showmenu=Convience;type=tree;");
aI("text=<center>Event Coordinator;bgimage=3.gif;overbgimage=3.gif;showmenu=Event;type=tree;");
aI("text=<center>Florist;bgimage=4.gif;overbgimage=4.gif;showmenu=Florist;type=tree;");
aI("text=<center>Gift Shops;bgimage=5.gif;overbgimage=5.gif;showmenu=Gift;type=tree;");
aI("text=<center>Hair Salons / Tanning;bgimage=1.gif;overbgimage=1.gif;showmenu=Hair;type=tree;");
aI("text=<center>Lodging;bgimage=6.gif;overbgimage=6.gif;showmenu=Lodging;type=tree;");
aI("text=<center>Marinas;bgimage=7.gif;overbgimage=7.gif;showmenu=Marinas;type=tree;");
aI("text=<center>Massage;bgimage=8.gif;overbgimage=8.gif;showmenu=Massage;type=tree;");
aI("text=<center>Restaurants;bgimage=9.gif;overbgimage=9.gif;showmenu=Restaurants;type=tree;");
aI("text=<center>Video Rental;bgimage=1.gif;overbgimage=1.gif;showmenu=Video;type=tree;");
}

	with(new menuname("Clothing")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Fisher & Company Clothiers;url=#");
	}

	with(new menuname("Convience")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Osborn's Mini Mart;url=#");
	}

	with(new menuname("Event")){
	style = sub1Style;
	margin=AllMargin
	aI("text=A.C. Specialties;url=#");
	}

	with(new menuname("Florist")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Elizabeth's Garden;url=#");
	}

	with(new menuname("Gift")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Mary's Shoppe;url=#");
	aI("text=The Painter and the Poet;url=#");
	aI("text=Shoreline Specialties;url=#");
	aI("text=Town & Country Baskets;url=#");
	}

	with(new menuname("Hair")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Michelle's Headquarters;url=#");
	aI("text=Studio Hair Designs;url=#");
	}

	with(new menuname("Lodging")){
	style = sub1Style;
	margin= AllMargin

	aI("text=Culver Cove Resort;url=#");
	aI("text=Inn by the Lake;url=#");
	aI("text=Main Street Manor;url=#");
	aI("text=Swan Lake Resort;url=#");
	}

	with(new menuname("Marinas")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Culver Marina;url=#");
	aI("text=Culver's Portside Marina;url=#");
	}

	with(new menuname("Massage")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Integrated Massage & Wellness;url=#");
	}

	with(new menuname("Video")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Bick's Flicks;url=#");
	}

	with(new menuname("Restaurants")){
	style = sub1Style;
	margin=AllMargin
	aI("text=Captain's Quarters;url=#");
	aI("text=City Tavern;url=#");
	aI("text=Papa's Pizza;url=#");
	aI("text=Edge Water;url=#");
	aI("text=The 10 Spot;url=#");	
	}

drawMenus()

[John]

And Table Tags:

Code: Select all

	aI("text=<table width=100%><tr><td>City Tavern</td><td align=right>842-5555</td></tr></table>;url=#");

This makes the text too large, and I can't seem to control it with anything in the menu_data.js file.

Anything in your css that affects tables? If this one gives you what you want (almost), you might try using the rawcss= parameter to fix the size.

[Ruth]

You have your itemwidth set at 500 in the tstyle1, then you use sub1Style=new copyOf(tstyle1) and do not put any itemwidth in it so it will take the 500 that is in the first style that it is copying. This would make the table cells 250 and 250 since you have it set at 100%. As to the text size, that is problably from a style sheet that has some generic setting for font size in TDs not a class setting. If you have a url it would be easier to see what's happening.

Ruth

[kevin3442]

Hi satsoft

You might also find the multicolumn sample useful; shows how to split a menu into multiple columns.

Kevin