• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Forum locked This topic is locked, you cannot edit posts or make further replies.  [ 1 post ] 
Author Message
 Post subject: Navigator: accessible menu
PostPosted: Thu Nov 12, 2015 5:13 am 
Offline
Forum Members
Forum Members

Joined: Thu Nov 12, 2015 4:40 am
Posts: 19
Hi all,

The example code given with Navigator is reasonable, but the output is not good enough to pass inspection.

Since Menu Manager was deprecated (why??? And if it HAD to be, why change the vars, at least let me copy/paste my old Smarty code...) I sat down and created something with some more (easy to find for non-coders) flexible options and that will work together with the Adobe Accessible Mega Menu, which we have tested extensively with users of assistive technology, and which beats the other pretenders to the throne hands-down. To comply with strict standards, the whole thing remains sufficiently accessible without Javascript and CSS.

I did away with the weird |cat stuff for CSS classes. Not really the way I see a templating engine put to good use (that's PHP's job) and IMHO not 'MS' for non-coders. So the whole is a bit wordier than strictly necessary, but ease of use comes before poeticness of code, IMO.

Here it is. I would strongly suggest shipping CMSMS with only FULLY accessible examples. As CMS providers, you have a certain responsibility for what gets loosed on the web by your users, experts and beginners alike, and what you teach the latter. Maybe this inspires someone in the team.

{strip}{*

Simple Navigator module Smarty code for CMSMS. Based on the standard CMSMS example code, adapted to work with the Adobe Accessible Mega Menu.

IMPORTANT: This code will provide you with fairly accessible HTML output. It is, however, NOT fully accessible without the jQuery plugin and
code provided by Adobe Accessibility. It should, however, work with all assistive technology with or without. Please contact the author (e-mail below)
if you find that it doesn't. Please note the browser used, and the name, type and version of your assistive technology.

Does not work in the (deprecated) Menu Manager, but should be easy to adapt.

(https://adobe-accessibility.github.io/A ... Mega-Menu/)

Original code: CMSMS.
Adaptation: David Jessurun / mo-en-mo.nl
License: As original, GNU.
For help: info@moneta.nl

Disclaimer: provided as-is. No guarantees.

PLEASE read up on accessibility.
(http://www.w3.org/TR/WCAG20/)

*}

{* Wrap menu with div tag? - Prevents issues with older browsers. *}
{assign var="navDivBool" value=true}

{* Use unordered list (<ul>)? -Note that ordered lists (<ol>) are better accessibility- *}
{assign var="listWrapUL" value=false}

{* Wrap/code for separators: note that using glyphs is not recommended for accessibility, stick to HTML/CSS. *}
{assign var="sepWrap" value="span"} {* HTML *}
{assign var="sepWrapClass" value="separator"} {* Class *}
{assign var="sepCont" value="separator"} {* Content *}

{* Wrap for sectionheaders: note that semantically these most likely need to be H tags. *}
{assign var="secHeadWrap" value="h3"} {* HTML *}
{assign var="secHeadWrapClass" value="nav-sectionheader"} {* Class *}
{assign var="secHeadLiClass" value="nav-sectionheader"} {* List item class *}

{* optional class for links *}
{assign var='aClassAll' value="navlink"} {* Every menu link gets this class, regardless of other classes they may also get *}
{assign var='aClassCurrent' value="current"} {* Is current page *}
{assign var='aClassParent' value="parent"} {* Is part of a top-level item with sub-items *}
{assign var='aClassNorm' value="normal"} {* Everything else *}

{* Wrap menu links with span tag? (Not necessary unless you need it to solve a CSS puzzle) *}
{assign var="aSpanBool" value=false}

{* Optional classes for list items *}
{assign var='liClassAll' value="all-nav-item"} {* Every menu li item gets this class, regardless of other classes they may also get *}
{assign var='liClassCurrent' value="current-nav-item"} {* Is current page *}
{assign var='liClassParent' value="parent-nav-item"} {* Is part of a top-level item with sub-items *}
{assign var='liClassNorm' value="normal-nav-item"} {* Everything else *}

{*
////////////////////////////////////////////////////////////////////////////////////
// CAUTION. From here you should only change code if you know what you are doing. //
///////////////////////////////////////////////////////////////////////////////////
*}

{* The classes below most likely do not have to change. Only change them if you changed them in the javascript too. *}
{assign var="menuClass" value="nav-menu contentwidth"}
{assign var="topNavItemClass" value="nav-item"}
{assign var="panelClass" value="sub-nav"}
{assign var="panelGroupClass" value="sub-nav-group"}

{* Wrap menu with HTML5 'nav' tag? - If there is no 'nav' tag, the jQuery will not work. Change only if your template has one already. *}
{assign var="navBool" value=true}{/strip}

{function name=Nav_menu depth=1}{strip}
{foreach $data as $node}

{* build the menu item node *}
{if $node->type == 'sectionheader'}

<li class="
{$liClassAll} {$secHeadLiClass}
{if $node->depth==1} {$topNavItemClass}{/if}
{if $node->current} {$liClassCurrent}{/if}
{if $node->children} {$liClassParent}{/if}
{if !$node->children && !$node->current} {$liClassNorm}{/if}
">
<{$secHeadWrap} class="{$secHeadWrapClass}">{$node->menutext}</{$secHeadWrap}>
{if isset($node->children)}
<div class="{$panelClass}">
{if $listWrapUL}<ul class="{$panelGroupClass}">{else}<ol class="{$panelGroupClass}">{/if}
{Nav_menu data=$node->children depth=$depth+1}
{if $listWrapUL}</ul>{else}</ol>{/if}
</div>
{/if}
</li>

{else if $node->type == 'separator'}
<li class="{$sepWrapClass} {$liClassAll} {if $node->depth==1} {$topNavItemClass}{/if}"><{$sepWrap} class="{$sepWrapClass}">{$sepCont}</{$sepWrap}></li>
{else}

{* regular item *}
<li class="
{$liClassAll}
{if $node->depth==1} {$topNavItemClass}{/if}
{if $node->current} {$liClassCurrent}{/if}
{if $node->children} {$liClassParent}{/if}
{if !$node->children && !$node->current} {$liClassNorm}{/if}
">
<a class="
{$aClassAll}
{if $node->current} {$aClassCurrent}{/if}
{if $node->children} {$aClassParent}{/if}
{if !$node->children && !$node->current} {$aClassNorm}{/if}
" href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{if $aSpanBool}<span>{/if}{$node->menutext}{if $aSpanBool}</span>{/if}</a>
{if isset($node->children)}
<div class="{$panelClass}">
{if $listWrapUL}<ul class="{$panelGroupClass}">{else}<ol class="{$panelGroupClass}">{/if}
{Nav_menu data=$node->children depth=$depth+1}
{if $listWrapUL}</ul>{else}</ol>{/if}
</div>
{/if}
</li>

{/if}
{/foreach}


{/strip}{/function}

{if isset($nodes)}
{if $navDivBool}<div class="nav" id="nav">{/if}
{if $navBool}<nav>{/if}
{if $listWrapUL}<ul class="{$menuClass} ">{else}<ol class="{$menuClass} ">{/if}
{Nav_menu data=$nodes depth=0}
{if $listWrapUL}</ul>{else}</ol>{/if}
{if $navBool}</nav>{/if}
{if $navDivBool}</div>{/if}
{/if}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Forum locked This topic is locked, you cannot edit posts or make further replies.  [ 1 post ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
A2 Hosting