Multiple Coloured Menu Padding

[Tessa]

I am wanting to (I think) pad the menu items, so that the four main menu items I have, fill up the width of the screen, rather than squashed up in the centre with white to the left and right of these. You can see what I mean at http://www.skycabs.co.nz/test.htm

Could someone please let me know what I need to type in these to get it this way?

Thanks

Tessa

[Ruth]

If you insert itemwidth="100%"; in the same place you have menuwidth="100%" the items will expand each taking 25% of the page.

Ruth

[Tessa]

Thanks Ruth for that. Now, how do I get the headings to centre within their item? At present, they are left aligned.

I may actually want to alter the width of the submenus too, so that they match the width of their category they're coming from - what do I type in for each of the sub menus?

And if I want to, can I centre these headings too?

Other than that, looks like I'm away!

Thanks again

[Ruth]

in the menuStyle definition at the top of the data file put in align="center"; that aligns the text to the center of the menu item. If you put it there it will align all text for any menu that uses that style to the center. As to expanding the width of the submenus, since you are using menuwidth="100%" there is no way to figure that out. what you could do is get rid of the menuwidth 100% and instead make the itemwidth=180; and put in screenposition="center"; what that would do is put the menu in the center of that blue Skycabs section no matter what size the browser was. If you do that then you set each submenu to 180 also.

Ruth

[Tessa]

Hey Ruth,

Are you able to help me with this? In the multiple colour menu I have used in http://www.skycabs.co.nz that you have already helped me with, my client wants the submenus to stay visible while within that specific category. If you have a look at the site, you will know what I mean. Eg, while in any of the pages in the green section, he wants that green submenu to be visible.

Is this possible and if so, how?

Thanks

Tessa

[Ruth]

Yes, it's possible. You have four colored sections. So, you make a menu_data.js file for each. Take the menu_data.js file you have now and save it four times, I'd name them blue.js, green.js, orange.js, red.js Then, for example, in the blue.js file code ALL the submenus that have to do with the blue section with alwaysvisible=1; by all I mean if you have submenus that come off the submenu you have to do those also. Leave everthing else as it is. Do that for each file, coding the submenus that go with the particular section with alwaysvisible=1;. Then code all the pages for each section to call the particular file that belongs to the section. So, in the blue section there are three pages, they would need the following in the head of the document, using your own paths, of course.

Code: Select all

<SCRIPT language=JavaScript src="milonic_src.js" type=text/javascript></SCRIPT>	
<script	language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");		
  else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>"); 
</script>
<SCRIPT language=JavaScript src="blue.js" type=text/javascript></SCRIPT>

Green would have that but green.js instead of blue and so on.

I'm sure there is some javascript code that could be written to 'read' which page is active and show the right menu, but I do not know how to do js code and this works just fine.


Ruth

[Tessa]

Hi Ruth,

Thanks, but the visibility of the submenus is always at the top lefthand corner. I have done all what you told me to do, although I did wonder where the alwaysvisible should go - I put in each submenu's details, not where the style of them is at the top of the menu. Does this make a difference? How do I show them above their correct sections off the main menu bar? I realise that I can put in top=170 to bring them down to the menu bar, but just need to know how to get them in the right position above each.

We're getting there. I haven't uploaded the changes to the net yet as I don't want the customer seeing it this way! Hope to hear from you soon! You've certainly been very helpful so far.

[Tessa]

Sorry, but I was checking it again and it may be looking funny as I am just viewing it on my pc at present. It could be okay once I upload but could you just confirm this to me before I do?

Thanks

[Ruth]

Confirm what? You put the alwaysvisible=1; in the menu, just like you do for the main menu, not in the global style...in the same place you put orientation="horizontal"; Can you upload to a test site so I can check it before you put it up?

Ruth

[Tessa]

I have uploaded it all and have advised the client that he is to bear with me while I correct the problem!!

If you have another look through the site, you will see the mess! http://www.skycabs.co.nz

Somehow I need to get those submenus down to where they should be!

Also, there are three headings in the main menu that need their link taken off ie, not to appear as a link. I thought I had but it still shows it is a link.

Tessa

[Ruth]

Ok, I will work on it, and have something for you by tomorrow early....It's 9:45pm Monday night right now.

Ruth

[Ruth]

Hi Tessa,
I've hit some problems. I'm still working on it, but for now I suggest you go just put one main data.js file on the site with the mouseover for the submenus while I try and find a solution. A number of things come up when trying to do this.

