I've had to design a menu with accesskeys. The accesskeys were actually part of the design, so that's why they're included in this menu structure. This piece of code uses Javascript and Smarty to write your menu items, with an explanation in the title attribute of the a-tag about using access keys, depending on whether Firefox, IE, or Safari is used. An alternative option is provided as well.
In the original design, the accesskey indicators (the spans) come after the menu item title, because the menu is aligned to the right. However, you can simply switch the span and the node->menutext smartytag or remove the span all toghether. However in the latter case, the user would only be dependent on the title attribute in the a-tag to know what accesskey to use. (The creamy yellow balloon that appears when you hover across a link.)
Also, the title attributes, accesskeys and tab indices were set in the page details (when editing a page, the second tab) accordingly.
Because Javascript does the displaying, a lot of switching between normal smarty/html and literal javascript is necessary. This decreases the readability somewhat. If you want a clear look, just copy the code into your html editor and find {literal} and {/literal} and replace them with nothing. This ruins the code, but at least it's much easier to read.
This menu structure currently does not support "current menu item" (class="menuactive") or parent-child relations. In other words, with this code, you can't highlight the current page or have sub-items. This is probably possible, but not without extending or rearranging the code. For my purposes this is not necessary, so unless I get a lot of response, I will not incorporate these features. Feel free to take this snippet and improve it. My only condition is that you post it for other people to use again.
Admins Feel free make a copy of this in the appropiate board or repository. I'm sorry I couldn't find a more suitable place.
Here is the code. Make a new menu, name it and paste this code. Make sure you call the menu with {menu template="NAME OF THE MENU YOU JUST MADE"}.
Code: Select all
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
<li>
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{literal}
<__script__ language="javascript">
var Browser = navigator.appName;
var Platform = navigator.platform;
var d = document;
/* Firefox */
if (Browser == "Netscape") {
d.write('<a target="_top" href="{/literal}{$node->url}{literal}" accesskey="{/literal}{$node->accesskey}{literal}" title="Accesskey: Shift+Alt+{/literal}{$node->titleattribute}{literal}" tabindex="{/literal}{$node->tabindex}{literal}">{/literal}{$node->menutext}{literal} <span class="letters">{/literal}{$node->titleattribute}{literal}</span></a>');
}
/* Explorer */
else if (Browser == "Microsoft Internet Explorer") {
d.write('<a target="_top" href="{/literal}{$node->url}{literal}" accesskey="{/literal}{$node->accesskey}{literal}" title="Accesskey: Alt+{/literal}{$node->titleattribute}{literal} and Enter" tabindex="{/literal}{$node->tabindex}{literal}">{/literal}{$node->menutext}{literal} <span class="letters">{/literal}{$node->titleattribute}{literal}</span></a>');
}
/* Safari and other Mac browsers, except Firefox */
else if (Platform == "Mac" && Browser != "Netscape") {
d.write('<a target="_top" href="{/literal}{$node->url}{literal}" accesskey="{/literal}{$node->accesskey}{literal}" title="Accesskey: Ctrl+{/literal}{$node->titleattribute}{literal} or Ctrl+Option+{/literal}{$node->titleattribute}{literal}" tabindex="{/literal}{$node->tabindex}{literal}">{/literal}{$node->menutext}{literal} <span class="letters">{/literal}{$node->titleattribute}{literal}</span></a>');
}
/* Any other browser */
else {
d.write('<a target="_top" href="{/literal}{$node->url}{literal}" accesskey="{/literal}{$node->accesskey}{literal}" title="Accesskey: {/literal}{$node->titleattribute}{literal} - Please use the appropiate keycombination for your browser." tabindex="{/literal}{$node->tabindex}{literal}">{/literal}{$node->menutext}{literal} <span class="letters">{/literal}{$node->titleattribute}{literal}</span></a>');
}
</__script>
{/literal}
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1} </li>
</ul>
<!-- Code by Jules Bressers, adapted from original CMSMS menu template 'cssmenu.tpl' -->
</div>
{/if}
