problem displaying menu via a table

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

problem displaying menu via a table

Poster: mwallace81
Dated: Monday November 7 2005 - 22:00:37 GMT

Hi Guys and Gals,

So I have successfully figured out how to display the milonic menu in a table. I admit it is very painless and easy to do, but there is one major issue I am running into. Here is the way I _am_ displaying the menu:

I have a menu in a table that consists of one item that displays a sub menu with several items. I want to display that menu at a certain offset (top=50; and left=-150;) because I want the initial sub menu to display under the image/only item in the "always visible" "Main Menu". Follow me so far? <b>Here</b> is where I run into my problem... I only want the initial sub menu to be at the specified offset but then I want its submenus to just display normally (relative to the first sub menu). Basically I want to have drop down menu that is initially just one tab and I want that to be in a table so it will be positioned correctly for whatever resolution the user is viewing the page at. Is there a simple solution to getting my menu to display the way I want it to or any solution? Thank you for any help and or advice!!!!

here's some of the relevant code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CJA Marketing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="includes/main.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript" src="includes/main.js"></script>
</head>
<body style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
    <!-- Milonic Menu -->
    <script type="text/javascript" src="milonic/milonic_src.js"></script>
    <div class=milonic><a style="color:white;" href="http://www.milonic.com/">JavaScript Menu, DHTML Menu Powered By Milonic</a></div>
    <script type="text/javascript">
      if(ns4)_d.write("<scr"+"ipt type=text/javascript src=milonic/mmenuns4.js><\/scr"+"ipt>");
        else _d.write("<scr"+"ipt type=text/javascript src=milonic/mmenudom.js><\/scr"+"ipt>");
    </script>
    <script type="text/javascript" src="milonic/menu_data.js"></script>

    <div id="horizon">
      <div id="header">
        <div id="logo">
          <a href="index.html"><img src="images/cja_logo.gif" border="0" width="133" height="79" /></a>
        </div>
        <!-- LOGIN and CONTACT -->
        <div id="agent_login.html">
          <table id="login_link" cellpadding="0" cellspacing="0">
            <tr>
              <td id="login">
                <a href="agent_login.html"><img src="images/agent_login.gif" border="0" width="92" height="25" /></a>
              </td>
            </tr>
            <tr>
              <td id="contact">
                <a href="contact.html"><img src="images/contact_us.gif" border="0" width="92" height="24" /></a>
              </td>
            </tr>
          </table>
        </div> <!-- closes agent_login div -->
      </div> <!-- closes header div -->
      
      <!-- Main div contains all remaining content in page -->
      <div id="main">
        <div id="left_frame">
          <img src="images/cja_truncated_tagline.gif" border="0" width="132" height="31" />
          <div id="left_frame_text"><br />
            CJA offers a full range of expertise. Our legal and technical support team provides
            answers to questions from client's attorneys, accountants and other advisors.
            First Actuarial Corporation, our affiliate, provides plan valuation and administration.
            In addition, we bring a heritage of marketing expertise closer to the point-of-sale with
            PlanGen, our web-based, safe-harbor proposal system, our one-on-one sales training and
            support and our national network of regional offices that assist agents in local markets.
          </div> <!-- closes left_frame_text div -->
        </div> <!-- closes left_frame div -->

        <div id="content">
          <div id="nav">
            <script language="javascript" type="text/javascript">displayNav();</script>
          </div>
          <div id="text">
            <h1>Credentials and Documents</h1>
            <table>
              <tr>
                <td rowspan="2" class="titaniumMenu">
                  <script type="text/javascript">
                    with(milonic=new menuname("Main Menu")){
                    alwaysvisible=1;
                    position="relative";
                    orientation="vertical";
                    style=titaniumStyle;
                    itemwidth=149;
                    aI("showmenu=titanMain;text= ;align=center;valign=top;bgimage=images/mmTitanium.gif;itemheight=53;onbgcolor=;");
                    }
                    drawMenus();
                  </script>
                </td>
               </tr>
            </table>
            <!--<span class="line_spacing">Coming soon...</span>-->
           </div> <!-- closes text div -->
        </div> <!-- closes content div -->
        <div id="footer">Copyright &copy;2005 CJA Marketing.  All Rights Reserved.</div>
      </div> <!-- closes main div -->
    </div> <!-- closes horizon div -->
  </body>
