Need your help on menu style

perldev · Post by **perldev** » Fri Apr 28, 2006 6:37 pm

I would like the menu looks like:

item 1 | item 2 | item 3 item 4

where item4 is right justified; Using either spacer image or empty item with fixed width between 3 and 4 doesn't work well. Is there any other solution?

Need your kind help, thanks in advance.

-Perldev

Migru · Post by **Migru** » Fri Apr 28, 2006 9:24 pm

Hi

why don´t you use images for all four items ?
(image / overimage - combination)

Michael

Post by **Ruth** » Fri Apr 28, 2006 9:29 pm

Hi Perldev,

Is this menu in a table or absolutely positioned? Have you set a width for the menu? We'd need to know those things before giving usable ideas for your particular menu layout.

Ruth

Migru · Post by **Migru** » Fri Apr 28, 2006 9:34 pm

Hi

..........and one important information:
there are Forum guidelines:

http://milonic.com/forum/viewtopic.php?t=4410

Michael

perldev · Post by **perldev** » Tue May 02, 2006 10:03 pm

We are using the latest licensed libraries. The menu is in a table:

Code: Select all

<script type="text/javascript" src="/inc/milonic_src.js"></script>
<script type="text/javascript">//<![CDATA[
   if(ns4) { _d.write("<script type=text/javascript src=/inc/mmenuns4.js><\/script>");}
   else    { _d.write("<script type=text/javascript src=/inc/mmenudom.js><\/script>");}
//]]>
</script>
<table class="navigation" summary="top navigation">
<tr><td class="topline"></td>
</tr>
<tr><td class="navbar">
<script type="text/javascript" src="/inc/menu_data.js"></script>
</td></tr>
<tr><td class="graybar" align="right"> <span class="timestamp">Tuesday, 02-May-2006 13:09:31 CDT</span></td></tr>
</table>

the data file: menu_data.js

Code: Select all

with(milonic=new menuname("mainmenu")){
screenposition="left";
alwaysvisible=1;
style=style0;
orientation="horizontal";
alignment="left";
position="relative";
aI("text=Home;url=/;status=Lind-Waldock Home;showmenu=m1");
aI("text=My Account | LindConnect&reg;;url=/my_acct/;showmenu=m2");
aI("text=Platforms;url=/platforms/index_c.shtml;showmenu=m3;");
aI("text=Services;url=/services/;showmenu=m4;");
aI("text=Open Account;url=/open_acct;showmenu=m5");
}

How could we make the last menu item ("Open Account") right justified?

Thanks!

-PerlDev

perldev · Post by **perldev** » Tue May 02, 2006 10:05 pm

Migru- img is an option we don't like. We need keep the page size as small as possible.

Post by **Ruth** » Wed May 03, 2006 6:58 am

Hi,

You didn't give a style, or give the size of the table, but here is one based on the Milonic download and a menu to give you an idea on what you might try.

Code: Select all

with(style0=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#eeeeee";
headercolor="#000000";
offbgcolor="#eeeeee";
offcolor="#000000";
onbgcolor="#ddffdd";
oncolor="#000099";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}

Code: Select all

with(milonic=new menuname("mainmenu")){
menualign="left";
menuwidth="100%"; 
alwaysvisible=1; 
style=style0; 
orientation="horizontal"; 
alignment="left"; 
position="relative"; 
aI("text=Home;url=/;status=Lind-Waldock Home;showmenu=m1"); 
aI("text=My Account | LindConnect&reg;;url=/my_acct/;showmenu=m2"); 
aI("text=Platforms;url=/platforms/index_c.shtml;showmenu=m3;"); 
aI("text=Services;url=/services/;showmenu=m4;"); 
aI("text=&nbsp;;type=header;itemwidth=100px;separatorsize=0;");  
aI("text=Open Account;url=/open_acct;showmenu=m5"); 
} 

drawMenus();

I set the menu to 100%, then set the menualign="left"; [by the way there is no property called alignment , there is align= for the text alignment and menualign= for aligning the menu inside a menuwidth="100%"; span.]

I set the headerbgcolor to the same color as offbgcolor. You can see the extra item I created after Services and how I set it up. I don't know if that is what you want, but it's a starting place. To do something more particular to your menu, I'd need to know the table size and such.

Ruth

perldev · Post by **perldev** » Wed May 03, 2006 3:23 pm

Ruth,

I tried your solution. On IE (7Beta), the page keeps shifting when mouseover the menu item; On FF (1.5), the position of secondary menu (m2) isn't right.

Here are my data file and page layout:

Code: Select all

_scrollAmount=3;
_scrollDelay=20;
_menuCloseDelay=500;
_menuOpenDelay=350;
_subOffsetTop=0;
_subOffsetLeft=0;
fixMozillaZIndex=true;
ver_menu_visitor=1.0;

