• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Project 4. Controlling Navigation Elemen... > Modifying the Submenu System

Modifying the Submenu System

It’s been pretty straightforward thus far, but now you’ll be converting the submenu system by employing a series of template elements to allow Contribute usability while maintaining your client’s desire for accessibility enhancement. The Template elements used in this section will be an Editable Repeating Region, complex expressions manipulating the Expression Conditional Operator, and leveraging expression variables including _index and _isLast to your advantage.

Investigation

First, you must inspect the existing preliminary submenu system to see if there is any pattern that you can employ in the conversion process. Looking at line 35 (<div id="SubNavLyr">), notice the following:

Listing 4.2.

<a href="page1.htm" tabindex="7" title="Product 2,Page 1" accesskey="1">About Product 2</a><span class="hide">&nbsp;|nbsp;</span><span class="BreadCrumb">Product 2 FAQ</span><span class="hide">&nbsp;|&nbsp;</span><a href="page3.htm" tabindex="9"title="Product 2, Page 3"accesskey="3">Product 2 Demo</a>


					  

There is a link, a separator, a marker, a separator, and another link. The separator is only between the links and marker and is not repeated at the end of the link list. The marker has no link and has a class named BreadCrumb applied.

There are several patterns that appear in the submenu system:

  • href: Each page name is incremented by 1.

  • tabindex: Each value is incremented by one and starts at 7.

  • title: Each value has repeating content and the page value increments by 1.

  • accesskey: Each value increments by 1.

  • link text: There is a pattern but this needs to be editable, so the pattern will be abandoned.

  • class: There is no pattern.

Conversion

Now that the patterns are outlined, you’ll need to implement a method of using them to your advantage.

1.
Position your cursor at the end of line 29 using Code view. Select the 04-PageNumber Param snippet, and click the Snippet panel’s Insert button to insert the following code:

Listing 4.3.

<!-- TemplateParam name="PageNumber"type="number" value="0" -->

This inserts a number type template parameter named PageNumber that will be used in expressions to evaluate which page you are currently on. The expressions will determine if a link is required for the submenu element or if it should be spanned with a breadcrumb CSS class with no hyperlink (the breadcrumb marker). There is no other reasonable method of adding this parameter to the template that doesn’t require removal of some additionally modified element.

2.
Position your cursor at the end of line 29 using Code view. Select the 08-SubLinkTitle Param snippet, and click the Snippet panel’s Insert button to insert the following code:

Listing 4.4.

<!-- TemplateParam name="Access_SubLinkTitle"type="text" value="Product #" -->


					  

This inserts a text type template parameter named Access_SubLinkTitle that will be used to partially write the Accessibility attribute title for each link. There is no other reasonable method for adding this parameter to the template that doesn’t require removal of some additionally modified element.

3.
Find line 35, which looks like the following code:

Listing 4.5.

<div id="SubNavLyr"><p><a href="page1.htm" tabindex="7"title="Product 2, Page 1" accesskey="1">About Product 2</a><span class="hide">&nbsp;|&nbsp;</span><span class="BreadCrumb">Product 2 FAQ</span><span class="hide">&nbsp;|&nbsp;</span><a href="page3.htm" tabindex="9"title="Product 2,Page 3" accesskey="3">Product 2 Demo</a></p></div>


					  

4.
Replace line 35 with snippet 07-Line 35 Code, which reads as follows:

Listing 4.6.

<div id="SubNavLyr"><p><!-- TemplateBeginRepeatname="RR_SubNav" -->@@((PageNumber==(_index+1))?'<span class="BreadCrumb">':'<a href="page '+(_index+1)+'.htm" tabindex="'+(_index+8)+'"title="'+(Access_SubLinkTitle)+', Page '+(_index+1)+'"accesskey="'+(_index+1)+'">')@@<!-- TemplateBeginEditablename="ER_SubNav" -->About Product 2<!--TemplateEndEditable ->@@((PageNumber==(_index+1))?'</span>':'</a>')@@@@ (!_isLast?'<span class="hide">&nbsp;|&nbsp;</span>':'')@@<!-- TemplateEndRepeat --></p></div>


					  

5.
Examine the changes you’ve made, reading from left to right across the line.

You have made the submenu content into a Template Repeatable Region called RR_SubNav that will allow you to create one or more of the submenu navigation elements. As you add repeats of this to the page, the number of repeats is contained in the _index parameter’s value (counting from zero, of course) on the child page.

For each submenu element, the PageNumber parameter’s value is compared to the RepeatRegion’s index value (_index+1). When they are the same, that submenu element is not assigned a link (this would be a redundant link to the page itself) and is only styled and acts as a breadcrumb marker. When they are different, that submenu element is assigned a link, which is styled by virtue of the pseudo-class definition.

The link that is assigned to the submenu element is also determined by the value of the _index parameter (as indicated in Table 4.1) by appending the parameter’s value to the page name to produce page1.htm, page2.htm, page3.htm, and so on (<a href="page'+(_Index+1)+'.htm).

Table 4.1. Submenu System Patterns
 First ItemSecond ItemThird Item
hrefpage1.htmpage2.htm (Assumed)page3.htm
tabindex78 (Assumed)9
titleProduct 2, Page 1Product 2, Page 2 (Assumed)Product 2, Page 3
accesskey12 (Assumed)3
link textAbout Product 2Product 2 FAQProduct 2 Demo
classN/ABreadCrumbN/A


In addition, this link (when it is made) is also given a tabindex value, a title value, and an accesskey value (all of which are based on some variant of the _index parameter’s value and the Access_SubLinkTitle parameter’s value).

When these values are written to the child page, the first template expression in line 35 will have been evaluated (from the first @@ through the second @@).

When the PageNumber parameter and the RepeatRegion index are the same, the submenu element is styled with an opening <span> tag. When they are not the same, an anchor tag is opened with a pagelink. These opened tags must be properly closed. The next template expression does that by repeating the test. If it succeeds, the closing </span> tag is written. If the test fails, the closing </a> tag is written.

A final template expression is required to determine whether another breadcrumb will be needed (!_isLast). If it is, then a submenu element separator is written in preparation for the next repeated element. If it is not, then a null string is written, and the expression ends.

6.
Select Modify > Template Properties > Check Template Syntax to verify that the existing template markup is syntactically correct. If it fails, go back and check your markup from step 3.

7.
Save the template. A dialog might open stating that there is a potential issue with your newly inserted Editable Region. In this instance, you don’t want the user to be able to add paragraphs to the submenu system, so it’s okay to ignore this cautionary message and click OK to close it.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint