DropMenu is a highly configurable menu / navigation builder using UL tags. It offers optional DIV wrappers for top level and nested menus (useful for hover zones) as well as configurable classes for the DIV, UL, and LI elements. It even marks the current element and its ancestors with a hereClass (indicating you are here and in this area of the site). It also applies a .last CSS class to the final LI in each UL

Developed by Vertexworks.com and Opengeek.com
Inspired by List Site Map by Jaredc, SimpleList by Bravado, and ListMenuX by OpenGeek

Configuration parameters

  • &phMode [ true | false ] - Whether you want it to output a [+placeholder+] or simply return the output. Defaults to false.
  • &phName [ string ] - Sets the name of the menu, placeholder, and top level DIV id (if topdiv option is true). Defaults to 'dropmenu'.
  • &startDoc [int] - The parent ID of your root. Default 0. Can be set in snippet call with startDoc (to doc id 10 for example): . Defaults to 0.
  • &removeNewLines [ true | false ] - If you want new lines removed from code, set to true. This is generally better for IE when lists are styled vertically. Defaults to false.
  • &levelLimit [ int ] - Maximum number of levels to include. The default 0 will allow all levels. Defaults to '0'. (no limit).
  • &textOfLinks [ string ] - What database field do you want the actual link text to be? The default is pagetitle because it is always a valid (not empty) value, but if you prefer it can be any of the following: menutitle, id, pagetitle, description, parent, alias, longtitle, introtext. TO DO: set text to be first non-empty of an array of options. Defaults to 'menutitle'.
  • &titleOfLinks [ string ] - What database field do you want the internal title of your links to be? The default is pagetitle because it is always a valid (not empty) value, but if you prefer it can be any of the following: menutitle, id, pagetitle, description, parent, alias, longtitle, introtext. Defaults to 'description'
  • &pre [ string ] - Text to append before links inside of LIs. Defaults to '' (empty string).
  • &post [ string ] - Text to append after links inside of LIs. Defaults to '' (empty string).
  • &selfAsLink [ true | false ] - Define if the current page should be a link (true) or not (false). Defaults to 'false'.
  • &hereClass [ string ] - CSS Class for LI and A when they are the currently selected page, as well as any ancestors of the current page (YOU ARE HERE). Defaults to 'here'.
  • &showDescription [true | false] - Specify if you would like to include the description with the page title link. Defaults to 'false'
  • &descriptionField [ string ] - What database field do you want the description to be? The default is description. If you specify a field, it will attempt to use it first then fall back until it finds a non-empty field in description, introtext, then longtitle so it really tries not be empty. It can be any of the following: menutitle, id, pagetitle, description, parent, alias, longtitle, introtext TO DO: set description to the first non-empty of an array of options. Defaults to 'description'
  • &topdiv [ true | false ] - Indicates if the top level UL is wrapped by a containing DIV block. Defaults to 'false'
  • &topdivClass [ string ] - CSS Class for DIV wrapping top level UL. Defaults to 'topdiv'
  • &topnavClass [ string ] - CSS Class for the top-level (root) UL. Defaults to 'topnav'.
  • &useCategoryFolders [ true | false ] - If you want folders without any content to render without a link to be used as "category" pages (defaults to true). In order to use Category Folders, the template must be set to (blank) or it won''t work properly. Defaults to 'true'
  • &categoryClass [ string ] - CSS Class for folders with no content (e.g., category folders). Defaults to 'category'.
  • &subdiv [ true | false ] - Indicates if nested ULs should be wrapped by containing DIV blocks. This is useful for creating "hover zones" (see http://positioniseverything.net/css-dropdowns.html for a demo). TO CONSIDER: Setting a subdiv class at all turns on hover DIVs? Defaults to 'false'.
  • &subdivClass [ string ] - CSS Class for DIV blocks wrapping nested UL elements. Defaults to 'subdiv'.
  • &orderBy [ string ] - Document field to sort menu by. Defaults to 'menuindex'.
  • &orderDesc [true | false] - Order results in descending order? default is 'false'.

Examples

Example 1

Creates menu with wrapping DIV with id=myMenu, starting at the site root, two levels deep, with descriptions next to the links, and nested UL elements with class=nestedLinks; output of menu can be placed in layout using placeholder named myMenu ( e.g. [+myMenu+] )

[[DropMenu? &menuName=`myMenu` &startDoc=`0` &levelLimit=`2` &topdiv=`true` &showDescription=`true` &subnavClass=`nestedLinks`]]

Example 2

Creates topMenu from site root, including only 1 level, with class=topMenubar applied to the top level UL and class=activeLink applied to current page LI

[[DropMenu? &menuName=`topMenu` &startDoc=`0` &levelLimit=`1` &topnavClass=`topMenubar` &hereClass=`activeLink`]]

Example 3

Creates dropmenu 3 levels deep, with DIV wrappers around all nested lists styled with class=hoverZone and currentPage LI styled with class=currentPage

[[DropMenu? &levelLimit=3 &subdiv=true &subdivClass=hoverZone &subnavClass=menuZone &hereClass=currentPage]]

Example 4

Creates dropmenu of infinite levels, ordered by menutitle in descending order

[[DropMenu?orderBy=menutitle &orderDesc=true]]

( back to top )