</html>

and here is _part of_ the menu_data.js I have modified ...

Code:

////////////////////////////////////////////////////////////////////////////////////////////////////
// sub menus for the Titanium Menus
with(milonic=new menuname("titanMain")){
style=titaniumStyle;
top:

aI("showmenu=titanBrochure;text=Brochure;url=http://localhost/cjaLive/credentials_documents.html;");
aI("showmenu=titanSample;text=Sample Case;url=http://localhost/cjaLive/credentials_documents.html;");
aI("showmenu=titanLegDocs;text=Legal Documents;url=http://localhost/cjaLive/credentials_documents.html;");
aI("showmenu=titanComQues;text=Common Questions;url=http://localhost/cjaLive/credentials_documents.html;");
aI("showmenu=titanArticles_Materials;text=Articles & Support Materials;url=http://localhost/cjaLive/credentials_documents.html;");
aI("showmenu=titanForms;text=Forms;");
aI("showmenu=titanRFP;text=Request for Proposal;");
}

with(milonic=new menuname("titanBrochure")){
overflow="scroll";
style=titaniumStyle;
aI("text=Plain Text Horizontal Style DHTML Menu Bar;url=http://www.milonic.com/menusample1.php;")
aI("text=Vertical Plain Text Menu;url=http://www.milonic.com/menusample2.php;onfunction=showtip('Another common sample This time, the sub<br>menus are opened from a vertical main menu') ;")
aI("text=All Horizontal Menus;url=http://www.milonic.com/menusample25.php;onfunction=showtip('If space is limited, this menu sample shows how<br>to open sub-menus in a horizontal orientation') ;")
aI("text=Using The Popup Menu Function Positioned by Images;url=http://www.milonic.com/menusample24.php;onfunction=showtip('The popup function can also open menus<br>based on mouse action but also positioned<br>relative to an image') ;")
aI("text=Classic XP Style Menu;url=http://www.milonic.com/menusample82.php;")
aI("text=XP Style;url=http://www.milonic.com/menusample86.php;")

}

with(milonic=new menuname("titanSample")){
style=titaniumStyle;
aI("text=Product Purchasing Page;url=http://www.milonic.com/cbuy.php;");
aI("text=Contact Us;url=http://www.milonic.com/contactus.php;");
aI("text=Newsletter Subscription;url=http://www.milonic.com/newsletter.php;");
aI("text=FAQ;url=http://www.milonic.com/menufaq.php;");
aI("text=Discussion Forum;url=http://www.milonic.com/forum/;");
aI("text=Software License Agreement;url=http://www.milonic.com/license.php;");
aI("text=Privacy Policy;url=http://www.milonic.com/privacy.php;");
}

with(milonic=new menuname("titanLegDocs")){
style=titaniumStyle;
aI("status=(aq) Web Server Hosting & Services;text=(aq) Web Hosting;url=http://www.a-q.co.uk/;");
aI("text=WebSmith;url=http://www.softidiom.com/?milonicmenu;");
aI("text=SMS 2 Email;url=http://www.sms2email.com/;");
}

with(milonic=new menuname("titanComQues")){
style=titaniumStyle;
aI("status=Apache Web Server, the basis of Milonic's Web Site;text=Apache Web Server;url=http://www.apache.org/;");
aI("status=MySQL, Milonic's Prefered Choice of Database Server;text=MySQL Database Server;url=http://ww.mysql.com/;");
aI("status=PHP - Web Server Scripting as used by Milonic;text=PHP - Development;url=http://www.php.net/;");
aI("status=PHP Based Web Forum, Milonic's Recommended Forum Software;text=phpBB Web Forum System;url=http://www.phpbb.net/;");
aI("showmenu=Anti Spam;status=Anti Spam Solutions, as used by Milonic;text=Anti Spam Tools;");
}

