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

Submenu placing problem for pages wider than the screen size


Poster: Craigskelton
Dated: Monday November 12 2007 - 15:57:39 GMT

Hi,

I'm having a problem creating a right-aligned help menu for a webpage that is wider than the width of the screen. Basically the menu places itself correctly, but the submenu does not. I can't link to the page itself, since it's full of sensitive data and whatnot. I've attached a pic with all the data cut out that demonstrates the issue.

I'm assuming this is just some problem with the .css or a setting or something, so here's all the relevant code, etc.

my .css:

Code:
masterbody {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10pt;
   font-style: normal;
   font-weight: normal;
   margin: 0px 0px 0px 0px;
   /*height: 100%;*/
   height:auto;
   position: absolute;
   top: 0;
    left: 0;
}

table.toplevel
{
   min-height: 100%;
   height: auto;
   width: 100%;
   /*height: 100%;*/
   height:auto;
    margin: 0;
    padding: 0;
    border: none;
}

table.toplevel td.content {
   PADDING-RIGHT: 10px;
   PADDING-LEFT: 10px;
   PADDING-BOTTOM: 10px;
   PADDING-TOP: 10px;
   vertical-align:top;
   text-align:left;
   /*height: 100%;*/
   height:auto;
   border: 2;
   
}

table.header {
   padding: 0;
   border: 0;
   margin: 0;
   border-spacing: 0px;
   border-width: 0px;
   border-color:#000033;
   background-color:#000033;
   height: 68;
   width: 100%;
}

table.header tr {
   /*background-color:#000033;*/
}

table.header td.logo {
   PADDING-RIGHT:5px;
   PADDING-LEFT:5px;
   PADDING-BOTTOM:5px;
   PADDING-TOP:5px;
   vertical-align:middle;
   text-align:left;
}

table.header td.menu
{
   background-color:#dddddd;
}

table.header td.body {
   PADDING-RIGHT:10px;
   PADDING-LEFT:10px;
   PADDING-BOTTOM:10px;
   PADDING-TOP:10px;
   TEXT-ALIGN:right;
}

table.header td p.thin {
   FONT-SIZE: 14pt;
   COLOR: white;
   font-weight: bold;
}

table.footer {
   width: 100%;
   /*position:absolute;*/
   padding: 0;
   margin: 0;
   bottom: 0;
   background-color:#000033;
}

table.footer td
{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 8pt;
   font-style: normal;
   color: white;
   padding: 5px;
   text-align: center;
   vertical-align: middle;
}

img
{
border-style: none;
}

span.fade
{
   font-size: 8pt;
   font-style: normal;
   color: gray;
}

.allocation
{
   font-size: 8pt;
   font-style: normal;
   width: 35px;
   text-align:right;
}

table.report th.toplevel   
{
   background-color:#999999;
}

table.report th.sublevel   
{
   background-color:#000000;
}
   
table.report th.sublevel font 
{
   color:#FFFFFF; font-size:12pt;
}

table.report td   
{
   font-size:8pt;
   font-family:verdana;
}

td.content div.normal
{
   overflow:auto;
   height: 100%;
   width: 100%;
}

td.content div.printable
{
   overflow:visible;
   height: 100%;
   width: 100%;
}


The menu-generating .js file, which we have renamed to shadowbeta.js (the menu giving trouble is the help menu):

Code:
function create_menu_style()
{
    _menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
    _menuOpenDelay=150            // The time delay before menus open on mouse over
    _subOffsetTop=10              // Sub menu top offset
    _subOffsetLeft=-10            // Sub menu left offset
   
    with(menuStyle=new mm_style()){
    onbgcolor="#4F8EB6";
    oncolor="#ffffff";
    offbgcolor="#DCE9F0";
    offcolor="#515151";
    bordercolor="#296488";
    borderstyle="solid";
    borderwidth=1;
    separatorcolor="#2D729D";
    separatorsize="1";
    padding=5;
    fontsize="12px";
    fontstyle="normal";
    fontfamily="Verdana, Tahoma, Arial";
    pagecolor="black";
    pagebgcolor="#82B6D7";
    headercolor="#DDDDDD";
    headerbgcolor="#1177AA";
    //subimage="images/arrow.gif";
    subimagepadding="2";
    overfilter="Fade(duration=0.2);Alpha(opacity=100);Shadow(color='#777777', Direction=135, Strength=5)";
    outfilter="randomdissolve(duration=0.3)";
    }
}

function create_navigation_menus()
{
    with(milonic=new menuname("Main Menu")){
        style=menuStyle;
        top=10;
        left=10;
        alwaysvisible=1;
        orientation="horizontal";
        //menuwidth="100%";
        menualign="left";
        position="relative";
        aI("text=Search;showmenu=Search;status=Search;");
        aI("text=Administration;showmenu=Administration;status=Administration;");
    }
   
    with(milonic=new menuname("Search")){
        style=menuStyle;
        //alwaysvisible=1;
        aI("text=Search;url=TradeSearch.aspx;");
    }
   
    with(milonic=new menuname("Administration")){
        style=menuStyle;
        //alwaysvisible=1;
        aI("text=Shadow Account Mappings;url=ShadowAccountMappings.aspx;");
        aI("text=Shadow Accounts;url=ShadowAccounts.aspx;");
    }
    drawMenus();
}

