Multiple Coloured Menu Padding

[Tessa]

Thanks Kevin for all that. A lot to digest! I have just looked at your example and when you click on a submenu item, that submenu still doesn't appear to be staying put. ie, as soon as you move the mouse off that submenu, it goes again. I am wanting the submenu (while in that particular section whether it be 2 or more pages for each section) to stay popped up, so that the visitor can always see the other pages for that section instead of just the mouse-over.

[Ruth]

Tessa, Kevin's is the much better way to do it, much cleaner using the js functions.

As to why yours was all messed up, I don't know. If you can put up one page someplace as a test that you had up I can check it if you want to know, but using Kevin's would be a lot easier I think. Then you dont' have to mess with tables and such. I won't be able to check anything for a couple of days.

Ruth

[kevin3442]

Hi Tessa,

...when you click on a submenu item, that submenu still doesn't appear to be staying put. ie, as soon as you move the mouse off that submenu, it goes again...

Sorry 'bout that. I guess I didn;'t read enough of the previous posts to get that part of it. I thought you just wanted the submenu to open automatically when the page opened, but then close again as a normal submenu when one of the others opened. No problem though at this point... just a few changes in the main function. Here's an updated autoOpenSubmenu() function; use it instead of the one in my previous Post (I took the opportunity to tighten it up some too, so I believe the new version is actually a little smaller).

Code: Select all

function autoOpenSubmenu()
{
  topOffset = -1;
  resetSubmenus();
  clickedItemNum = location.search.slice(1);
  mainItemNum = getParentItemByItem(clickedItemNum);
  clickedItemPos = gpos(gmobj("el" + mainItemNum));
  menuNum = getMenuByItem(clickedItemNum);
  menuObj = gmobj("menu" + menuNum);
  menuPos = gpos(menuObj);
  menuPos[0] = clickedItemPos[0] - menuPos[2] + topOffset;
  menuPos[1] = clickedItemPos[1];
  spos(menuObj,menuPos[0],menuPos[1]);
  _m[menuNum][7] = 1;
  popup(_mi[mainItemNum][3]);
}

I've also updated the on-line example, as well as the downloadable .zip. Let us know how it goes.

Kevin

[Tessa]

Hi Kevin,

Thanks heaps for that. Your example page is exactly what I want. I will be working on this either today or tomorrow, the soonest I can get to it!

Will let you know.

Tessa

[Tessa]

Kevin,

Could you please have a look at the site again. I have gone back to the menu_data.js file and pasted in your latest code, then I added onload="resetSubmenus()" in the home page as per your third instruction, but this as far as I have got as I am not quite sure what to do next. In your fourth instruction, do I have to put in url=javascript:openUrl('pagename.htm');); ?? And with the pagename, do I put in the whole url ie, http://www.skycabs.co.nz/index.htm, or just the file name - index.htm, or http://www.skycabs.co.nz/index.htm. Please let me know.

And in your fifth instruction, do I put that code in each and every page? That part I am a bit confused on too.

Thanks

Tessa

[kevin3442]

Hi Tessa,

...In your fourth instruction, do I have to put in url=javascript:openUrl('pagename.htm');); ?? And with the pagename, do I put in the whole url ie, http://www.skycabs.co.nz/index.htm, or just the file name - index.htm, or http://www.skycabs.co.nz/index.htm....

You can put it just like you would if you were using the url= property in a standard aI() definition. So, if you would normally define a menu item like this:

Code: Select all

aI("text=Products;url=/products/productlist.htm;");

then "our" method would be:

Code: Select all

aI("text=Products;url=javascript:openUrl('/products/productlist.htm');");

I'd also note that you shouldn't have to include the full domain, etc. In other words, if you would use a url of http://www.skycabs.co.nz/index.htm then a url of /index.htm should do the same (assuming that http://www.skycabs.co.nz is your site).

...And in your fifth instruction, do I put that code in each and every page?

