I would like to display a menu structure, up to 5 levels deep. We have to demo various examples. One is a tree structure, which works relatively well.

Another example is Dropdown menu. The problem with this, is when an item on the 4th level is highlighted to open up a fifth, it is opened outside of the screen (i.e. to the right) with a scroll bar at the bottom. Obviously one cannot take the cursor off the highlighted item in order to scroll, since the whole menu will be collapsed at that point.

I have two questions:

  1. Is there a way to handle this level of dropdown menu and get the screen to automatically scroll to display this?

  2. Is there maybe another menu structure that can work?

Hi Elanie,

Did you put your Dropdown menu into the header with align=“left”?

I have a layout with 5 levels. On the first level there are 5 top menu items. Although menus of depth 5 are probably not very user friendly, it fits into my screen.

Instead of heaving very deeply nested menus you might want choose different structures: There are tabbed controls available, double line menus, context menus… It depends on the functionality of your menu. Is the menu so deep because it actually applies to different contexts? Or is are there so many details to select, which apply to 1 context?

Best Regards,

I’m not clear on which header you refer to with regards to alignment. The Dropdown Menu I have is a subnode of an ITR which in turn is a Subnode of ROWAREA, both of which I set the alignment to left – no impact.

I have a STRIPSEL representing the top layer of the menu. In a separate Rowarea/ITR I have the Dropdown Menu. See attached document for an example of the menu structure. This is an existing mainframe structure which we have to represent via Ajax.

I have tried ROWTABAREA, but you cannot build the tab description dynamically.

Double line menu: This only looks neat when a limited number of entries are displayed per line. We have so many that the individual tags on the menu line are unreadable and squashed.
Menu Example.doc (24 KB)

Hi Elanie,

When you create a new page layout the natpage tag usually has the following subtags:
You can place the dropdown menu as subtag into the header.

What didn’t get clear to me: Why is your menu so big/deep? What’s the functionality of all these items. This is very important to choose the right controls for a user friendly user interface.

You’ve attached a word document. Could you please attach the layout xml file instead?

Thanks + Best Regards,

The word document I attached contains a sample of the layers of an existing menu structure used to drive an entire online system of a short term insurance company. As explained we have to render the same structure in an Ajax format. We cannot do anything about the number of entries or layers in the menu structure. There are a total of 5 000 – 6 000 entries in the menu. Since this is structured in layers obviously only a subset of any particular layer gets displayed at a time. See previous attached example.

The bottom line probably is to use a tree structure instead of a menu to display this data.

I understand. For 5000-6000 entries you need dynamic loading mechanisms as supported by the serverside trees.

I wonder if a workplace application would meet your requirements:
On the left-hand side you would have your tree structure with dynamically loading the relevant items.

HINT: The njxdemos contain a dynamic workplace example “wpdynworkplace”. There is also a chapter about workplaces in the documentation.

Best Regards,