Home | Websydian Documentation
Search | Print

Create a One-level Menu Loader

Overview

A standard menu loader has been provided as part of the Websydian Express runtime.

This menu loader loads the child elements of a menu item as a grid. This grid can be presented as a one-level menu.

In most situations, you will be able to use the delivered menu loader to define your own menus.

What is very likely is that you will wish to define your own layout of the loaded menu.

This is done by defining a new presentation for the existing menu loader process. This section describes the steps necessary to do this.

Define presentation for menu loader

To utilize the existing menu loader, you must define your own presentation for the generic menu loader.

Select the menu item "Content loaders → Menus" in the administration menu.

The grid is loaded showing all menu loaders, which can be used for loading menus. The menu loader having the program name "WSMNUP" are the menu loader used to generate one-level menus.

Select the "WSMNUP" menu loader and press "Presentations".

On the panel shown press "Insert". On the next panel shown you must enter the name, you wish the presentation to be known by and the suffix you wish to use for finding the template used for splitting the page.

Create customized templates

Copy the templates WSMNUPG.HTM, WSMNULPG.HTM, and WSMNURPG.HTM and give them a new file name according to the suffix specified above.

The template WSMNUPG.HTM defines the overall menu layout, whereas the child templates WSMNULPG.HTM and WSMNURPG.HTM defines the left and rigth menu items.

(If you have indicated a suffix _SUF - the name of the files will be WSMNUPG_SUF.HTM, WSMNULPG_SUF.HTM, and WSMNURPG_SUF.HTM).

In the template you must define how the menu item will be shown.

More details about customizing the templates can be found in the section Customizing the template below.

Specify the menu in the site structure

Use the menu item  "Site structure->Site Structure" to show the present site structure tree.

Select the site element to which you want to add the menu as a child and press "Add"

On the first page of the wizard select "Menu" and "New". If the parent is a frameset you will also have to define which frame to load the menu in. Press "Next"

Find the presentation you have just created for the menu. You can find this presentation by searching for the name of the presentation or the Process ID of the process used. Enter the search string in the "Search for" field and press "Find". When you have identified the presentation press "Select" for this presentation.

On the next page you must enter the name, which the menu must be known by in the site structure. Press "Next".

Select the roles for the menu site element and press "Finish".

The menu is now inserted in the site structure tree - and you can define menu items using the "Add" button with the menu selected.

Customizing the templates

An example of a customized menu can be found in the demosite.

A presentation specifying the suffix _TopMenu is used.

You can find the full templates in the demosite folder, the three relevant templates are:

The example HTML code shown below is taken from these templates.

Menu Page

The template menu page itself specifies where the left and right part of the menu is to be shown. This is specified by the two replacement markers /(WSMNULPG) (Left Page) and /(WSMNURPG) (Right Page). Normally, the definitions for the layout of the menu will also be placed in the menu page template - as the two parts of the menu in most cases will have the same layout.

Menu items with align=left in the site structure will be shown in the part of the menu generated based on the /(WSMNULPG) marker, while menu items with align=Right will be shown in the part generated based on the /(WSMNURPG) marker.

This means that if the menu page does not contain the /(WSMNULPG) replacement marker, no menu items that has align=left specified in the site structure will be shown. Similarly, if the menu page does not contain the /(WSMNURPG) replacement marker, no menu items that has align=Right specified in the site structure will be shown.

Looking at the WSMNUPG_TopMenu, the start of the template is not very interesting in this context, what is relevant is the definition of the menu itself:

<div id="menu">
    <div style="float:left;">/(WSMNULPG)</div>
    <div style="float:right;">/(WSMNURPG)</div>
</div>

About the HTML

The div tags specifies areas in the browser for which you can specify a number of attributes. In this case the id="menu" is used to specify the layout of the menu. These definitions for the layout can be found in the websydian.css stylesheet used by the demosite.

/(WSMNULPG) and /(WSMNURPG) specifies where the HTML generated based on the left and right sub-pages will be placed. In this case, the left page will be shown in the left part of the browser as it is placed in a div that has the attribute style="float:left" while the right page will be shown in the right part of the menu (style="float:right").

 

Left part of the menu

The WSMNULPG... template specifies how the left part of the menu will be generated. The left and right part pages are generated as a grid of menu items. For each menu item, there are 4 replacement markers that can be used to specify properties of the menu item. All of these replacement markers must be placed between the two <!--/(Grid)--> tags that specifies the part of the page that is generated as a grid.

The replacement markers are:

Menu URL: /(WSMNUREF)

This replacement marker will be replaced with the URL used to activate the menu item.

Target frame: /(WSMNUTAR)

This replacement marker will be replaced with the target frame specified for the menu item in the site structure. This defines the frame the menu item will be loaded in.

Menu item name: /(WSMNUNME)

This is the text specified for the menu item in the site structure.

Menu item selected: /(WSMNUSEL)

This replacement marker is replaced by either a 0 or a 1 - indicating whether the menu item is the last menu item activated (1) or not (0). As shown below, this can be used to control whether the menu item should be presented as the active menu item.

The content of the WSMNULPG_TopMenu template - as an example of a customized template:

<script lang="JavaScript">var leftindic=0;</script>

<!--/(Grid)-->

<script lang="JavaScript">

  if ( leftindic > 0) document.write(" | ");

  leftindic=1;

  if ( /(WSYDHIDDEN)/(WSMNUSEL) == 1 )

    {document.write('<a class="active" onclick="javascript:setActiveMenuItem(this, \'active\')" href="/(WSMNUREF)" target="/(WSMNUTAR)">/(WSMNUNME)</a>');}

  else

    {document.write('<a onclick="javascript:setActiveMenuItem(this, \'active\')" href="/(WSMNUREF)" target="/(WSMNUTAR)">/(WSMNUNME)</a>');}

</script>

<!--/(Grid)-->

About the HTML

The three lines:

<script lang="JavaScript">var leftindic=0;</script>

if ( leftindic > 0) document.write(" | ");

leftindic=1;

writes that a | character is written between each menu item shown. This is purely a layout feature which is not essential for the functionality.

The two <!--/(Grid)--> comment tags specifies that the area between the tags are handled as a grid. These tags must be present in the template and enclose the section containing the special replacement markers - or the menu will not be loaded.

As described above, /(WSMNUSEL) indicates whether the menu item should be presented as the active menu item. The replacement marker /(WSYDHIDDEN) that preceeds this replacement marker is a directive to the replacement process specifying that the replacement marker /(WSMNUSEL) should be replaced with it's literal  value - not with the name of the value specified in the Plex model. This is just used by a javascript condition statement to control whether the menu item should be shown as being active or not.

The two lines:

{document.write('<a class="active" onclick="javascript:setActiveMenuItem(this, \'active\')" href="/(WSMNUREF)" target="/(WSMNUTAR)">/(WSMNUNME)</a>');}

and

{document.write('<a onclick="javascript:setActiveMenuItem(this, \'active\')" href="/(WSMNUREF)" target="/(WSMNUTAR)">/(WSMNUNME)</a>');}

generates a link that is the menu item itself .

The first line shown, presents the menu item as being the last menu item activated, while the second one shows the menu item with the deafult settings.

The styles applied to active and inactive menu items are specified in the websydian.css stylesheet.

The setActiveMenuItem javascript function presents the menu item as an active menu item, this is called by the onclick event for the link. The setActiveMenuItem javascript function can be found in the websydian.js javascript file.

Right part of the menu

As the html for the right part of the menu is very similar to the one for the left part there is no reason to go through it here. See the template WSMNURPG_TopMenu to see the html.