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

change click function to rollover function in sub menu


Poster: newbiebob
Dated: Wednesday March 14 2007 - 17:36:48 GMT

Can anyone help me: I'm trying to change my sub-menu functionality to rollover instead of click to show pages. The javascript guy who originally set up the menu has left, and I have no java experience :cry: but I'm trying my best using the beginners manual. I've got as far as the menu_data menu but can't see anything that may change things easily. The milonic_scr looks more promising..but not sure how they relate?? Any tips gratfully received.Thank you.


Poster: Ruth
Dated: Thursday March 15 2007 - 2:28:49 GMT

Hi,

We really need to have the page so we can help you. The milonic_src.js, mmenudom.js, mmenuns4.js files are non-editable, they are the program files and if you mess with them the menu probably won't work.

It's the menu data file where you can edit, but to figure out how to do what you want we have to see the page and the data file [which we'll see when we access the page] to tell you how to do it.

Ruth

re: change click function to rollover function in sub menu


Poster: newbiebob
Dated: Thursday March 15 2007 - 9:42:22 GMT

Hi Thanks for getting back to me. The page that has a sub menu that I want to change from click to rollover is here:
http://www.virtualaccess.com/MsServAttrib.htm

It uses a menu_data called: menu_data_MS_SA.js and seems to have a menu style attached called: with (milonic = new menuname("Menu3rdLevelMSSA"))

Thanks again.

Newbiebob


Poster: Ruth
Dated: Thursday March 15 2007 - 15:44:25 GMT

Hi,

That menu you mentioned is the one on the left side of the page, it only has links, no submenus. The only click is to open the page when you click the link. What is it you want to do?

Ruth


Poster: newbiebob
Dated: Thursday March 15 2007 - 16:49:37 GMT

Hi

Sorry, my explanations are a bit rubbish. :roll: I want to be able to see the page on rollover instead of on click. For example, when I rollover Business Agility, I want to see the Business Agility page. At the moment I just see the item highlighted in blue and then I have to click to see the page. The idea is that the left menu shows pages on rollover, rather than having to click each time to get to a new page.

Hope this is a better explanation.

Bob


Poster: Ruth
Dated: Thursday March 15 2007 - 16:59:04 GMT

Hi,

OK, you can do that, but you will need a js function for opening a page on mouseover, which I can give you, but then you need to decide do you want it to open in a new window, or if you want it to look like that page right now which has a td with text in it right now, to 'match' the Service Attributes item
Code:
<TD class=caseStudyBody><iframe
      <P>We tailor our managed services solutions to deliver a flexible,
      easy-to-manage solution that helps you achieve your company's service
      goals. </P>


you will need to put an iframe in that table cell where you can load the page, otherwise you'd need it to open in a new window, or you can have the mouseover take you to the page, or you can set up a 'submenu' that will look like what you have. The menu can't just 'show' a page as if it were a submenu. Keep in mind, if you choose to use a mouseover that takes you to the page, that can get irritating to users if they happen to accidentally mouseover a link on that left side while they are trying to read the page they just went to since the mouseover will load another page, or reload that page if it is the link they happen to put their mouse on.


What would you like to try?

Ruth


Poster: newbiebob
Dated: Thursday March 15 2007 - 17:22:05 GMT

Hi
I'm just about keeping up, so thank you for your patience and please bear with me. Yes, it needs to look like it does now - a blue line going from whichever item you rollover on the left hand menu to show the relevant page on the right. I would rather keep the pages separate, if possible, rather than have all the various information pages on one scrolling page.

My work day is over now, so I'll pick up again tomorrow. Thanks for your help again.
Bob


Poster: Ruth
Dated: Thursday March 15 2007 - 21:35:31 GMT

Hi Bob,

I wasn't suggesting a div with all the pages on it, but you have to make one of the following choices when you mouseover an item in that side menu to 'show' the page, so the mouseover will:

1. open a new browser window with the page in it

2. load the page in an iframe which you have in that table cell

3. load the page in a 'scrollable' div in that table cell, that is a div that will get scroll bars if the page is too long.

Ruth


Poster: newbiebob
Dated: Friday March 16 2007 - 10:00:47 GMT

Hi Ruth,

I was a bit tired yesterday and missed your point about accidentally mouse-over-ing a link. I agree with you, but the guys here say that people are fed up with having to click so much to get to so many pages, so they asked me to change the function..Maybe a navigation redesign is a better option in the long term.

