Vertical Menu with 2 columns?

Poster: skyblue
Dated: Wednesday February 25 2004 - 15:05:54 GMT

Hi all,

Have anyone tried to create a vertical menu with 2 columns, meaning every row has 2 items instead of one.

Any guidelines or ideas will be highly appreciated.

Poster: Maz
Dated: Wednesday February 25 2004 - 15:32:56 GMT

A recent post involved 2 rows horizontal, its very similar although a couple of things to consider. With rows the width is going to change if the text is larger, placing one under or on top of the other.

If the itemwidth is larger than any text it should work by making one column, duplicating it with a new menu-name and adjust the top and left position.

Your first submenu is going to open on top of the 2nd column, top or left="offset=1"; will also adjust submenu position.

Give it a try if you think it will work for you.

maz

Poster: skyblue
Dated: Wednesday February 25 2004 - 15:55:56 GMT

Maz,

Thanks for the reply.



Sorry, but I cannot understand well what do you mean by that. Would you kindly explain more?

I did a crazy experiment, it is working on IE, but I'm not sure how well in others:

with(milonic=new menuname("programmi")){
style=menuStyle;
aI("text=<table><tr><td width=150><a href='link.php?id_link=1'>item 1</a></td><td><a href='link.php?id_link=2'>item 2</a></td></tr></table>;type=form");
aI("text=<table><tr><td width=150><a href='link.php?id_link=3'>item 3</a></td><td><a href='link.php?id_link=4'>item 4</a></td></tr></table>;type=form");
aI("text=<table><tr><td width=150><a href='link.php?id_link=5'>item 5</a></td><td><a href='link.php?id_link=6'>item 6</a></td></tr></table>;type=form");
aI("text=<table><tr><td width=150><a href='link.php?id_link=7'>item 7</a></td><td><a href='link.php?id_link=8'>item 8</a></td></tr></table>;type=form");
aI("text=<table><tr><td width=150><a href='link.php?id_link=9'>item 9</a></td><td><a href='link.php?id_link=10'>item 10</a></td></tr></table>;type=form");
}

Any pitfall?

Poster: Maz
Dated: Wednesday February 25 2004 - 16:17:27 GMT

That is very experimental, can you show a link?

To do it in a table you would use the menu_data normally, by making 2 main menus in the one menu_data.js file, then take out the main_menu_left and place it in a table, and main_menu_right in the next td. Leaving all the styles and submenus in menu_data.js

That should work well.

maz

Poster: kevin3442
Dated: Wednesday February 25 2004 - 16:56:33 GMT

Hi Skyblue,

You might want to check out this thread (the one with two rows that Maz referred to). The same two-row menu is duscussed again in this thread. Essentially, Tim wanted a long horizontal main menu with two rows of menu items. He did this by defining two, abutting single-row menus in his menu_data.js file. You could do the same thing, as Maz suggested, by defining two separate vertical menus, and placing them side-by-side so that they appear to be one menu from the user's point of view.

Your table approach should work, but it's cumbersome to set up and it'd be very difficult if not impossible to take advantage of some of the functionality of the menu... like separate mouseover effects for each link, opening a different submenu for each link, etc. I think you'd be better off following up Maz's suggestion.

Kevin

Poster: skyblue
Dated: Thursday February 26 2004 - 14:06:50 GMT

Hi Maz and Kevin,

Unfortunately I'm developing on my pc without any server, I'm unable to show you a preview.

Agree with Kevin, my methods totally unintentionally "disabled" all the good features of this library. I can easily make a div with a table just show and hide, only that I'm kind of in a tide schedule and no time to write javascript for relative positioning the layer to an image, as it is very time consuming to check on every browsers around.

I might try the idea of the example of two rows, only that I need to create 12 milonic menu to show 24 items, kind of messy as well...

Elsie

Poster: kevin3442
Dated: Thursday February 26 2004 - 16:42:10 GMT

Hi Elsie,

I think you misunderstand. We are not suggesting that you create multiple rows. We are only using Tim's recent approach as an example. He wanted a horizontal menu with two rows, each row with 7 items for a total of 14 menu items. The solution was to create two horizontal menus, each with 7 items, and stick them together to form one functional menu. We only mention this because it is similar to your dilemma, and the solution is similar, but the orientation is reversed.

A milonic menu can be either horizontal or vertical; in your terminology this would be horizontal = one row, vertical = one column. If you want what appears to be a single menu that has 12 rows of 2 columns each, you would not create 12 horizontal menus, each having 2 items (although you could if you wanted to). Instead, you'd create 2 vertical menus, each having 12 items... much more direct. It'd be very easy to do.

Kevin

Poster: skyblue
Dated: Friday February 27 2004 - 10:09:31 GMT

Ahh, stupid me, didn't think of the other way round...

Actually I tried that in the very beginning...now I explain a bit better:

I made two vertical menu like you said, each has multiple rows.

The problem is I use an image as a reference point (as in sample: Using the popup Positioned by Images.) I'm unable to popup two menu at the same time, have I done something wrong, or it is the limitation?

Elsie

Poster: kevin3442
Dated: Friday February 27 2004 - 17:01:31 GMT

Hi Elsie,

I'm not sure I completely understand. Are you saying that when you mouseover or click on an image, you want your "double-menu" to pop up? If so, that should be do-able through a little bit of scripting.

Kevin

Poster: skyblue
Dated: Monday March 1 2004 - 9:13:47 GMT



Yes, that was what I meant. I call popup twice under the event of mouseover, but only the first one was shown. Any workaround?