You need to add the onload code inside the <body> tag on any page where you want the corresponding submenu to open automatically. If you have a page where you don't want the submenu to open, then leave the onload code out.

Hope that helps,

Kevin

[Tessa]

Hi Kevin,

Still having trouble I'm afraid and I suspect it's because there are the original codes plus yours that are clashing. Below is the whole menu that I have pasted here to show you what I did. I also put the onload='autoOpenSubmenu()" in all pages but the home page. For now, I have put the site back to how it was, but below is what I did following your instructions. Please let me know what I have done wrong.

function autoOpenSubmenu()
{
topOffset = -1;
resetSubmenus();
clickedItemNum = location.search.slice(1);
mainItemNum = getParentItemByItem(clickedItemNum);
clickedItemPos = gpos(gmobj("el" + mainItemNum));
menuNum = getMenuByItem(clickedItemNum);
menuObj = gmobj("menu" + menuNum);
menuPos = gpos(menuObj);
menuPos[0] = clickedItemPos[0] - menuPos[2] + topOffset;
menuPos[1] = clickedItemPos[1];
spos(menuObj,menuPos[0],menuPos[1]);
_m[menuNum][7] = 1;
popup(_mi[mainItemNum][3]);
}
_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=5 // Sub menu top offset
_subOffsetLeft=-10 // Sub menu left offset



with(menuStyle=new mm_style()){
//onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="white";
offcolor="#515151";
bordercolor="#296488";
ondecoration="underline";
borderstyle="solid";
borderwidth=0;
separatorcolor="#2D729D";
separatorsize="0";
separatorwidth="60";
padding=5;
fontsize="80%";
fontstyle="normal";
fontweight="bold";
fontfamily="Arial";
align="center";
pagecolor="black";
//pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}

with(EasySampleStyle=new mm_style()){
onbgcolor="#38A4D5";
oncolor="#ffffff";
offbgcolor="#38A4D5";
offcolor="#FFFFFF";
bordercolor="#000000";
ondecoration="underline";
borderstyle="solid";
borderwidth=0;
separatorsize="0";
padding=5;
fontsize="12px";
fontstyle="normal";
fontweight="normal";
fontfamily="Arial";
}

with(MilonicStyle=new mm_style()){
onbgcolor="#E60078";
oncolor="#ffffff";
offbgcolor="#E60078";
offcolor="#FFFFFF";
bordercolor="#000000";
ondecoration="underline";
borderstyle="solid";
borderwidth=0;
separatorsize="0";
padding=5;
fontsize="12px";
fontstyle="normal";
fontweight="normal";
fontfamily="Arial";
}

with(PartnersStyle=new mm_style()){
onbgcolor="#009B7C";
oncolor="#ffffff";
offbgcolor="#009B7C";
offcolor="#ffffff";
bordercolor="#000000";
ondecoration="underline";
borderstyle="solid";
borderwidth=0;
separatorsize="0";
padding=5;
fontsize="12px";
fontstyle="normal";
fontweight="normal";
fontfamily="Arial";
}

with(LinkStyle=new mm_style()){
onbgcolor="#F47919";
oncolor="#ffffff";
offbgcolor="#F47919";
offcolor="#ffffff";
bordercolor="#000000";
ondecoration="underline";
borderstyle="solid";
borderwidth=0;
separatorsize="0";
padding=5;
fontsize="12px";
fontstyle="normal";
fontweight="normal";
fontfamily="Arial";
}


with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=170;
alwaysvisible=1;
itemwidth="100%";
menualign="center";
orientation="horizontal";
aI("text=SkyCabs;url=javascript:openUrl('http://www.skycabs.co.nz');status=Your Destination, Our Goal;showmenu=Samples;oncolor=#ffffff;offcolor=#ffffff;offbgcolor=#38A4D5;onbgcolor=#38A4D5;");
aI("text=Global Case Studies;showmenu=Milonic;oncolor=#ffffff;offcolor=#ffffff;offbgcolor=#E60078;onbgcolor=#E60078;");
aI("text=Global Potential;showmenu=Partners;oncolor=#ffffff;offcolor=#ffffff;offbgcolor=#009B7C;onbgcolor=#009B7C;");
aI("text=Contact Us;showmenu=Links;oncolor=#ffffff;offcolor=#ffffff;offbgcolor=#F47919;onbgcolor=#F47919;");
}

