http://webhost.bridgew.edu/etribou/layo ... index.html
They are flexible and VERY WELL documented, both the page above and in the menu CSS. You will NEED to read the docs, as there are some crucial tidbits of information in them. They do support multiple instances on a single page.
What follows here is a CMSMS 1.2 menu template you can use for this menu system. Feel free to modify-to-suit. Besides this menu template, you'll need a script (added to your , a few images (indicators on parent items; change paths in CSS to match where you put them), and the css. everything needed, plus the docs and a demo page is in a zip archive available at the link above.
Code: Select all
{* this is a smarty comment. they do not appear in html output..
however linefeeds and spaces not in a smarty tag WILL, and this
menu relies upon exact spacing, or rather, lack of it except
before nested <ul> and </ul> tags. so be careful if you edit this.
menu system originally from:
http://webhost.bridgew.edu/etribou/layouts/rMenu/index.html
and has been released to the public domain by its creator.
this menu system will not just 'drop in' to cmsms. you will
need to read the documentation, above, as well as fetch the
zip archive from that page which has the supporting files, and
you will also need to modify the css to suit your design (look
for the 'presentation' sections in the stylesheet, but read the
comments for important information).
the javascript needed for braindead browsers requires that
each menu on a page have a unique id. the easiest way to do that
is to create and use a different menu template for each instance
on a page. see the docs and demo (above).
rMenu base menu template for cmsms 1.2 by kermit.
you will probably want to hide the menu positions (retained
here from the default css menu for cmsms) that are wrapped
inside the <dfn> tags, so add the following to your css:
.rMenu dfn {display:none}
*}
{if $count > 0}
<div class="clearfix rMenu-center">{* see source page for options *}{*
-- no whitespace here --
*}<ul id="menu-01" class="clearfix rMenu-hor rMenu">{* see source page for options, this is also where the unique id goes *}{*
-- no whitespace here --
*}{foreach from=$nodelist item=node}{if $node->depth > $node->prevdepth}{repeat string=" <ul class='rMenu-ver'>" times=$node->depth-$node->prevdepth}{*
-- no whitespace here --
*}{elseif $node->depth < $node->prevdepth}{* space before <ul> is needed *}{*
-- no whitespace here --
*}{repeat string="</li> </ul>" times=$node->prevdepth-$node->depth}</li>{elseif $node->index > 0}</li>{/if}{* whitespace before </ul> required *}{*
-- no whitespace here --
*}{if $node->parent == true or ($node->current == true and $node->haschildren == true)}<li class="active parent rMenu-expand"><a class="active parent"
{elseif $node->current == true}<li class="active"><a class="active"
{elseif $node->haschildren == true}<li class="parent rMenu-expand"><a class="parent"
{elseif $node->type == 'sectionheader'}<li class="header">{$node->menutext}
{elseif $node->type == 'separator'}<li class="separator"> - -
{else}<li><a
{/if}{if $node->type != 'sectionheader' and $node->type != 'separator'}href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>{*
-- no whitespace here --
*}{elseif $node->type == 'sectionheader'}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>{/if}{/foreach}{*
-- no whitespace here --
*}{repeat string="</li> </ul>" times=$node->depth-1}</li> </ul>{* whitespace before </ul> required *}{*
-- no whitespace here --
*}</div>
{/if}
