How Can I Make Horizontal Menu R/L Scrollable?

Poster: Bob Martin
Dated: Tuesday October 3 2006 - 15:44:27 BST

I have a horizontal menu whose main menu has more items than which can be displayed horizontally in a page. Since this menu is database-driven, without limits as to the number of main menu items, I would like to support the ability to display those truncated menu items by scrolling left or right.

I am wondering what I need to do from a Milonic perspective to get the menu to (a) only be displayed within a confined horizontal space, and (b) allowing users to horizontally scroll it for selection of other menu items.

One catch - the menu is in its own iframe which sits above the main content area which is also an iframe (menu iframe has transparency to be able to display drop down contents of submenus, while not impeding display of main area content), and for aethetic purposes, it does not display any scroll bars.

Any suggestions?

Poster: Ruth
Dated: Tuesday October 3 2006 - 19:41:20 BST

Hi,

Have you tried creating a horizontal scrolling div? I don't do much with such things, but when researching I found the following one which I tested putting the menu in it instead of just links, I used a table and relative positioned main menu and it seemed to work fine. I don't think this is a free thing. It uses images at the right and left of the div, not a scroll bar.

http://www.dyn-web.com/dhtml/scroll/scroll-rel-h.html

I do not know about using this on a page in an iframe, and since I don't have your layout, I can't test it. If you need info on this with the menu in it, just let me know, but if you'd let me have your layout setup I could test to see if it will work for you.

You'd think there would be a way to just make a horizontal scrolling div using images but I sure couldn't find one.

Ruth

Poster: Bob Martin
Dated: Thursday October 5 2006 - 20:54:04 BST

Hi Ruth,

Thanks for your suggestions. I have seen that dyn-web product advertised, but I wanted to see if I could figure out a way myself to (hopefully) better control the process

Since I last posted, I have been able to pretty much accomplish what I set out to do by using 3 DIV tags for my horizontal menu - 2 for each scrolling image, and the main (wider) one to contain the menu:


| LEFT | ...........MENU ........... | RIGHT |

When no scrolling is needed, I just increase the menu DIV's width, reposition it as left=0, and hide the outer DIV's. I scroll by moving the viewport by a calculated amount to never scroll beyond the beginning or the end of the menu.

This approach is working fine, but now I have a question about sub-menu positioning. When I open a sub-menu, the sub-menu is now positioning a bit to the right (and below, which is expected) of the left edge of the selected menu item's left margin. In fact, the amount it is off by is the same width of the left scroll DIV, so it seems that the Milonic code is somehow trying to compensate for the fact that the main menu is not left-aligned within the page. This, in turn, is now causing problems on the right side of the page, cutting off the right edge of some sub-menus when displayed, which is especially a problem when scroll bars are not displayed.

Is there some setting to get sub-menus to be correctly positioned under the selected menu item within a specific area (like my menu DIV)?

If the answer isn't an easy one, I will see about posting the site outside of my company's firewall for better analysis.

Poster: Ruth
Dated: Friday October 6 2006 - 5:19:46 BST

Hi Bob,

I'm sorry but if I don't have the page with the stuff on it, I can't give an answer. I don't know such things off the top of my head, I usually get the solutions by testing and without having your setup and seeing how you did the divs and such, I'm lost.

Ruth

Poster: kevin3442
Dated: Friday October 6 2006 - 19:32:17 BST

Hey Bob,

A quick (possible) solution you could try would be to set a negative left offset in your submenus, to compensate for the displacement. For example, at the top of menu_data.js, you could specify a global left offset, like so:

Note that this is a string value.

Then, in the definition of the submenu itself, before the aI() item definitions, you could set

By using a single global value, you can easily play with different offsets until you get the right one, without having to edite every submenu multiple times.

Hope that helps,

Kevin