with(milonic=new menuname("Samples")){
style=EasySampleStyle;
overflow="scroll";
openstyle="up";
aI("text=Product Description;url=javascript:openUrl('http://www.skycabs.co.nz/Product.htm');status=Product Description;");
aI("text=Advantages;url=javascript:openUrl('http://www.skycabs.co.nz/Advantages.htm');status=SkyCabs Advantages;");
aI("text=Environment;url=javascript:openUrl('http://www.skycabs.co.nz/Environment.htm');status=In Harmony with the Environment;");
}

with(milonic=new menuname("Milonic")){
style=MilonicStyle;
openstyle="up";
aI("text=SkyCabs for Auckland;url=javascript:openUrl('http://www.skycabs.co.nz/Auckland.htm');status=SkyCabs for Auckland;");
aI("text=Global Rail Examples;url=javascript:openUrl('http://www.skycabs.co.nz/railexamples.htm');status=Global Rail Examples;");
}

with(milonic=new menuname("Partners")){
style=PartnersStyle;
openstyle="up";
aI("text=New Solutions;url=javascript:openUrl('http://www.skycabs.co.nz/newsolution.htm');status=New Solution;");
aI("text=Market Potential;url=javascript:openUrl('http://www.skycabs.co.nz/marketpotential.htm');status=Market Potential;");
aI("text=Target Market;url=javascript:openUrl('http://www.skycabs.co.nz/targetmarket.htm');status=Target Market;");
aI("text=Industry Comparison;url=javascript:openUrl('http://www.skycabs.co.nz/industrycomparison.htm');status=Industry Comparison;");
}

with(milonic=new menuname("Links")){
style=LinkStyle;
openstyle="up";
aI("text=About Us;url=javascript:openUrl('http://www.skycabs.co.nz/aboutus.htm');status=About SkyCabs - Our Company;");
aI("text=Your Interest;url=javascript:openUrl('http://www.skycabs.co.nz/your details.htm');status=Your Interest and Contact Details;");
}



drawMenus();

[kevin3442]

Hi Tessa,

...I suspect it's because there are the original codes plus yours that are clashing...below is what I did following your instructions.

I see that you've got the modified version (second one posted) of the autoOpenSubmenu() function in your menu_data.js file. Good. However, if you review instruction 2 in my original post, you'll note that there are two other functions that you need to put in menu_data.js: openUrl() and resetSubmenus(). These two functions are missing from the menu_data.js code you posted, so I'll assume that they are not currently in the file. You need all three functions, openUrl(), resetSubmenus(), and autoOpenSubmenu() at the top of your menu_data.js file. openUrl() is the function that you call from a menu item to go to a new page; without it, your menu items simply won't do anything (except generate an "object expected" js error).

So, just to be absolutely clear, and also so that you don't have to go to the other message to get the code for the two missing functions... make sure that all of the following code is at the top of your menu_data.js file.

Code: Select all

function openUrl(url)
{
  url+="?"+_itemRef;
  window.location = url;
}

function resetSubmenus()
{
  for (i = 1; i < _m.length; i++)
  {
    if (_m[i][7]) {
      _m[i][7] = 0;
      _m[i][3] = null;
      _m[i][2] = null;
    }
  }
}

