Simple Two Column in Sub-Menu

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:47

Simple Two Column in Sub-Menu

Poster: satsoft
Dated: Thursday April 14 2005 - 22:04:30 BST

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:

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:

   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:

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

Re: Simple Two Column in Sub-Menu

Poster: John
Dated: Thursday April 14 2005 - 22:20:45 BST

satsoft wrote:

And Table Tags:

Code:

   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.

Poster: Ruth
Dated: Thursday April 14 2005 - 23:37:28 BST

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

Poster: kevin3442
Dated: Friday April 15 2005 - 3:05:32 BST

Hi satsoft

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

Kevin

Industrial Strength JavaScript and DHTML Menus

Simple Two Column in Sub-Menu

Re: Simple Two Column in Sub-Menu