function create_help_menus()
{
    with(milonic=new menuname("Help Menu")){
        style=menuStyle;
        top=10;
        left=10;
        alwaysvisible=1;
        orientation="horizontal";
        menualign="right";
        position="relative";
        screenposition="right";
        aI("text=Help&nbsp&nbsp&nbsp showmenu=Help;status=Help;");
    }
    with(milonic=new menuname("Help")){
        style=menuStyle;
        //alwaysvisible=1;
        aI("text=Release Notes&nbsp&nbsp&nbsp url=ReleaseNotes.aspx;");
        aI("text=Business Logic&nbsp&nbsp&nbsp url=BusinessLogic.aspx;");
    }
    drawMenus();
}


finally, we use a master page for the menus, which is nice since it makes it really easy to give all the pages in an app the same menus. Here's the master page that contains the menus (the important bit is create_help_menus();):

Code:
<% __at__ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Web_MasterPage" %>
<!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 id="Head" runat="server">
  <title>Shadow Beta Server</title>
 
  <link href="css/shadow.css" type="text/css" rel="stylesheet" /> 
 
  <script src="<%=Request.ApplicationPath%>/js/milonic_src.js" language="javascript" type="text/javascript"></script>
  <script src="<%=Request.ApplicationPath%>/js/tooltips.js" language="javascript" type="text/javascript"></script>
  <script src="<%=Request.ApplicationPath%>/js/mmenudom.js" language="javascript" type="text/javascript"></script>
  <script src="<%=Request.ApplicationPath%>/js/shadowbeta.js" language="javascript" type="text/javascript"></script>

  <script language="javascript" type="text/javascript">
  <!--
  create_menu_style();
  //--> 
  </script> 
</head>
<body class="masterbody" onunload="UnloadPopupPicker();">
  <table class="toplevel" border="0">
    <tr>
      <td>
      <!-- create a header tag -->
      <table class="header" border="0">
        <tr>
          <td class="body" >
            <p class="thin">
              <asp:Label ID="ModuleNameLabel" Runat="server" Text="<b>Shadow Beta Server</b>"></asp:Label><br/>
              <asp:Label ID="VersionLabel" FONT-SIZE="8pt" Runat="server"></asp:Label><br/>
              <asp:Label ID="UserDisplayNameLabel" FONT-SIZE="8pt" Runat="server"></asp:Label><br/>
              <asp:Label ID="ResourcesLabel" FONT-SIZE="8pt" Runat="server"></asp:Label>
            </p>
          </td>
        </tr>
        <tr>
          <td class="menu" colspan="2">
            <table style="padding: 0; width: 100%;">
      <tr>
        <td>
          <script type="text/javascript" language="javascript">
             create_navigation_menus();
          </script>
        </td>
        <td align="right">
          <script type="text/javascript" language="javascript">
            create_help_menus();
          </script>
        </td>
      </tr>
    </table>
          </td>
        </tr>
      </table>         
      <!-- end create header tag -->
      </td>
    </tr>
    <tr>
      <td class="content">
        <form id="form" method="POST" runat="server">
          <table style="height: 100%; width: 100%;">
            <tr>
              <td><input type="hidden" name="build_date" value=" __at__ BUILD_DATE __at__ "/></td>
            </tr>
            <tr>
              <td>
                <asp:Panel id="normal" runat="server" CssClass="printable">
                   <!-- main -->
                   <asp:contentplaceholder id="main" runat="server" />
                </asp:Panel>
              </td>
            </tr>
          </table> 
        </form>   
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr> 
    <tr>
      <td>
        <!-- footer -->
        <table class="footer">
          <tr>
           <td>
            <asp:Label ID="CopyrightLabel" runat="server" ></asp:Label>
           </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>


I searched this forum, but couldn't find anything helpful. Any help would be greatly appreciated. If any other info is needed, please let me know.

Re: Submenu placing problem for pages wider than the screen size


Poster: Ruth
Dated: Monday November 12 2007 - 16:52:15 GMT

Hi,

What browsers show this problem? I tried IE6 and I'm not seeing the issue.

Ruth

Re: Submenu placing problem for pages wider than the screen size


Poster: Craigskelton
Dated: Monday November 12 2007 - 16:55:55 GMT

It's IE 6. You need something in the page that has a width greater than the current screen for the problem to appear.

I just tried it in FireFox, which we don't actually support, and it worked fine.

Re: Submenu placing problem for pages wider than the screen size


Poster: Ruth
Dated: Monday November 12 2007 - 17:10:05 GMT

Hi,

Yes, I put a spacer set at 2000px wide in the table. Since I am not seeing the issue, I will post this to Milonic. I, of course, am using your code and just making a page, so my environment is not really yours, at least I wouldn't think it is.

Ruth

Re: Submenu placing problem for pages wider than the screen size


Poster: Ruth
Dated: Monday November 12 2007 - 17:21:10 GMT

Oops, I forgot to tell you to remove the top and left positioning from the main menus since you are using them as position='relative'; I don't know that this has anything to do with it, but the menu doesn't do a position relative and the accept being set with top and left parameters from that relative position. It probably isn't doing anything but I don't trust any browsers not to try to do something :)

Ruth

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