function autoOpenSubmenu()
{
  topOffset = -1;
  resetSubmenus();
  clickedItemNum = location.search.slice(1);
  mainItemNum = getParentItemByItem(clickedItemNum);
  clickedItemPos = gpos(gmobj("el" + mainItemNum));
  menuNum = getMenuByItem(clickedItemNum);
  menuObj = gmobj("menu" + menuNum);
  menuPos = gpos(menuObj);
  menuPos[0] = clickedItemPos[0] - menuPos[2] + topOffset;
  menuPos[1] = clickedItemPos[1];
  spos(menuObj,menuPos[0],menuPos[1]);
  _m[menuNum][7] = 1;
  popup(_mi[mainItemNum][3]);
}

You can copy it right from here and paste it directly into your menu_data.js file.

Hope that helps,

Kevin

[Tessa]

Hi Kevin,

Thanks got that. What I did was pasted your new one thinking that was it, but of course deleted the first two.

Now, if you look at the site http://www.skycabs.co.nz, you will see it is still not doing it. It is how it was ie, the submenus not staying up within each section how you had on your demo.

Did you go through my whole menu_data making sure I hadn't put the other codes in wrong? Maybe I've got the codes wrong in the actual pages.

Please have a look again and let me know. You certainly are being very helpful and I really appreciate it.

Tessa

[kevin3442]

Hi Tessa,

...Did you go through my whole menu_data making sure I hadn't put the other codes in wrong? Maybe I've got the codes wrong in the actual pages....

I admit that I didn't go through all of your code. After seeing the last problem, I just figured that was it. Looking at it more extensively now, I see some more problems:

(1) You forgot to add some code to the submenus. From the original instructions, step 1:

(1) Combine all of your menu definitions back into one menu_data.js file (hopefully, you still have it from earlier). In each submenu, set

Code: Select all

top=-999; 
left=0; 
alwaysvisible=1; 

You have to add the above three lines of code to each submenu.

(2) In the code for your home page, you have:

Code: Select all

<body background="images/background1.jpg" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<onload="resetSubmenus()">
<onload="autoOpenSubmenu()">

There are two problems with this, regarding step 3 from the original instructions:

(3) In your home page, add the following inside the <body> tag:

Code: Select all

onload="resestSubmenus()" 

First, you only need to use resetSubmenus() on the home page, not autoOpenSubmenu(). Second, the onload setting goes inside the <body> tag itself. You currently have it outside of the tag. So, remove the two onload lines that you have below the body tag, and put the onload setting for resetSubmenus() inside the body tag. You code (from above) would become this:

Code: Select all

<body background="images/background1.jpg" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" onload="resetSubmenus()">

(3) You have a similar problem in calling autoOpenSubmenu() on your other pages. You currently have

Code: Select all

<body background="" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<onload="autoOpenSubmenu()">

The onload call to autoOpenSubmenu() should be inside of the <body> tag, like so:

Code: Select all

<body background="" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" onload="autoOpenSubmenu()">

I think that's about it. Give that stuff a try and see how it goes. Remember that there's a downloadable zip file that contains the example I made. You can download it, unzip it to a new foder and run it locally, or open the files in an editor and see where the various codes are applied.

Hope that helps,

Kevin

[Tessa]

Kevin,

Thanks for that. I will try that, but first, I have just found out that my client has a Mac and apparently Macs seem to view sites very differently to PCs. One of things he said was bugging him was that the menu didn't go the full width. As the next bar down (the heading bar) is in a table, this is automatically set on 100% width and so shows fine, hence the menu bar looking stupid for him. Do you know how I can fix this? And then do you know anything about the compatible viewability of sites for both PCs and Macs or do you someone who does? It something I've never come across before.

Thanks for all your help by the way.

Tessa

[kevin3442]

Hi Tessa,