1. When you set the menu to alwaysvisible=1 it is no longer a 'submenu' in the sense that it doesn't function like one does on mouseover, so you have to set the position. That will work fine if you specify a menu width, but setting it to 100% and centering it means it will change position with the size of the browser. If you want to set the width to 770 which would be about right for 800x600 resolution and that table you have just below it with the colored line that is set at 800, then it won't be hard to set the position of the submenus.

2. If you want to keep it as it is, then this is the problem I'm encountering: To achieve what you want, you have to put the menu in a table. It works fine, but although you seem to be using a template, the top section, which I assumed was the same size is not, on some pages it's 75px high, on some it's 132, othrs 134, up to 143. That means I have to try and figure out just how 'high' to make the table to get the menu to sit on top of the colored bar. Then in some cases there's not enough room without moving the bar down. So, I tried putting an extra table rows into the table that has that colored bar, but again, that will shift it, depending on how high the top section is. Added to this, on some of the pages you have one table

Code: Select all

<TABLE cellSpacing=0 cellPadding=0 width=800 border=0>
  <TBODY>
  <TR>
    <TD class=bodytype vAlign=bottom><!-- #BeginEditable "ContentText" --><!-- #EndEditable --></TD></TR></TBODY></TABLE>

and on other pages you have two of those one right after the other. So, I'm having difficulty getting the menu to sit where it's supposed to be. Unlike when you just put it on the page, if you put it in a table the position has to be set to 'relative'; so it sits where the table is, well that works fine if the submenus are functioning as submenus, but when you make them alwaysvisible they cause the table to be expanded the height necessary to accomodate that submenu in the table cell. That of course shifts everything down.

I am working on it to see if I can get a solution, I WILL put something up today, for you to see and decide if you want to use it, but as you can see it's now 5am and I thought I'd have something up hours ago.

I just wanted to tell you that you should probably put it with a regular menu_data.js file that just uses submenus for today, that would look much better until I figure out a solution.

Ruth

[Ruth]

Ok, Tessa, I did get a way to do it. I don't know if you can use it or not. Hope it helps. There are 4 new data files, one of the problems you had was you kept the showmenu in the line for the ones that were being made alwaysvisible. Anyway, let me know if this helps or if it needs some tweaking and I'll try, and post here when you get them so I can remove them from my site.

Alwaysvisible submenu designs

Ruth

[Tessa]

Thanks Ruth for your hard work on this. Hope you're getting paid for it!

I have left the site as is for now as I have informed the client about it, so I won't make anymore changes until I hear back from you.

The problem I had with this whole site in the first place was that it was designed by another designer who used a different program to me, hence the odd scripts etc that are in the pages.

I am quite sure that it is why some of the tables are not lining up correctly. I have worked on this a lot and it has driven me nuts! I set them to be 100% width so that they can be viewed correctly on both 800x600 and 1024x768. The latter is the view the client wants, not 800x600.

I am not totally sure what you mean about the 'showmenu' as I can't see anything there that is not right. Can you please explain when you've had some sleep?!

It's a pity about the time difference as I am in NZ and we are about 11 hours ahead but I have really appreciated your help on this.

[Ruth]

I just did with your thanks . We are volunteers who just really really like Milonic menu and everything I play with teaches me something.

As to the thing about showmenu: in the red.js file, the item that has showmenu= and refers to that submenu is what you remove, same in all the others, blue in the blue, etc. That's because you have the submenu set to always visible, it's already there, so you don't need showmenu=.

*****Now as to this workaround, which is what it is. Don't spend too much time on it, unless maybe you just want to see how it was done. I believe another volunteer, Kevin, our js guru, has a much simpler solution for this. and the weird layout with the top of the page being different sizes on so many pages won't make a difference in this method. I think.


Ruth

[Tessa]

Wow, what a great volunteer!

Anyway, how do you get to see the files at your end anyway?

I am not at home (where my usual office is) at the moment, so can't quite see what you're talking about.

The showmenu I sort of understand but I remember that there is only one section where the showmenus are. Do I take out all of those showmenus, or just the one relating to the submenu relevant to each section? I hope I make sense here?!

Tessa

[Ruth]

Hi Tessa,
I go to the page using IE, click on file, then save as and save it. Any files that don't get downloaded, usually images inside the menu, I go to my temp internet files and copy them.

As to the showmenus. The main menu has SkyCabs showmenu=Samples, those are the blue ones, so in the blue file, remove the showmenu=samples from it. Then with Global Case Studies; showmenu=Milonic so from the red file, remove that showmenu, and so on with the four colored data files.

Ruth

[Tessa]

