Page Menu

Output a Page Menu.

Page menus come in 3 basic types.

1. Simple Text Links - This type of menu is commonly used in the page footer. This menu is a simple list of text usually separated by a bullet or |.
2. Rollover Image Menu - A menu of linked images or rollover images can be create automatically. The menu image and rollover image are uploaded right on the Page's edit form.
3. A Styled Menu List - You can create a variety of menus by styling an unordered list (ul).

CODE

Minimal (these parameters and their values do not change):

<cfmodule template="#site#"
    fuseaction="page.menu"
    >

All parameters:

<cfmodule template="#site#"
    fuseaction="page.menu"
    menuSection="menuSectionPageAction"
    format="textlinks|links|list"
    separator= " &##8226; "
    id="navPage"
    class="menuClass"
   >

Optional Parameters:

• menuSection = section name; defaults to all. You can create multiple menu groups and output them separately or together. You create a new menu section by adding a new page and setting the 'Menu Section' field to 'Menu Section Header'. You will then be able to set other pages' Menu Section to this new header. Enter the Page Action of the Menu Section in the cfmodule call to output only pages listed under that Section Header.
  
• format = sets the HTML the menu is output in; defaults to textlinks. Textlinks will output the menu as text links (no images) separated by the separtor. Links will use the image or image rollover if defined. The list will output as an unordered list (UL).
• separator = Used only if formate is set to links or textlinks. Defaults to a bullet - " &##8226; ". The value entered here will be placed between links. This can be set to "<br>" or some other character value like " | ".
• id = optional id value. Defaults to blank. For a list, this will be the id of the "ul". For links, this will be the id of the surrounding div.
• class = optional class value. Defaults to blank. For a list, this will be the class of the "ul". For links, this will be the class of the surrounding div.

HTML

Links  - text and image

<div id="menuID" class="menuClass">

<a href="#" id="menuIDPageActionOne" title="Page Name One" class="selected" ><span>Page Name One</span></a>

<a href="#" id="menuIDAPageActionTwo" title="Page Name Two"><img src="/" id="menuIDPageActionTwo" name="menuIDIpageActionTwo" alt="Page Name Two" title="Page Name Three" /></a>

</div>
 

List - title, selected, text

<ul id="menuID" class="menuClass">

<li><h2>Page Name One is a Title</h2></li> 

<li class="selected"><a href="#" id="MenuIDPageActionTwo" title="Page Name Two" class="selected"><span>Page Name Two</span></a></li>

<li><a href="#" id="menuIDAPageActionThree" title="Page Name Three"><span>Page Name Three</span></a></li>

</ul>