with(milonic=new menuname("titanArticles_Materials")){
style=titaniumStyle;
aI("text=Spam Cop;url=http://www.spamcop.net/;");
aI("text=Mime Defang;url=http://www.mimedefang.org/;");
aI("text=Spam Assassin;url=http://www.spamassassin.org/;");
}

with(milonic=new menuname("titanForms")){
style=titaniumStyle;
aI("text=Login;url=http://www.milonic.com/login.php;");
aI("text=Licenses;url=http://www.milonic.com/mylicenses.php;");
aI("text=Invoices;url=http://www.milonic.com/myinvoices.php;");
aI("text=Make Support Request;url=http://www.milonic.com/reqsupport.php;");
aI("text=View Support Requests;url=http://www.milonic.com/mysupport.php;");
aI("text=Your Details;url=http://www.milonic.com/mydetails.php;");
}

with(milonic=new menuname("titanRFP")){
style=titaniumStyle;
aI("text=Request For Proposal;url=http://localhost/cjaLive/credentials_documents.html");

}

Poster: Ruth
Dated: Monday November 7 2005 - 22:46:36 GMT

To offset only that first 'main' submenu, use top="offset=50";left="offset=-150"; in the menu properties area, where you have the alwaysvisible=1; coding. That will set the offsets in that menu, and all submenus opening from that will just use the subOffsetTop and subOffsetLeft at the top of the menu data file

Ruth

Poster: mwallace81
Dated: Tuesday November 8 2005 - 4:10:39 GMT

ok so I tried that and it doesn't seem to be working...are you sure you mean

Quote:

top="offset=50";left="offset=-150";

I tried top=50;left=-150; and that didn't work either ...

Poster: Ruth
Dated: Tuesday November 8 2005 - 9:07:49 GMT

Yes, I'm sure.

There is subOffsetTop and subOffsetLeft which will apply to all submenus. To override that you need to use top="offset=x"; and left="offset=y"; This will offset it from the menu from which it drops. Top= and left= are used to place a menu absolutely positioned on a page based on top and left of the page.

I made a page, no images of course, but I did make one for the bgimage from which the menus drop and coded your main 'sub'

Code:

with(milonic=new menuname("titanMain")){ 
style=titaniumStyle; 
top="offset=50";
left="offset=-150";
aI("showmenu=titanBrochure;text=Brochure;url=http://localhost/cjaLive/credentials_documents.html;"); 
etc.
} 

I tested it in IE5.5, FireFox 1.0.2, Netscape 7.1, Opera 7.54 and it works in all. If you cannot get it to work, can you provide a link to the page so we can check it out?

Ruth

problem solved...

Poster: mwallace81
Dated: Tuesday November 8 2005 - 15:39:33 GMT

Ok yes you were definitely right

! I was putting the

Code:

top="offset=50";
left="offset=-150";

very much in the wrong place. I had it out in my html page where I was drawing my outermost "Main" menu because... I was confused...

Thank you very much for your help! I didn't know you could set a position like that at all ... using the "offset=" inside a "top=" ... very tricky... and I don't think thats mentioned anywhere in the quick reference documentation...it would be a cool thing to add *wink wink nudge nudge* ... anyway ...THANK YOU VERY MUCH!

Poster: Ruth
Dated: Tuesday November 8 2005 - 17:15:12 GMT

Hi,

You're welcome. It's in the menu samples under the heading of Functionality Samples: Menu Positions with Offsets. There is a demo section if you look under support/tech support documents. The demos are two categories, those of actual Milonic modules which are at the bottom, and the ones at the top are from functions written, mostly by Kevin, in response to forum posts wanting the menu to do specific things. There is also a beginners' Guide forum, which is really a quick read for basic things.

Ruth

Industrial Strength JavaScript and DHTML Menus

problem displaying menu via a table

problem solved...