The $$TOC$$ directive provides a mechanism for navigating the site.

The default generates a plain-text list of all major sections of the document along with an expanded list of any subordinate sections of the currently open section.  This format is suitable for designs where there is significant vertical space, as with the left hand column of this page.  There are some variations available within the TOC.

Parameter(s)	Description	Example
number beginning with a non-zero digit	a nested, expanding ordered list of sections	$1
number ten or greater	a fully-expanded, ordered list of section	$10
any (non-digit) string	a 'bullet' placed left of the section	$• 
dollar-separated combination	ordered list of sections with explicit 'bullet'	$1$• 
image URL	the image is placed to the left of the item	http://host/this.png

$$HIDE$$

This directive on the first line of a section suppresses its entry in the table-of-content (along with any subordinate sections) and also does not appear in the site-map or is returned by searches, etc.  It can be directly accessed and referenced from elsewhere in the site.  The "Reader Feedback" section uses $$HIDE$$.

$$NOTOC$$

This directive on the first line of a section suppresses the entry in the table-of-content (along with subordinate sections) but is visible in the site-map and is returned by searches.  The blog entries referenced in the "What's New?" section each uses a $$NOTOC$$ directive to reduce table-of-content clutter.

$$TOC$CSS$$

Generates the dynamic table-of-content seen on this site, where subordinate items pop out to the right when the parent is hovered over.  This is implemented using only CSS (Cascading Style Sheets) and requires no JavaScript.  It is known to work successfully with later versions of FireFox (all Gecko-based browsers in fact), Google Chrome, Microsoft Internet Explorer (5.5, 6.0, 7.0; best with 8.0), Safari and Opera.  A synonym is $$TOC$CSS$POP$$.

This directive takes one or more optional parameters.  The width in "em" (current font size) may be specified for one or all of the heading items; the first is the first-level list, the second the second-level list, etc.  In this way a particularly large heading may be accomodated without overflow occuring.  The following example accomodates a 15em wide second level-heading:

$$TOC$CSS$10$15$10$$

$$TOC$CSS$DROP$$

This CSS-variant provides a format designed for across a page.  This style of site layout provides a number of major headings above the content, each of which drops into any subordinate content with additional table items shown as necessary.

The primary TOC always displays the top-level sections, with immediate subordinate sections dropping down and further subordinates opening to the right.  The drop TOC can take the same optional width parameters as the pop TOC.

This is a screenshot showing the "Designing The Site" section

"Drop" Example

Although designed for the layout used in the Vdub (this) documentation and not optimal for using the $$TOC$CSS$DROP$$ format there is an example which provides a reasonable experience of how the across navigation operates with significant content.

Define the additional logical name

$ DEFINE /SYSTEM VWCMS_SITE_VDUB2 VWCMS_ROOT_VDUB:[VDUB]_INDEX.HTML

Add the following HTTPD$MAP rules (for WASD, equivalent mappings for other server environments will be needed) and load into the server

pass /_vdub2/* /vwcms_root_vdub/vdub2/*
map /vdub2/* /vwcms/vdub2/*

The alternate format should then be available via the URI

/vdub2/

How was this done?

The across example uses all the same resources and content as the Vdub site except for the site template.  This is _SITE2.HTML and is used by /vdbu2/ via conditional configuration.  In the Vdub __VWCMS.CONF configuration file is the conditional

[if-site] vdub2
[site-template] _site2.html
[if-end]

which directs VWcms to use the alternate template.

For additional information on conditional configuration see the source code module CONFIG.C

$$CRUMBS$$

This directive displays a breadcrumb-style navigation aid.  It can be used in both the template and content pages.

The keyword parameter style=.. can be used to directly apply a CSS style to the enclosing <DIV>.

A keyword-less parameter may be used to define the separator.  For example

$$CRUMBS$ ---> $$

is rendered

and with an image separator

$$CRUMBS$<img src="./crumb.png" style="padding:0 7px 0 7px;">$$

using the specified graphic