Okay, gotcha. I thought it was something like that. I will let you know how I get on. Fingers crossed.

[Tessa]

Hi Ruth,

Well, that was a disaster! I have put it back to how it was in the meantime, because I just couldn't leave it like that. For each section it showed only three colours in the main menu across the page with the submenu of the missing colour up in the lefthand corner again. Embarrassing if the client saw it.

Now, for instance, I what I did was in the blue menu, I took about this only:

aI("text=SkyCabs;url=http://www.skycabs.co.nz;status=Your Destination, Our Goal;showmenu=Samples;oncolor=#ffffff;offcolor=#ffffff;offbgcolor=#38A4D5;onbgcolor=#38A4D5;");

Then, I realised I had taken too much out, and then proceeded to take showmenu=Samples; only.

This is still showing the same way as yesterday and is now driving me absolutely nuts as I just have to get this right. And unfortunately, my client is one of those control freaks and what could have gone wrong has gone wrong with this site!

What do we do now?

[kevin3442]

Hi Tessa,

This is actually a tough one. You're essentially asking the menu to do something it isn't really designed to do. By setting the submenus to alwaysvisible=1, you're telling the system to display the submenu when the page loads. It'll do that, as you can see, but the submenu doesn't have a location to open in yet (because, in your case, its initial appearance isn't being triggered by mousing over a main menu item). Without a location to use, the menu system therefore opens the menu at 0,0 (upper left corner). The trick of course is to open the submenu at a position corresponding to the main menu item that normally triggers it. The Catch 22 is that, with the positioning of your main menu, we don't know where that item will be until the page renders. If you don't know where the item is, how can you gibe the submenu a position?

So... here's an alternative.

(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;

The alwaysvisible setting will make the menu system display all four submenus when each page loads, but the top=-999 setting will make them display well off of the visible area (the user won't see them). That way, each submenu is opened when the page loads... we need that so we can get the dimensions of each menu (mainly the height), to figure out what coordinates to move the appropriate submenu to above the main menu. After we get the dimensions, we will disable alwaysvisible=1, transforming each submenu into a normal one. Once that's done, we'll essentially figure out which submenu should be open, and reposition it to the proper location (above its normal trigger item in the main menu).

(2) To do all of this, I have three functions for you to add to the top of menu_data.js... you can just copy the following code and paste it into 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();

  passedParam = location.search.slice(1);
  clickedItemNum = passedParam * 1;
  mainItemNum = getParentItemByItem(clickedItemNum);
  itemPosArr = gpos(gmobj("el" + mainItemNum));
  menuName = _mi[mainItemNum][3];
  menuObj = gmobj("menu" + getMenuByName(menuName));
  menuPosArr = gpos(menuObj);
  menuPosArr[0] = itemPosArr[0] - menuPosArr[2] + topOffset;
  menuPosArr[1] = itemPosArr[1];
  spos(menuObj,menuPosArr[0],menuPosArr[1]);
  popup(menuName);
}

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

Code: Select all

onload="resestSubmenus()"

(4) You'll notice that one of the functions you added to menu_data.js is named openUrl(). This is the function that you will use from now on to open a new page. So, instead of doing it like this:

Code: Select all

aI("text=Item Text;url=pageName.htm;");

You'll do it like this:

Code: Select all

aI("text=Item Text;url=javascript:openUrl('pageName.htm');");

the openUrl() function adds the "item reference" number for the menu item that is clicked, and passes that to the next page. The next page then does some additional magic with that number.

(5) In all of your pages that you want to automatically open the correct submenu, you have to add the following code inside of the <body> tag

Code: Select all

onload="autoOpenSubmenu()"

The autoOpenSubmenu() function takes the item reference that was passed from the previous page, figures out which item was clicked on the previous page, then figures out the location and dimensions of the item as a reference point. It also uses the clicked item reference to figure out which submenu should be automatically opened. It then gets the current location and dimensions of that submenu, and resets the coordinates (remember it is currently hanging out a -999,0) to the correct location, while also making it no longer alwaysvisibe (so it'll behave as a normal submenu).

The autoOpenSubmenu() function contains a variable called topOffset which is currently set to -1. This essentially applies a fine-tune adjustment to the final location of the submenus when they are automatically opened. The idea is to get that position to match the position that they would normally open in when mousing through the main menu. you may have to change the -1 to -2 or so, but I doubt it.

You can see a working example here. You can also download a copy to play with locally. I tried to set it up similarly to your site's layout. You can still apply the colors and various styles that you use in your own implementation.

Hope that works out for you.

Kevin