I now understand the difference between an iframe and a div. I need the 2nd option: load the page in an iframe which I have in the table cell. I doubt I will need scroll bars, as the idea is to keep the information short and concise with good editing.

Thanks

Bob


Poster: Ruth
Dated: Friday March 16 2007 - 17:44:24 GMT

Hi,

The iframe and the div are pretty easy, though you will need a bit of redesign to get that set up, and you cannot get the blue highlight going across the item to the iframe [or div] since you're only mousing over the item and when you remove the mouse, the item goes back to the mouse off state.

OK, here's the page code with the changes in it, note that the area that had the header for the Service and the two rows below on that side have now become a rowspan=3 to take up that whole area on the right and contains the code for opening the iframe and the iframe which I put an id and a name, since I think some of the old browsers used id and others name.
.
Code:
<A name=top>
<TABLE class=mainTable cellSpacing=0 cellPadding=0 align=center>
  <COLGROUP>
  <COL width=161>
  <COL width=594></COLGROUP>
  <TBODY>
  <TR>
    <TD class=header colSpan=2>
      <TABLE class=logoTable cellSpacing=0 cellPadding=0>
        <TBODY>
        <TR>
          <TD class=logo></TD></TR>
        <TR class=menu>
          <TD
          style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: top; PADDING-TOP: 0px; TEXT-ALIGN: left">
            <SCRIPT src="menu_data.js"
            type=text/javascript></SCRIPT>
          </TD></TR></TBODY></TABLE></TD></TR>
  <TR >
    <TD class=leftMenu> </TD>
    <TD class=caseStudyBody rowspan=3 valign="top" height=100%>
   <script>
function openIFrame(iFrameId,winURL)
{
   ifId=gmobj(iFrameId)
   ifId.src=winURL
}

</script>
   <iframe width=100% height=100% id=tempiframe name=tempiframe frameborder=0></iframe>
   </TD></TR>
  <TR class=body>
    <TD class=leftMenu rowSpan=2>
      <SCRIPT src="menu_data_MS_SA-onmouse-iframe.js" type=text/javascript></SCRIPT>
    </TD>
    </TR>
  <TR class=body>
   
      <TABLE class=linksTable>
        <TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE>
      
<TABLE class=mainTable cellSpacing=0 cellPadding=0 align=center>
  <TBODY>
  <TR class=body>
    <TD colSpan=5></TD></TR>
  <TR class=body>
    <TD style="BORDER-TOP: #cccddc 2px dotted; MARGIN-TOP: 20px; WIDTH: 755px"
    colSpan=5>Copyright Virtual Access (Ireland) Ltd 2005. All rights
      reserved. </TD></TR></TBODY></TABLE></A>


Then you need to add these to the style sheet, this fixes the insert pages to look like that area does now with a header bgimage and the blue color, I don't know why but I couldn't get it to work by using mainTable when I had to make the new pages that would be the 'inserts' to the iframe.


