Menu Templates

 overview 

Here are some templates which may be used in combination with the Extended Menu.

Note: Menu templates are NOT the Extended Menu itself. They are FOR the Extended Menu (and could in theory even be used without it). Please consider this separation when reviewing the Extended Menu or reporting problems.


 install 

Download and unzip the file into the (active / default) site templates folder (e.g. /htdocs/joomla/templates/rhuk_solarflare_ii). If you decide to unzip to a subfolder (e.g. /htdocs/joomla/templates/rhuk_solarflare_ii/topnav) than you need to give that name in the parameters of your extended menu module (e.g. set Template Name to "topnav/menu.html").
In addition you need to use the also included stylesheet (menu.css). For this you may edit the index.php of the template, use an import within your template_css.css or just copy and past the contents of the menu.css. (Joomla/Mambo does not provide a generic way yet)
Note: the menu templates are overwriting the class suffix (and maybe other parameters) of the menu module using the menu.ini.

 son of suckerfish horizontal 

This is based on the follow up article Son of Suckerfish Dropdowns by Patrick Griffiths, Dan Webb..
Please read the article to decide whether you prefer this solution (for the IE 5.0 you will have to absolute position the menu - absolute to the whole document).

Download: son-of-suckerfish-horizontal-1.0.2.zip
Snapshot version (fixes class suffix): son-of-suckerfish-horizontal-snapshot-20080807.zip



 suckerfish horizontal 

This is based on the Suckerfish Dropdowns by Patrick Griffiths, Dan Webb.
All suckerfish menus are slightly modified but are mainly based on the mentioned article. Feel free to modify it to your needs and let me know if there are any issues of common interest. The JavaScript is changed so that it can be used to any menu (you need to include it once only) as long as "menu" was found as part of the class name of a parent element or the ul-element itself and it will be active for IE (or compatible) browsers. The class "hover" is used instead of "over" or "sfover". In addition the hover class is removed deferred to avoid flickering (in the IE only of course).
Please read also about the "Son of Suckerfish".

Download: suckerfish-horizontal-1.0.1.zip





 mountaintop-corners horizontal 

This is based on the Mountaintop Corners by Dan Cederholm with the following changes:
  • 4 Corners are used
  • Anchor (Link) wrapps 4 spans
The benefit of this approach:
  • fairly easy and should be quite cross-browser (without hacks)
  • the inner background can be changed with css
  • cross-browser mouse-over using CSS
The downsides:
  • it still uses images (but only for a mask)
  • the background (behind) need to be in line with those images (here white)

Download: mountaintop-corners-horizontal-1.0.0.zip



 mountaintop-corners vertical 

This is the same as "mountaintop-corners horizontal" but displayes vertically instead.

Download: mountaintop-corners-vertical-1.0.0.zip



 csstree 

This menu template allows you to display a JavaScript like tree structure without using any JavaScript. Since it does not use JavaScript you cannot collapse/expand menu items without clicking on a link and reloading the page (like a regular menu).

Download: csstree-1.0.0.zip



 dtree 

This menu template uses dTree to display the menu when JavaScript is enabled. Without JavaScript it is a regular list styled similar to the JavaScript tree (but without lines for simplicy). Other than most dTree menus the menu structure is defined as a regular list and only as a list. So beside the JavaScript files which the browser could cache there is little JavaScript in each individual page.
Please note that this menu template is just a bridge to the original dTree menu.

Download: dtree-1.0.1.zip



 do it yourself 

The above menu templates are examples of what can be done... you may use those or just create your own. A menu template is at least one patTemplate file (by default named "menu.html"). Optionally it may also contain an ini file (by default named "menu.ini") which overwrites module parameters (the name for each value can be found in "mod_exmenu.xml"). A patTemplate file may also contain conditions - to find out more about it please consult the patTemplate documentation. The namespace for the menu templates is "patTemplate" (not "mos") so that you should be able to use any patTemplate tool or sample snippets you find. The following list describes the available patTemplate variables:
name description
MENU_LISTThe result of the embedded template "menu_list"
TITLEThe module title.
LEVELThe level (depth) of the menu list/item.
MENU_LEVELThe menu level (depth) of the menu itself (absolute for the patTemplate).
CLASS_SUFFIXThe class suffix (as in the module parameters).
LIVE_SITEThe live site setting.
SITE_TEMPLATEThe name of the current site template ($cur_template).
TEMPLATE_HOMEThe path to the folder of the menu template.
CAPTIONThe name field of a menu item.
URLThe URL of the current menu item.
TARGETThe target value of the current menu item.
ONCLICKThe onclicke value of the current menu item.
TYPEThe type field of the menu item.
ACCESS_KEYThe access key of the current menu item (if any).
LINK_OPENThe beginning of a link (or a separator) without the caption.
LINK_CLOSEThe beginning of a link (or a separator) without the caption.
LINKThe complete link (or separator) including the caption.
SUB_MENU_ITEMSThe sub menu items (result of the embedded template "menu_list").
ITEM_IDThe Itemid of the current menu item.
INDEXThe index (position) of the current menu item.
COUNTThe count of menu item (within the current menu list).
IS_FIRSTTrue, if it is the first menu item (index = 1).
IS_LASTTrue, if it is the last menu item (index = count).
IS_EVENTrue, if the index/position is even.
HIERARCHYThe absolute hierarchy of the current menu item.
RELATIVE_HIERARCHYThe relative (the current menu/module instance) hierarchy of the current menu item.
PARENT_HIERARCHYThe absolute hierarchy of the parent menu item.
RELATIVE_PARENT_HIERARCHYThe relative hierarchy of the parent menu item.
IS_CURRENTTrue, if the current menu item is the currently viewed one.
IS_ACTIVETrue, if the current menu item or any of its children is the currently viewed one.
IS_EXPANDEDTrue, if the current menu item is expanded.
HAS_SUB_MENU_ITEMSTrue, if the current menu item has children.
IS_SEPARATORTrue, if the current menu item is a separator.
IMAGEThe image path of the image assigned to the current menu item (if any).

A sample file may look like this (included in the zip file):
  1. <patTemplate:tmpl name="menu" whitespace="trim">
  2. <div class="menu{CLASS_SUFFIX}">
  3. {MENU_LIST}
  4. </div>
  5. </patTemplate:tmpl>
  6.  
  7. <patTemplate:tmpl name="menu_list" whitespace="trim">
  8. <ul
  9.   id="menulist_{HIERARCHY}{CLASS_SUFFIX}"
  10. <patTemplate:tmpl name="condition_LEVEL" type="condition" conditionvar="LEVEL" varscope="menu_list" whitespace="trim">
  11. <patTemplate:sub condition="0">
  12.   class="mainlevel{CLASS_SUFFIX}"
  13. </patTemplate:sub>
  14. </patTemplate:tmpl>
  15. >{MENU_ITEMS}</ul>
  16. </patTemplate:tmpl>
  17.  
  18. <patTemplate:tmpl name="menu_item" whitespace="trim">
  19. <li
  20.   id="menuitem_{HIERARCHY}{CLASS_SUFFIX}"
  21. <patTemplate:tmpl name="condition_IS_ACTIVE" type="condition" conditionvar="IS_ACTIVE" varscope="menu_item" whitespace="trim">
  22. <patTemplate:sub condition="1">
  23.   class="active_menu{CLASS_SUFFIX}"
  24. </patTemplate:sub>
  25. </patTemplate:tmpl>
  26. >{LINK}{SUB_MENU_ITEMS}</li>
  27. </patTemplate:tmpl>
sample menu.html