Main Navigation

The navigation used on all the pages for the presentation is contained in one include file. This allows us to change the text or even add and remove items by changing one file, and the changes are reflected throughout the presentation. CSS, with some support from server-side scripting, is used to control how the navigation appears and responds on the different pages.

HTML

The contents of the navigation include file are:

<ol id="topics">
    <li <!--chtml if sourceuri =~ "/why.*\.html"-->
        id="curtopic"<!--chtml endif-->>
        Why Standards-Based Coding?</li>
    <li <!--chtml if sourceuri =~ "/html.*\.html"-->
        id="curtopic"<!--chtml endif-->>
        HTML Coding</li>
    <li <!--chtml if sourceuri =~ "/css.*\.html"-->
        id="curtopic"<!--chtml endif-->>
        CSS Coding</li>
    <li <!--chtml if sourceuri =~ "/dhtml.*\.html"-->
        id="curtopic"<!--chtml endif-->>
        Javascript/DHTML Coding</li>
    <li <!--chtml if sourceuri =~ "/strategies.*\.html"-->
        id="curtopic"<!--chtml endif-->>
        Strategies</li>
</ol>
<ul id="nav">
    <li id="next"><a href="<!--chtml use nextlink-->">
        next</a></li>
    <li id="prev"><a href="<!--chtml use prevlink-->">
        prev</a></li>
</ul>

The first, ordered list defines the topics, and if the test for the current filename is a match, assigns the curtopic identifier to the appropriate item. Conditional HTML is used for this testing, but this method works with other scripting languages such as PHP or server-side includes. Non-scripting options are discussed at the end of this document.

The second, unordered list is used for our "Next" and "Prev" links to navigate forward and backward through the presentation. We once again use chtml for the actual link target - these will be defined before including this navigation file. We also declare identifiers for the two list items so we can individually control them. It's no coincidence that the next identifier is the same as used by the DHTML Presentation lists snippet; that code is used on pages where items are revealed one-by-one.

HTML caveat

The HTML for the navigation list is actually critical, since we need to make sure there is no space between the <li> and <a> tags for the "Next" item. This is because our code relies on the link being the first child of the list item. If there is intervening space, it's possible that an anonymous text node will be the first child instead. Normally one would ensure that the Javascript accounted for this possibility, but since the link is in one central file, it's just as easy to make sure it is formatted so the check does not need to be done.

Another possibility to work around needing no space between the link and anchor tags is to set the identifier on the link itself rather than the list item. We are already controlling the appearance of the list items individually on the title and summary pages, and the chosen implementation only uses one set of identifiers.

As can be seen, what may seem like an incomplete solution is sometimes appropriate, since time to develop a page may be a factor. If this presentation were to be used as a basis for a larger set, or if there were multiple instances of the navigation links, then additional work would have been put into making the Javascript more robust.

CSS

Our central style sheet positions the topics list to the lower-right corner of the page, as well as defining the font color and size. We explicitly set padding on the left to be sure the item numbers appear.

We also include a rule to make sure the color of the current topic is black:

ol#topics li#curtopic {
    color: black;
    background: transparent;
}

Since the Topics page uses this list as the main set of points, it has CSS which overrides many of the declarations in the central CSS file:

ol#topics {
    right: 20%;
    bottom: 32%;
    color: #000;
    font-size: 1em;
}

It may seem strange to allow the list to still be absolutely positioned, and to position it from the lower-right corner, but this is done to support the topic list animation used on this page.

For the navigation list, we turn off the item markers and then absolutely position the individual list items, as well as adjusting the font size:

ul#nav {
    list-style-type: none;
}
ul#nav li {
    position: absolute;
    top: 0;
    margin: 1em;
    font-size: 0.5em;
}
ul#nav li#next {
    right: 0;
}
ul#nav li#prev {
    left: 0;
}

For the actual navigation links, we set the color and remove any link underlines.

On the first and last pages of the presentation, we hide the link which we do not use. For example, on the first, title page, we include the CSS rule:

ul#nav li#prev {
    display: none;
}

Likewise, we disable the appearance of the list of topics for the first and last pages.

Using the Include File

Each HTML page of this presentation has the line:

<!--chtml include "lists.inc"-->

which appears at the end of the body. The CSS in the central file, as well as CSS in the individual files, controls the appearance of the lists. The top of each page also contains variable declarations to be used for next and previous links, as in why.html:

<!--chtml set prevlink="topics.html"-->
<!--chtml set nextlink="html.html"-->

Non-Scripting Options

If you are giving a presentation from a server which does not have some sort of scripting, there are some other options.

Topics list

The only part of the topics list which uses scripting is assigning the curtopic identifier which changes the color of the current topic. This can be done without scripting by assigning a unique identifier for each item, such as:

<li id="topicwhy">Why Standards-Based Coding?</li>
<li id="topichtml">HTML Coding</li>
<li id="topiccss">CSS Coding</li>
<li id="topicdhtml">DHTML Coding</li>
<li id="topicstrat">Strategies</li>

The next step is to explicitly set the color for the appropriate topic. For instance, in the page why.html you would use:

ol#topics id#topicwhy {
    color: black;
    background: transparent;
}

Navigation list

This list is more difficult to manipulate without scripting, since it's the actual target of the links which is being set. One possibility would be setting the link destination with Javascript, but browsers without Javascript available would not be able to use the links.

The most effective method is to probably manage the link destinations by hand. You can still take advantage of CSS styling, however.