Code:
TABLE.mainTable1 {
   BORDER-RIGHT: medium none; BORDER-TOP: medium none; FONT-SIZE: 12px; BORDER-LEFT: medium none; WIDTH: 594px; HEIGHT: 100%; BORDER-BOTTOM: medium none; FONT-FAMILY: Arial, Helvetica, sans-serif
}
TABLE.mainTable1 TR.frontHead {
   FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000033; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 18px; TEXT-ALIGN: center
}
TABLE.mainTable1 TR.frontHead TD.caseStudyBody {
   PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(casestudyheader.jpg); VERTICAL-ALIGN: top; WIDTH: 594px; COLOR: #000033; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
TABLE.mainTable1 TR.body TD {
   PADDING-RIGHT: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px; VERTICAL-ALIGN: top; COLOR: #000033; PADDING-TOP: 5px
}
TABLE.mainTable1 TR.body TD.caseStudyBody {
   FONT-SIZE: 11px; VERTICAL-ALIGN: top; WIDTH: 594px; COLOR: #000033; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #e8f6fd; TEXT-ALIGN: left;padding:5px;
}


and you need to add the link styling to the following styles otherwise the left menu gets underline and link blue as the color instead of what it has, I believe the reason for that is that in the menu file you are going to be using html code as the link.

Code:
TABLE.mainTable TR.body TD.leftMenu TD A:link {
   COLOR: #200C60; TEXT-DECORATION:none;
}

TABLE.mainTable TR.body TD.leftMenu TD A:hover {
   COLOR: #200C60; TEXT-DECORATION:none;
}
TABLE.mainTable TR.body TD.leftMenu TD A:visited {
   COLOR: #200C60; TEXT-DECORATION:none;
}


Next you have to make different pages to load in the iframe unless you want to load the whole page in it with the top menu and such which I doubt you want to do.

So, I made the following as a page layout for those pages you want to load. I didn't do anything with title or what you have as doctype and such you'll need to do that. The following is for the MsServAttrib page, and what I did for all of them was just save them as, for example, MsServAttrib-insert as the page name.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
   <title>Untitled</title>
   <LINK href="VA_Styles.css" type=text/css rel=stylesheet>
   <style type=text/css>
   body{margin:0px}
   </style>
</head>

<body>

<TABLE  class=mainTable1 BORDER=0 CELLPADDING=2 CELLSPACING=0>
  <TR class=frontHead>
    <TD class=caseStudyBody>Service Attributes Overview</TD></TR>
  <TR class=body>
   
    <TD class=caseStudyBody>We tailor our managed services solutions to deliver
      a flexible, easy-to-manage solution that helps you achieve your company's
      service goals.
      <P>
       
      <P>
       
      <P>
       </TD>
   
  </TR>
</TABLE>

</body>
</html>


Once all that is done, your menu_data_MS_SA.js becomes the following

Code:
with (milonic = new menuname("Menu3rdLevelMSSA")){
position= "relative";
noSubImageSpacing= true;
buildAllMenus= true;
alwaysvisible= 1;
orientation= "vertical";
style= menuStyle3rd;
aI("text=<a href=\"MsServAttrib-insert.htm\"onmouseover=\"parent.tempiframe.location='MsServAttrib-insert.htm';\">Service Attributes Overview</a>;pagematch=MsServAttrib.htm;type=html;");
aI("text=<a href=\"MsBusAgil-insert.htm\"onmouseover=\"parent.tempiframe.location='MsBusAgil-insert.htm';\">Business Agility</a>;pagematch=MsBusAgil.htm;type=html;");
aI("text=<a href=\"MsRapServCre-insert.htm\"onmouseover=\"parent.tempiframe.location='MsRapServCre-insert.htm';\">Rapid Service creation</a>;pagematch=MsRapServCre.htm;type=html;");
aI("text=<a href=\"MsVersatility.htm\"onmouseover=\"parent.tempiframe.location='MsVersatility.htm';\">Versatility</a>;pagematch=MsVersatility.htm;type=html;");
aI("text=<a href=\"MsZeroTouch.htm\"onmouseover=\"parent.tempiframe.location='MsZeroTouch.htm';\">Zero Touch Deployment</a>;pagematch=MsZeroTouch.htm;type=html;");
aI("text=<a href=\"MsProMon.htm\"onmouseover=\"parent.tempiframe.location='MsProMon.htm';\">Proactive Monitoring</a>;pagematch=MsProMon.htm;type=html;");
aI("text=<a href=\"MsScalability.htm\"onmouseover=\"parent.tempiframe.location='MsScalability.htm';\">Scalability</a>;pagematch=MsScalability.htm;type=html;");
   
}

drawMenus();


So, that is the iframe setup and when you mouseover an item on the left menu it will load the page in the iframe.

It is easier for the div, in the place you have now for the iframe, you'd create 7 div, equal to the number of items you have in the left menu. Then in each div you'd put in the corresponding 'insert' page table with the info you want. Then there is a function for showing and hiding divs, and you'd use that and when you moused over an item it show the corresponding div. If you want that let me know, though again, this won't allow for the blue line across to the 'div' You are only going to get that with a click, unless you can figure a way to somehow get it into the function which is opening the pages in the iframe on mouseover and that is beyond my knowledge of any js.

Ruth


Poster: newbiebob
Dated: Tuesday March 20 2007 - 9:42:16 GMT

Hi Ruth,

You have done an incredible amount of work. Thank you so much for going to the trouble of providing such an indepth explanation.

I'm feeling fairly daunted by it at the moment and so I'm interested to see how the div code differs. Which option would you choose? You say the div solution is easier, so I may feel less daunted if I take that route.

Would it be too much trouble for you to help me with a div solution too?

Thanks again,

Bob


Poster: Ruth
Dated: Tuesday March 20 2007 - 18:02:44 GMT

Hi,

It's not a problem, I'll get something up today. The div solution will have the same limitations as to the pretty blue color going across. That's done from page matching, and whether using iframes or divs you can't use that.

Give me a bit of time to get this together and I'll post it for you.

Ruth


Poster: Ruth
Dated: Tuesday March 20 2007 - 20:13:30 GMT

Hi Bob,

I have one question as I'm setting this up. Is there a reason to have the left menu, instead of just using the top menu to do what you want? I guess I mean is there a reason to have two menus?

The reason I ask is that you could set up the top menu so that the 'matching' submenu is automatically open when you reach the related page. So, in the top menu if you get to the MsServAttrib.htm page you could set it up so that the submenu for Managed Services is open and available.

Ruth


Poster: Ruth
Dated: Tuesday March 20 2007 - 21:06:23 GMT

Hi Bob,

Sorry, I'll get it up, but I can't do it before late tonight. Sorry.

Ruth


Poster: Ruth
Dated: Wednesday March 21 2007 - 3:15:22 GMT

Hi Bob,

Well, here it is. I'm just going to post the whole html code and the data code, it's easier that way. Since this uses divs it is not loading pages so you don't need the insert pages the same as for the iframe, all the content is on the one page. There is no way to have page highlighting to work at all with this, as far as I know. I'm working on getting it to work with the other option, the iframe option.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<?xml version="1.0" encoding="iso-8859-1"?><HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Virtual Access</TITLE><LINK
href="favicon.ico" type=image/x-icon rel="Shortcut Icon">
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK
href="VA_Styles.css" type=text/css rel=stylesheet>

<!--Switching the divs function for the left menu to open different divs on mouseover of items-->

<script type="text/javascript">function switch1(div) {
var option=['zero','one','two','three','four','five','six','seven'];
for(var i=0; i<option.length; i++) {
  if (document.getElementById(option[i])) {
  obj=document.getElementById(option[i]);
  obj.style.display=(option[i]==div)? "block" : "none";
  }
}
}

window.onload=function () {switch1('zero');}</script>

<!-- End Switching div function-->

<SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>

<SCRIPT src="mmenudom.js" type=text/javascript></SCRIPT>

<META content="MSHTML 5.50.4807.2300" name=GENERATOR></HEAD>
<BODY>
<A name=top>
<TABLE class=mainTable cellSpacing=0 cellPadding=0 align=center>
  <COLGROUP>
  <COL width=161>
  <COL width=594></COLGROUP>
  <TBODY>
  <TR>
    <TD class=header colSpan=2>
      <TABLE class=logoTable cellSpacing=0 cellPadding=0>
        <TBODY>
        <TR>
          <TD class=logo></TD></TR>
        <TR class=menu>
          <TD
          style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: top; PADDING-TOP: 0px; TEXT-ALIGN: left">
            <SCRIPT src="menu_data.js"
            type=text/javascript></SCRIPT>
          </TD></TR></TBODY></TABLE></TD></TR>
  <TR >
    <TD class=leftMenu> </TD>
    <TD class=caseStudyBody rowspan=3 valign="top" height=100%>
   <div id="zero">
<TABLE  class=mainTable1 BORDER=0  CELLPADDING=0 CELLSPACING=0>
  <TR class=frontHead>
    <TD class=caseStudyBody>Managed Services</TD></TR>
  <TR class=body>
   
    <TD class=caseStudyBody><p>Managed Services etc etc etc.</p>
   <p>I just set this up as an 'intro' for this
   area. Mouse over the menu items at left to see this div change. The one you see now is what will
   load on page opening but once you mouse over a menu item this will not reappear unless the page
   is reloaded. It's easy to remove.</p>
   <p>1. in the function
   in the head of the page remove the 'zero' and the comma after it, in the part that says var
   option=['zero','one', etc.</p>
    <p>2. In the second area below that function where it says window.onload=function ()
    {switch1('zero'), change zero to one.</p>
    <p>3. Remove this complete div starting from div id=zero and the closing /div tag.  The menu
    doesn't control this it was a 'welcome to Managed Services type opening div when the page loads.</p>
      <P>
       
      <P>
       
      <P>
       </TD>
   
  </TR>
</TABLE>
</div>
   <div id="one">
<TABLE  class=mainTable1 BORDER=0  CELLPADDING=0 CELLSPACING=0>
  <TR class=frontHead>
    <TD class=caseStudyBody>Service Attributes Overview</TD></TR>
  <TR class=body>
   
    <TD class=caseStudyBody>We tailor our managed services solutions to deliver
      a flexible, easy-to-manage solution that helps you achieve your company's
      service goals.
      <P>
       
      <P>
       
      <P>
       </TD>
   
  </TR>
</TABLE>
</div>
<div id="two">
<TABLE  class=mainTable1 BORDER=0 CELLPADDING=2 CELLSPACING=0>
  <TR class=frontHead>
    <TD class=caseStudyBody>Business Agility </TD></TR>
  <TR class=body>
   
    <TD class=caseStudyBody><p>Rapid deployment is key to business
agility. Our service delivery models, IP-Touch and IP-Select, offer you the choice
of how much control you maintain. </p>
<p>Do you need to rapidly deploy new services
while minimising set-up costs? Then IP-Touch offers you the speed to market, minimised
captial exposure, and lightness of touch that help you achieve your business goals.</p>
<p>Do you want to maintain control of the delivery environment for your services? Then
IP-Select gives you the control you require while allowing you to exactly tailor
customer premises equipment (CPE) to your customers' needs. Tailored CPE enables
you to meet the requirements of even the most demanding customer.</p>
<p> </p>
<p> </p>
<p> </p>

       </TD>
   
  </TR>
</TABLE>
</div>
<div id="three">
<TABLE  class=mainTable1 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  <TR class=frontHead>
    <TD class=caseStudyBody>Rapid Service Creation </TD></TR>
  <TR class=body>
   
    <TD class=caseStudyBody><p>All Virtual Access managed service models simplify the creation and deployment of new services, which minimises the costs associated with service deployment and on-going service management.</p>
      <p>There are two major components to the solution: the customer premises equipment (CPE) appliance and the Activator service management system.</p>
      <p>The CPE appliance, the Service Managed Gateway (SMG), is a solid-state appliance that performs the functions of WAN attachment, Routing, Firewall, VPN traffic shaping, and VoIP proxy services.</p>
      <p>The Activator management system is at the core of the service management architecture. A selection of service profiles that define the major parameters of the CPE configuration can be created as templates, each of which can relate to large numbers of devices. End-customer-specific parameters such as username, passwords, and IP address ranges are created as quick pages and applied to a service template to create a unique service configuration for a specific CPE appliance.</p>
       <p>Service configuration records are stored within the central Activator database and are downloaded to each appliance. Changes to a group of configurations can be made once, centrally, and automatically applied to every relevant configuration record within the system.</p>
        <p>The Activator deployment methodology reduces handling costs to bring business benefits. CPE appliances can be manufactured, stored, and shipped to the end customer directly without unpacking, configuring, and repacking the unit prior to shipment. </p>
</TD>
   
  </TR>
</TABLE>
</div>
<div id="four">
<TABLE  class=mainTable1 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  <TR class=frontHead>
    <TD class=caseStudyBody>Versatility</TD></TR>
  <TR class=body>
   
    <TD class=caseStudyBody><p>The Virtual Access solutions for managed services are supremely versatile. The core attributes of the service—the SMG appliance, Activator centralised service provisioning, and Zero Touch deployment—address the needs of many various markets.</p>
      <p>The managed broadband security solution centres around service provider needs for business-grade broadband security. It incorporates stateful inspection in the firewall, LAN segmentation, intrusion reporting, QoS management, and URL and content filtering.</p>
      <p>Site-to-site IPsec VPN is a ready-made solution for retail, remote branch office, and corporate teleworking applications. It is deployed and managed centrally for both star and mesh VPN topologies.</p>
      <p>Virtual Access managed services provide a cost-effective centrally-managed CPE solution that is compatible with the core service functions that are required in MPLS environments.</p>
       <p>Converged voice and data services provide a clear business benefit to the service provider who needs to offer converged services over a single low-cost broad connection with no QoS at its core. The patent-pending Virtual Access Clearway technology, which enables the SMG to manage both upstream and downstream jitter, provides QoS capability that can be managed from the edge of the network. </p>
</TD>
   
  </TR>
</TABLE>
</div>
<div id="five">
<TABLE  class=mainTable1 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  <TR class=frontHead>
    <TD class=caseStudyBody>Zero Touch Deployment</TD></TR>
  <TR class=body>
   
    <TD class=caseStudyBody><p>Unique Zero Touch appliance configuration removes the need for complex configuration setups either before a unit is dispatched or at the customer premises.</p>
      <p>We deploy units with standard factory configurations that enable automatic initial connection to the central Activator provisioning system.
When a unit connects to the Activator system for the first time, the customer-specific configuration file is automatically downloaded over the broadband connection. Field unit replacement is facilitated by the exact same process.
</p>
      <p>Zero Touch brings business benefits because it minimises appliance implementation costs. Savings result from facilitating customer self-installation or using unskilled installation agents such as technical couriers to perform on-site initial installations or unit replacements. </p>
      <p> </p>
</TD>
   
  </TR>
</TABLE>
</div>
<div id="six">
<TABLE  class=mainTable1 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  <TR class=frontHead>
    <TD class=caseStudyBody>Proactive Monitoring </TD></TR>
  <TR class=body>
   
    <TD class=caseStudyBody><p>Virtual Access managed services incorporate a sophisticated service monitoring function that is simply named Monitor.</p>
      <p>Monitor is a hosted system, which allows Service Provider support teams to actively monitor Service Managed Gateways (SMGs) and SMG teleworker devices.
The main features of Monitor are:
</p>
      <p>Device heartbeats:   Real-time up and down status of SMG appliances.</p>
      <p>Real-time statistics:   Access to the SMG applets which gather system utilization and diagnostic information.</p>
      <p>Intrusion reporting :     Access to SMG generated firewall intrusion events</p>
      <p>Historical statistics :    Optional access to archived firewall and system utilization reports.</p>
      <p>The Monitor function provides significant business benefits in a service-provider-centric operation. Web-based real-time data and statistics for deployed appliances provide a cost-effective means for remote diagnosis of site-related problems and SLA management.</p>
      <p> </p>
</TD>
   
  </TR>
</TABLE>
</div>
<div id="seven">
<TABLE  class=mainTable1 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  <TR class=frontHead>
    <TD class=caseStudyBody>Scalability</TD></TR>
  <TR class=body>
   
    <TD class=caseStudyBody><p>Our managed service model is supremely scalable. </p>
      <p>Activator is the service management application at the core of our solution. It provides centralised service provisioning and management functions that are based on an SQL database.</p>
      <p>A single Activator database can scale up to approximately 250,000 manageable nodes. </p>
     <a href="www.virtualaccess.com/pdf/DSHT_Activator.pdf" target="new">Read more about Activator </a>
</TD>
   
  </TR>
</TABLE>
</div>
   </TD></TR>
  <TR class=body>
    <TD class=leftMenu rowSpan=2 valign='top'>
      <SCRIPT src="menu_data_MS_SA-switch.js" type=text/javascript></SCRIPT>
    </TD>
    </TR>
  <TR class=body>
   
      <TABLE class=linksTable>
        <TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE>
      
<TABLE class=mainTable cellSpacing=0 cellPadding=0 align=center>
  <TBODY>
  <TR class=body>
    <TD colSpan=5></TD></TR>
  <TR class=body>
    <TD style="BORDER-TOP: #cccddc 2px dotted; MARGIN-TOP: 20px; WIDTH: 755px"
    colSpan=5>Copyright Virtual Access (Ireland) Ltd 2005. All rights
      reserved. </TD></TR></TBODY></TABLE></A></BODY></HTML>


this is the new css file, the same additions with that mainTable1 and such as before

Code:
TABLE.mainTable {
   BORDER-RIGHT: medium none; BORDER-TOP: medium none; FONT-SIZE: 10px; BORDER-LEFT: medium none; WIDTH: 755px; BORDER-BOTTOM: medium none; FONT-FAMILY: Arial, Helvetica, sans-serif
}
TABLE.mainTable1 {
   BORDER-RIGHT: medium none; BORDER-TOP: medium none; FONT-SIZE: 12px; BORDER-LEFT: medium none; WIDTH: 594px; HEIGHT: 100%; BORDER-BOTTOM: medium none; FONT-FAMILY: Arial, Helvetica, sans-serif
}
TABLE.mainTable TR.header TABLE.logoTable {
   BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; WIDTH: 100%; BORDER-BOTTOM: medium none
}
TABLE.mainTable TD.logo {
   BACKGROUND-IMAGE: url(logo.gif); VERTICAL-ALIGN: middle; WIDTH: 755px; HEIGHT: 65px; TEXT-ALIGN: left
}
TABLE.mainTable TR.menu {
   VERTICAL-ALIGN: middle; HEIGHT: 72px; TEXT-ALIGN: left
}
TABLE.mainTable TR.banner {
   VERTICAL-ALIGN: middle; HEIGHT: 50px; TEXT-ALIGN: left
}
TABLE.mainTable1 TR.frontHead {
   FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000033; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 18px; TEXT-ALIGN: center
}

TABLE.mainTable TR.frontHead {
   FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000033; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 18px; TEXT-ALIGN: center
}
TABLE.mainTable TR.frontHead TD.largehead {
   BACKGROUND-IMAGE: url(HeadLrg.jpg); WIDTH: 298px
}
TABLE.mainTable TR.frontHead TD.smallhead {
   BACKGROUND-IMAGE: url(HeadSmall.jpg); WIDTH: 127px
}
TABLE.mainTable TR.frontHead TD.colhead {
   BACKGROUND-IMAGE: url(2ColHeader.jpg); WIDTH: 241px
}
TABLE.mainTable TR.frontHead TD.colhead2 {
   BACKGROUND-IMAGE: url(2ColHeader.jpg); WIDTH: 369px
}
TABLE.mainTable TR.frontHead TD.space3 {
   WIDTH: 21px
}
TABLE.mainTable TR.frontHead TD.space16 {
   WIDTH: 16px
}
TABLE.mainTable TR.frontImage TD {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
TABLE.mainTable TR.frontImage TD.space16 {
   BACKGROUND-IMAGE: url(3coldots.gif); WIDTH: 16px
}
TABLE.mainTable TR.frontHead TD.leftMenu {
   WIDTH: 161px
   }

TABLE.mainTable1 TR.frontHead TD.caseStudyBody {
   PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(casestudyheader.jpg); VERTICAL-ALIGN: top; WIDTH: 594px; COLOR: #000033; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}   
TABLE.mainTable TR.frontHead TD.caseStudyBody {
   PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(casestudyheader.jpg); VERTICAL-ALIGN: top; WIDTH: 594px; COLOR: #000033; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
TABLE.mainTable TR.body {
   FONT-SIZE: 11px; VERTICAL-ALIGN: top; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
TABLE.mainTable1 TR.body TD {
   PADDING-RIGHT: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px; VERTICAL-ALIGN: top; COLOR: #000033; PADDING-TOP: 5px
}
TABLE.mainTable TR.body TD {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 5px; VERTICAL-ALIGN: top; COLOR: #000033; PADDING-TOP: 5px
}
TABLE.mainTable TR.body TD.space3 {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: url(3coldots.gif); PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
TABLE.mainTable TR.body TD.space16 {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: url(3coldots.gif); PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
TABLE.mainTable TR.body TD.space21 {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: url(menudots.gif); PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
TABLE.mainTable TR.body TD.leftMenu {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: url(menudots.gif); PADDING-BOTTOM: 0px; WIDTH: 161px; PADDING-TOP: 0px;COLOR: #200C60
}
TABLE.mainTable TR.body TD.leftMenu TD {
   VERTICAL-ALIGN: middle;
}

TABLE.mainTable TR.body TD.leftMenu TD A:link {
   COLOR: #200C60; TEXT-DECORATION:none;
}

TABLE.mainTable TR.body TD.leftMenu TD A:hover {
   COLOR: #200C60; TEXT-DECORATION:none;
}
TABLE.mainTable TR.body TD.leftMenu TD A:visited {
   COLOR: #200C60; TEXT-DECORATION:none;
}

TABLE.mainTable TR.frontHead TD.overview {
   PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(overviewhead.jpg); VERTICAL-ALIGN: top; WIDTH: 755px; COLOR: #000033; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
TABLE.mainTable TR.body TD.overview {
   FONT-SIZE: 11px; VERTICAL-ALIGN: top; WIDTH: 755px; COLOR: #000033; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #e8f6fd; TEXT-ALIGN: left
}
TABLE.mainTable TR.body TD.overviewImg {
   WIDTH: 380px; HEIGHT: 240px; BACKGROUND-COLOR: #e8f6fd
}
TABLE.mainTable1 TR.body TD.caseStudyBody {
   FONT-SIZE: 11px; VERTICAL-ALIGN: top; WIDTH: 594px; COLOR: #000033; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #e8f6fd; TEXT-ALIGN: left;padding:5px;
}

TABLE.mainTable TR.body TD.caseStudyBody {
   FONT-SIZE: 11px; VERTICAL-ALIGN: top; WIDTH: 594px; COLOR: #000033; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #e8f6fd; TEXT-ALIGN: left
}
TABLE.mainTable TR.body TD.caseStudyBodyImg {
   WIDTH: 170px; BACKGROUND-COLOR: #e8f6fd
}
TABLE.mainTable TR.body TD.caseStudyBodyText {
   FONT-SIZE: 11px; VERTICAL-ALIGN: top; WIDTH: 324px; COLOR: #000033; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #e8f6fd; TEXT-ALIGN: left
}
TABLE.mainTable TR.body TD.caseStudyBody SPAN.subHeading {
   FONT-WEIGHT: bold
}
TABLE.mainTable TR.body TD A {
   FONT-SIZE: 11px; COLOR: #00337f; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif
}
TABLE.mainTable TR.body TD A:hover {
   COLOR: #00a3dd
}
TABLE.mainTable TR.body TD A:visited {
   COLOR: #00a3dd
}
TABLE.mainTable TR.body TABLE.linksTable {
   WIDTH: 250px; HEIGHT: 36px
}
TABLE.mainTable TR.body TABLE.linksTable TD {
   VERTICAL-ALIGN: middle; COLOR: #00a3dd; TEXT-ALIGN: center
}
TABLE.mainTable TR.body TD.scrollBody {
   FONT-SIZE: 11px; VERTICAL-ALIGN: top; WIDTH: 594px; COLOR: #000033; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #e8f6fd; TEXT-ALIGN: left
}
TABLE.mainTable TR.body TD.scrollBody TABLE.faq {
   MARGIN-BOTTOM: 10px; WIDTH: 594px; BORDER-BOTTOM: #cccddc 2px dotted
}
TABLE.mainTable TR.body TD.scrollBody TABLE.faq TD.image {
   VERTICAL-ALIGN: top; WIDTH: 43px
}
TABLE.mainTable TR.body TD.scrollBody TABLE.faq TD.text {
   VERTICAL-ALIGN: top
}
TABLE.mainTable TR.body TD.scrollBody TABLE.faq TD.last {
   VERTICAL-ALIGN: top; TEXT-ALIGN: right
}
TABLE.mainTable TR.frontHead TD.caseStudyBody P {
   PADDING-RIGHT: 5px; PADDING-LEFT: 5px
}
TABLE.mainTable TR.body TD.caseStudyBody P {
   PADDING-RIGHT: 5px; PADDING-LEFT: 5px
}
TABLE.mainTable TR.body TD.scrollBody TABLE.faq TD.text P {
   PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif
}
TABLE.mainTable TR.body TD.overview P {
   PADDING-RIGHT: 5px; PADDING-LEFT: 5px
}
.highlight {
   BACKGROUND: #ffff40
}
.searchheading {
   FONT-WEIGHT: bold; FONT-SIZE: 12px
}
.summary {
   FONT-SIZE: 11px; FONT-STYLE: italic
}
.results {
   FONT-SIZE: 11px
}
.category {
   COLOR: #999999
}
.description {
   FONT-SIZE: 11px; COLOR: #008000
}
.context {
   FONT-SIZE: 11px
}
.infoline {
   FONT-SIZE: 11px; COLOR: #808080; FONT-STYLE: normal
}
.sorting {
   TEXT-ALIGN: right
}
.result_title {
   FONT-SIZE: 12px
}
.zoom_searchform {
   FONT-SIZE: 11px
}
.zoom_options {
   FONT-SIZE: 11px
}
INPUT.zoom_button {
   
}
INPUT.zoom_searchbox {
   
}


This is the data file for that left menu

Code:
with (milonic = new menuname("Menu3rdLevelMSSA"))
{
position          = "relative";
noSubImageSpacing = true;
buildAllMenus     = true;
alwaysvisible     = 1;
orientation       = "vertical";
style             = menuStyle3rd;
aI("text=Service Attributes Overview;onfunction=switch1('one');");
aI("text=Business Agility;onfunction=switch1('two');");
aI("text=Rapid Service creation;onfunction=switch1('three');");
aI("text=Versatility;onfunction=switch1('four');");
aI("text=Zero Touch Deployment;onfunction=switch1('five');");
aI("text=Proactive Monitoring;onfunction=switch1('six');");
aI("text=Scalability;onfunction=switch1('seven');");
}

drawMenus();


Hope this helps.

Ruth


Poster: newbiebob
Dated: Wednesday March 21 2007 - 9:47:42 GMT

Hi Ruth,

Thank you for all your work - again. I had to leave the web site project to work on other stuff, so I didn't get a chance to look at the rollover menu issue yesterday.

I see what you mean re your query: [Is there a reason to have the left menu, instead of just using the top menu to do what you want?] Yes, I do very much like the idea of having everything more easily accessible. I had that objective in mind when I mentioned re-design in the long term, a few posts ago. However, the menu we are changing is a 3rd level menu that is reached by the second level menu in the top menu bar. You can see why people are fed up of clicking!

I haven't concentrated on that option, but it is definately worth thinking about.

I need to implement all your good work and see what works best for the guys here. Give me a few days, as I know I'm going to be busy on other issues - non-menu related - for a day or two.

Thank you again. Bobbie.

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