Unfortunately (or fortunately, depending on one's perspective), I am in a "No Mac Zone." There isn't a Mac anywhere in sight, so I don't do Macs. There are, however, other people in the forums who do have access to Macs, and even prefer them for some reason Perhaps one of them can help with Mac issues.

Cheers,

Kevin

[Ruth]

Here's a tool to see how the pages look in safari. You put the url in the place at top where it says URL then click then wait however long it says, I think 30 secs or so. It will provide you with a screenshot of the page, so you can see how the menu looks as you experiment with what needs to be done. iCapture


Ruth

[Tessa]

Hi guys (yet again!),

Can the four colours in the main menu be made equal sizes? ie, I think we had them set at 25% each which was what Ruth recommended but now that I have been using Kevin's codes, now I'm not so sure!! So could either of you help me here?

I am also wanting to reduce the height of the submenus too by half - is this possible?

Thanks

Tessa

[Maz]

Are you using itemwidth and itemheight?
That's where you would normally adjust the sizes.
Menuwidth and menuheight is the whole menu size.

I haven't been following the whole thread.

maz

[Tessa]

Thanks Maz, no, I will need Kevin mainly to answer as it is more in depth, but thanks anyway.

Kevin, I have just found out something else that is a more urgent issue. After looking through the site's pages etc, sometimes I find two or three of the submenus are staying visible over on the lefthand side. Is there any way of ironing out these little problems? My client is such a perfectionist that he is absolutely driving me crazy!!! Mind you, I must admit, this didn't look the best.

Thanks

Tessa

[John]

I've been staying in the background on this one, mainly because the other Team members picked it up first and have been bustin' their backs trying to help you out.

However, getting down towards the end of the current conversation I'm starting to not like what I see. In my view (personal, not Milonic), you don't seem to really be paying attention to the advice you are being given. You're not fully following Kevin's concise directions, and tossing away those given by others; e.g.,...

Thanks Maz, no, I will need Kevin mainly to answer as it is more in depth, but thanks anyway.

While the Team does have individual areas of expertise, the entire Team still does know the menu. Further, since I guess I'm the senior member here, I'll just say I won't have my Team members treated like that. We're all volunteers, we do not work for Milonic, and those folks are trying their best to help you. They are not your slaves.

Chill, back off a bit, READ carefully what they are telling you, and follow the excellent directions. This should not have taken 2 pages.

[Ruth]

The menus that are staying open on the left are the result of not fixing the onload codes on certain pages as Kevin discussed in his post.

Ruth

[Tessa]

Hi Maz,

I have to say that I was truly shocked by your post to me saying that I was treating the team like 'slaves'.

Firstly, I am very new to javascript and have not a lot of knowledge of using it. If you read my previous posts to the team members, you will see how polite I am and give thanks etc. I was amazed at how they have been so willing to help and thought this must just be part of how the forum works. I didn't 'toss' your comment aside as I thought I was very polite to you. I am sorry if you read that incorrectly.

Secondly, when I purchased this menu, I was told it was fully customisable and that I would find full support here on Milonic's site. This is what I thought I was doing and was entitled to.

So, have I been wrong in using the forum? I thought both Kevin and Ruth had been excellent helping me. I know Ruth said she volunteered to do it as she enjoyed it.

If I have tred on anyone's toes or asked too much, please let me know and please accept my apologies. This menu has been one that I have found very difficult and also so happens to be for a very difficult client.

In the meantime, I will go through (again) the notes Kevin supplied and see if I can sort it out finally. But if I do end up needing to ask something, I really hope that's okay.

Tessa

[John]

Tessa, that was my post, not Maz', so you can blame me if you like.

Yes, you are entitled to our support, and this is the right place to ask for it. My problem was two-fold - you were not following the excellent instructions given by the Team, and the comment you made to Maz (mentioned by me in the earlier message) was taken by more than one Team member to be a slap in the face to her after all she was doing to try and help you. If we read your comment in the wrong 'tone', then we apologize.

You are still welcome (and entitled) to ask questions here any time. However, all we ask in return is that you carefully follow the instructions and suggestions given to you (Team members have mentioned a few instances where you did not do what was suggested, even when suggested more than once).

It's new to you, I know, but it's not difficult, especially with the support you have been given. Take a deep breath (we all will!), and these folks will get you going (if you do what they say).

OK