User Tools

Site Tools


web5:dynamic_menus

Pull-Down or Dynamic Menus

Using pull-down menus you can create large menu structures in a clear and space saving way. You website will look less cluttered, menu paths will be easier to recognize, and the interactivity is fun to use. Website pull-down menus act like the ones we already know from computer programs.

Without yet moving your mouse over any menu items, the initial menu points showing are main menu items like “Products”, or “Exhibits”. Once a visitor to the site triggers such a main menu item with a cursor movement, a further sub-menu folds down, similar to a new window opening, showing further submenu items. Once the cursor is moved away from the sub-menu list, it folds away again. Pull-down menus can have many layers.

Creating Pull-Down Menus

In Page Editor mode, follow the Menu Bar path: “Edit” → “Dynamic Menu” → “Edit Dynamic Menu”. Check off the box “Create new dynamic menu” and enter a name for the new menu in the field below it. Click “OK” and a window entitled “Dynamic Menu” opens. Here you can begin to create and edit further items and other settings.

It is also possible to create a copy of an already existing menu. This is helpful if you already like a certain menu structure, its font, color, etc., and want to use it again with different text. You can select the name of the existing menu from the list in the Edit Dynamic Menu window. Make sure to activate the option “Create as copy from selected menu”.

These dynamic menus are not bound to a specific project. If, for example, you manage different sections of a website from different projects, you could easily apply the individual dynamic menus over and over again.

Deleting Menus

Open the window “Edit Dynamic Menu” and select the menu you would like to delete, then click on the red X “Delete Dynamic Menu” button. A prompt will ask you to confirm. This will affect all pages that use this menu.

Editing Menus

After opening the “Edit Dynamic Menu” window you can see the structure and entries of an existing menu in a list. You can add new entries, move, or delete them. Further options are available by right-clicking on the respective menu entry.

Below the menu structure you can set the links for the individual menu entries. Select a menu item and a activate one of the link type buttons in the lower half of the window. “Link to Page” opens a window “Browse for Page” from which you can select a target page. “Link to URL” places a cursor into the field below it, enabling you to type in a URL address.

The “Open New Browser Window” option causes the link to open the target web page in a new and separate window while leaving the source web page open in its own unchanged window. This is helpful when you do not want the site visitor to navigate away from the page of the activated link. Uses for this could be copyright information or explanatory text, or a detail view of something. The visitor could easily close that window when done viewing it and readily continue perusing the original web page waiting in its original window.

Next to the tab “Menu Structure and Entries” you will find the tab “Settings”. Here you can set the appearance of the menu.

Border settings include outer and inner border width, color, and optional shadow. Shadow intensity and shadow color can also be assigned.

Font settings determine the type of font used in the labeling of the menu items. Also set horizontal and vertical margins to determine distance of text from borders, as well as both regular text color and Color in Focus Mode.

Clicking “OK” saves your settings. When working on several menus use the “Browse” button to navigate to the different menu choices. Edited menus will automatically be published the next time you publish the page.

Assigning a Dynamic Menu to an Object

In Page Editor mode, dynamic menus can be assigned to any images or text objects. When a visitor to your site moves the cursor over the assigned object, the menu will appear. Moving the cursor away from the objects causes the menu to disappear again.

To assign a dynamic menu to an image or text object select it and follow the menu path: “Edit” → “Dynamic Menu” → “Apply Dynamic Menu”. In the “Apply Dynamic Menu” window you can select the menu that will appear when a user’s cursor moves across the object. Use the “Edit Menu” button to open the “Dynamic Menu” window and set or change settings. The dynamic menu will appear left-justified underneath the assigned object. You can change the distance from the object to make it appear at a different position, using the controls in the “Offset to Object” area.

Removing a Dynamic Menu from an Object

You can remove a menu from an assigned object simply by dragging the “Copy Settings” button to the Recycle Bin.

web5/dynamic_menus.txt · Last modified: 2015/12/03 11:06 by 127.0.0.1