Category Menu

Output a Category Menu.

Category menus come in 4 basic types.

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 |.
Image Menu - A menu of linked images. This is most appropriate for top level categories and unlike the page menu, these images to have a rollover. The menu image is uploaded ad the "Grahpic Title" on the Category's edit form.
A Styled Menu List - You can create a variety of menus by styling an unordered list (ul). Subcategories can also be included as nested lists.
Select Menu - A jump menu select list. Subcategories can be included in this list as well.

CODE

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

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

All parameters:

<cfmodule template="#site#"
    fuseaction="category.menu"
    menuQuery="catMenu"
    rootCID="0"
    children="1"
    expand="1"
    format="textLinks,links,list,selectBox"
    id="navCategories"
    class="menuClass"
    separator= " &##8226; "
    nullText="select category"
    selectsize="1"
    >

Optional Parameters:

menuQuery = defaults to catMenu. Category menus are stored in server memory. The same cached query can be used to output several different menus on a page (for instance top and footer menus) by using the same menuQuery name.

rootCID = the top level category ID. Defaults to the category ID set in the Main Settings as the top category. This is usually 0, but can be changed.

children = the number of sub-category levels to output. Defaults to 0 to show only the single level of categories under the root.

expand = defaults to 0. A setting used for menus with children to determin if siblings of the current selected menu are displayed.

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 graphic title image if defined. The list will output as an unordered list (UL). SelectBox will output a jump menu.

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.

separator = Used only if format 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 " | ".

nullText = Used only for selectBox format. Sets text for the first (blank) menu item eg. "select category". Defaults to resource bundle value categorySelectMenuNull.

selectsize = Used only for selectBox format. Determines the select field size (height). You can set the height to expose a scrolling list of categories.

HTML

Links - No Children

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

<a href="#" id="menuIDCategoryID" title="Category Name One" class="selected"><span>Category Name One</span></a>

<a href="#" id="menuIDCategoryID" title="Category Name Two "><span>Category Name Two </span></a>

</div>

Links - With Children
<div id="menuID" class="menuClass">

   <span class="L1">
       <a href="#" id="menuIDCategoryID" class="selected" ><span>Top Category One</span></a> •
   </span>

   <span class="L2">
       <a href=#" id="menuIDCategoryID" class="selected" ><span>Subcategory A Selected</span></a> •
   </span>

   <span class="L2">
       <a href="#" id="menuIDCategoryID"><span>Subcategory B</span></a> •
   </span>

   <span class="L1">
       <a href="#" id="menuIDCategoryID"><span>Top Category Two</span></a> •
   </span>

</div>

NOTE: Menus with children will include a class in the option indicating what level the category is. L0 will indicate top level categories, L1 will be their children, etc.

List
<ul id="menuID">

    <li id="menuIDCategoryID" class="selected"><a href="#" class="selected"><span>Top Category One</span></a>
        <ul>
            <li id="menuIDCategoryID" class="selected"><a href="#" class="selected"><span>Subcategory A Selected</span></a></li>

            <li id="menuIDCategoryID"><a href="#"><span>Subcategory B</span></a></li>
        </ul>
    </li>

    <li id="menuIDCategoryID"><a href="#"><span>Top Category Two</span></a></li>

</ul>

Select Box

<form id="menuID" class="menuClass" name="menuQuery" method="post">

<select name="jumptoCID" size="selectsize" onchange="#">

    <option value="">null text</option>
    <option value="categoryURL">Category Name</option>
    <option value="categoryURL" class="L1" selected>Selected Category</option>

</select>

</form>

NOTE: Menus with children will include a class in the option indicating what level the category is. L0 will indicate top level categories, L1 will be their children, etc.