with(style0=new mm_style()){
onbgcolor="#5979A0";
oncolor="#FFFFFF";
offbgcolor="#3D5B7B";
offcolor="#FFFFFF";
decoration="none";
separatorcolor="#FFFFFF";
separatorpadding=1;
separatorwidth=1;
separatoralign="right";
padding="2px 10px 2px 10px";
fontsize="12px";
fontstyle="normal";
fontweight="bold";
fontfamily="Arial,Helvetica,Sans Serif";
pagebgcolor="#666666";
pagecolor="#ffffff";
bgimage="/images/NavBar_Blue.jpg";
}

with(style1=new mm_style()){
offcolor="#333333";
offbgcolor="#FFFFFF";
oncolor="#000000";
onbgcolor="#E7E7E7";
offborder='1px dotted #e7e7e7';
bordercolor = "#ffffff";
borderwidth=1;
borderstyle = "dotted";
fontsize="10px";
fontstyle="normal";
fontfamily="verdana,arial,helvetica,comic sans ms,technical";
padding="1px 10px 1px 10px";
pagecolor="#BB7D00";
subimage="/images/arrow.gif";
high3dcolor="#CCCCCC";
low3dcolor="#CCCCCC";
}

with(milonic=new menuname("mainmenu")){
alwaysvisible=1;
style=style0;
menualign="left";
menuwidth="100%";
orientation="horizontal";
position="relative";
var thisPage = document.location.pathname;
aI("text=Services;url=/services/;showmenu=m2;")
aI("text=Platforms;url=/platforms/;showmenu=m2;")
aI("text=Quotes & Charts;url=/vquotes/vq_quotes.shtml;showmenu=m2;")
aI("text=Trading Tools;url=/tools/;showmenu=m2;")
aI("text=Education;url=/edu/;showmenu=m2;")
aI("text=&nbsp;;type=header;itemwidth=300px;separatorsize=0")
aI("bgimage=/images/navbar_account.jpg;bgcolor=#CC9900;onbgcolor=#D4A826;text=Open An Account;left=400px;url=/open_acct/;showmenu=m2;")
}

with(milonic=new menuname("m2")){
itemwidth=390;
top="offset=2";
borderwidth=1;
style=style1;
pageimage="/images/nav_services-over.gif";
aI("text=About Our Services;url=/services/;");
aI("text=Item 3;url=/services/;");
}

The page layout:

Code: Select all

<style type="text/css">
*{
	font-size:100%;
}


body{
	font:75%/140% Arial, Helvetica, sans-serif;
	text-align:center;
	background: #CCCCCC url('/images/gradback2.jpg');
	}
#wrap{
	border:0px dashed #CCC;
	background: #CCCCCC url('/images/gradback2.jpg');
	width:771px;
	margin:0 auto;
	text-align:left;
}

</style>

<div id="wrap">
  <table width="100%"  border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="59%" rowspan="2" bgcolor="#F5F5F5"><img src="/images/navh_logo.jpg" width="476" height="60" /></td>
      <td class="horizontalIndex1" align="right" bgcolor="#999999"><a class="horizontal" href="/index.shtml">Home</a> <span class="horizontalIndex3">|</span> <a class="horizontal" href="/vhome/vh_about.shtml">About Lind </a> <span class="horizontalIndex3">|</span> <a class="horizontal" href="vhome/vh_media.shtml">Media</a> | <a class="horizontal" href="/contact.shtml">Contact us </a> <span class="horizontalIndex3">|</span> <span class="style1">800.###.####</span> </a>&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
      <td bgcolor="#F5F5F5">     <div align="right">
          <div class="searchdiv">
<form method="get" action="/Harvest/cgi-bin/search.cgi" name="frmsearch" id="frmsearch">
<input class="searchbox" type="text" name="query" value="search site" onclick="query.value=''"/>
<input type="image" name="query" src="/images/search_go.jpg" alt="go!" border="0">
</form>
</div>
              </div></td>
    </tr>
  </table>
  <script type="text/javascript" src="/inc/milonic_src.js"></script>
<script type="text/javascript">//<![CDATA[
   var site_cu_phone = '800-788-1234';
   if(ns4) { _d.write("<script type=text/javascript src=/inc/mmenuns4.js><\/script>");}
   else    { _d.write("<script type=text/javascript src=/inc/mmenudom.js><\/script>");}
//]]>
</script>
<table id="header" summary="top navigation" width="100%">
<tr><td>
<script type="text/javascript" src="/inc/menu_visitor2.js"></script>
<div class="milonic navbar">
        <span class="navbutton gray"><a href="/">Home</a></span>
        <span class="navbutton" style="width:50px"><a href="/services/">Services</a></span>
        <span class="navbutton"><a href="/platforms/">Platforms</a></span>
        <span class="navbutton"><a href="/vquotes/vq_quotes.shtml">Quotes & Charts</a></span>
        <span class="navbutton"><a href="/tools/">Trading Tools</a></span>
        <span class="navbutton"><a href="/edu/">Education</a></span>
        <span class="navbutton"><a href="/contact.shtml">Contact Us</a></span>
        <span class="navbutton orange"><a href="/open_acct/">Open An Account</a></span>
</div>
</td></tr>
</table>
[/div>