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:07

Need your help on menu style


Poster: perldev
Dated: Friday April 28 2006 - 18:37:41 BST

I would like the menu looks like:
Quote:
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


Poster: Migru
Dated: Friday April 28 2006 - 21:24:40 BST

Hi

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

Michael


Poster: Ruth
Dated: Friday April 28 2006 - 21:29:47 BST

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


Poster: Migru
Dated: Friday April 28 2006 - 21:34:07 BST

Hi

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

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

Michael


Poster: perldev
Dated: Tuesday May 2 2006 - 22:03:21 BST

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

Code:
<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:
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


Poster: perldev
Dated: Tuesday May 2 2006 - 22:05:12 BST

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


Poster: Ruth
Dated: Wednesday May 3 2006 - 6:58:25 BST

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


Poster: perldev
Dated: Wednesday May 3 2006 - 15:23:22 BST

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:
_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 &amp; 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:
<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 &amp; 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>

©1998-2012 Milonic Solutions Ltd. UK Registered Company #4406835
Privacy Policy | License Agreement | Contact Us | Tech Support