2 menus, 1 page (horizontal & vertical)

[KatWalsh]

From the FAQ it looks like I should be able to do this, so hopefully I read that right. I would like to have a horizontal menu at the top of my page (works fine) and am now trying to add a vertical menu further down, and to the side. (using table cells to position them on the page)

I've tried doing this several ways (not sure which "version" is currently uploaded, but the results were the same on all attempts):
1) tried adding

Code: Select all

addmenu(menu=["sidemenu",    

plus all relevant information, to menu_array.js
2) tried making a second menu_array.js file (named menu_array2.js) and putting the sidemenu info in that
3) deleted the line it says to delete when using more than one menu_array file
4) tried rearranging the script order in my html

The top horizontal menu works fine, but I can't get the side menu to appear/work.

This is the page in question -> http://www.katwalsh.com/kat/test/animalindex-test.html - the missing menu should be between the "mammals" and "reptiles" section

Would appreciate any help!

Thanks
Kat

[/code]

[kevin3442]

Hi Kat,

To use two menu array files: The file containing the line

Code: Select all

menunum=0;menus=new Array();_d=document;...

should be the first one sourced into the .html file. Other menu array files should follow (with the "menunum=0..." line of code at the top commented out or deleted, as you've done). mmenu.js should be the last of the menu scripts sourced into the .html file. In your case, the order is currently: menu_array.js, mmenu.js, menu_array2.js; so the menus in menu_array2.js will be ignored. You should make the order: menu_array.js, menu_array2.js, mmenu.js.

I noticed another problem in menu_array2.js that will also prevent the menus in that file from being displayed. The 6th element in your "sidemenu" array (the Screen Position property) is currently set to left. This is a string, so it should be "left" (in double quotes). Without the quotes, you may have noticed a "left is not defined" error (or some such, depending on the browser) when you opened the .html file.

A couple of other comments:

(1) Unless the sidemenu will only appear on some pages (not all pages), you can place all of your menu arrays in one file. I.e., your "sidemenu" array and all of its submenu arrays can go into menu_array.js. Having the Always Visible property set to 1 for the "sidemenu" will make it a "main" menu. Then you don't have to worry about loading order and removing that line of code at the top. Also, since there are fewer file requests to the server, loading time should be somewhat improved. I find this approach convenient for "main" menus that will appear on every page. Others find that it makes more sense to organize different "main" menus into separate .js files.

(2) If you want to stick with the multi-file approach, if your style arrays are the same in both files, you should be able to remove them from menu_array2.js... they're global in scope, so the style arrays defined in menu_array.js should still be available to the menu arrays defined in menu_array2.js (less overall code = faster loading). I haven't tested this in all browsers, but I find that it works for me when I want to use multiple .js files with common style arrays.

(3) A humble suggestion. I noticed that your page design leaves a nice left margin all the way down and that some pages on your main site are long. So, for your side menu, rather than bind it to a table, where it'll scroll off the top of a long page, have you considered using the menu's Follow Scrolling property, so it'll move down the page as you visitor scrolls? You could easily put the Mammals and Reptiles headers inside the menu, so they'll scroll with it. Not only would the menu remain available to the user as he or she scrolls down, but it would also increase the "coolness" factor! You could have a convenient "Back to the Top" link in the side menu to quickly take the visitor back to your top menu -- or -- you could even replicate the main menu selections off of one "main" item in your side menu (defined submenus can be opened fom multiple menu items). Just some thoughts.

Hope that helps,

Kevin

[KatWalsh]

You should make the order: menu_array.js, menu_array2.js, mmenu.js.

Ok, this got the side menu to show up. Thanks!

(1) Unless the sidemenu will only appear on some pages (not all pages), you can place all of your menu arrays in one file. I.e., your "sidemenu" array and all of its submenu arrays can go into menu_array.js. Having the Always Visible property set to 1 for the "sidemenu" will make it a "main" menu. Then you don't have to worry about loading order and removing that line of code at the top. Also, since there are fewer file requests to the server, loading time should be somewhat improved. I find this approach convenient for "main" menus that will appear on every page. Others find that it makes more sense to organize different "main" menus into separate .js files.

The "sidemenu" will only be on some of the pages. but I would like to decrease loading time. Would it work if I put both menus in one menu_array file, but just didn't call up (using 'placemenu') the sidemenu on the pages it's not needed on?

(3) A humble suggestion. I noticed that your page design leaves a nice left margin all the way down and that some pages on your main site are long. So, for your side menu, rather than bind it to a table, where it'll scroll off the top of a long page, have you considered using the menu's Follow Scrolling property, so it'll move down the page as you visitor scrolls?

The long margin on the left is because there will be quite a list there (so scrolling isn't needed, but thanks for that idea). The original version of this is http://www.katwalsh.com/kat/animalindex.html and I want the same look, but the convienance of the js menus. I debated doing all the animals as submenus, but decided I wanted them more immediately visible.

You could easily put the Mammals and Reptiles headers inside the menu, so they'll scroll with it.

ooh, how do I do that? Just enter the headers into the menu_array file around the appropriate menus?

Thanks!!

Kat

[kevin3442]

Hi Kat,

ooh, how do I do that? Just enter the headers into the menu_array file around the appropriate menus?

There's a property you can specify in a menu item definition that makes the item a "header." For example, the following code:

Code: Select all

,"Mammals","# type=header;",,,1

woudl generate a menu item that is a header only; an item with no link, intended to break the menu into different sections. Header items take their font and background colors respectively, from elements 18 and 19 of the menu's style array. If you like, you can also specify border colors for a menu item. The following code:

Code: Select all

,"Mammals","# type=header;onbordercolor=ffffff;offbordercolor=ffffff",,,1

would give the Mammals header a white border if you wanted it.

The Milonic site has a sample page demonstrating headers.

The "sidemenu" will only be on some of the pages. but I would like to decrease loading time. Would it work if I put both menus in one menu_array file, but just didn't call up (using 'placemenu') the sidemenu on the pages it's not needed on?

If the sidemenu's Always Visible property is set to 1, as it should be if it's a main menu, then it will always be visible on any page that loads its code. The only way to do what you suggest using PlaceMenu() would be to set the menu's Top and or Left coordinates to some large negative value, so that the menu is there, but remains off screen until you use PlaceMenu(0 to move it into a table cell. From the user's point of view, the menu would not be there, even though it really is (just in a place where it can't be seen). But this approach might not increase loading efficiency overall. By having the sidemenu code in pages that don't use it, the pages that don't use it take longer to load than necessary, so any gain you might get in loading efficiency on pages with both menus will be lost on pages with only one menu... so your net gain overall might be zero (or it may even get worse overall, depending on how many pages use the sidemenu). There are other ways to do it, including writing a script to dynamically change a menu's Always Visible property (turning it on or off for different pages). But you have the same efficiency concerns.

You're probably better off sticking with two menu_array files. But if the top, horizontal menu will be on every page, then put all common style arrays in that file. the sidemenu file could just contain the code for its menus, but use the common styles from the main file. That way, you'll trim the size of your sidemenu file.

One last comment: PlaceMenu() has a few issues, so unless you absolutely need to bind the menu to a table cell (which I can't quite see that you will with your layout), you might want to avoid using PlaceMenu(). It might be better to use the menu's other versatile positioning capabilities. It's pretty rare that I see a situation where PlaceMenu() has to be used.

Hope that helps,

Kevin