Solprovider Lenya Kongregate Registration for Free Flash Games and Chat with solprovider

Adding a Menu of the Header tags within a Document

This explains how to add an automatically updated menu of all the Header tags within a Lenya document. It handles all 6 levels of headers (H1, H2, H3, H4, H5, H6), and only requires changing the XSL and CSS.

This solution depends on CSS for formatting the data; the XML data is never hierarchical. I have not found an easy method to create a hierarchical data structure from flat (non-hierarchical) data using just XSL. This means an H4 directly under an H2 will still be formatted (indented) as an H4, which is probably the desired display.

The anchors are named like "h3-7" (tag name + "-" + absolute position) to solves the issues of duplicates and url-encoding the text, but makes the names much less memorable. The tag name and the dash are not necessary; they are remnants of earlier attempts.

Instructions


FILE: {pub}/xsl/page2xhtml.xsl

Put this line where you want the headers menu:
<xsl:apply-templates select="//xhtml:h1|//xhtml:h2|//xhtml:h3|//xhtml:h4|//xhtml:h5|//xhtml:h6" mode="headers"/>

Add these matches:
<!-- Headers Menu -->
<xsl:template match="xhtml:h1|xhtml:h2|xhtml:h3|xhtml:h4|xhtml:h5|xhtml:h6" mode="headers">
<xsl:element name="div">
<xsl:attribute name="class">header<xsl:value-of select="substring-after(name(), 'h')"/></xsl:attribute>
<a href="#{name()}-{position()}"><xsl:value-of select="."/></a>
</xsl:element>
</xsl:template>
<!-- Add Named Anchors to Headers -->
<xsl:template match="xhtml:h1|xhtml:h2|xhtml:h3|xhtml:h4|xhtml:h5|xhtml:h6">
<xsl:variable name="count"><xsl:number count="xhtml:h1|xhtml:h2|xhtml:h3|xhtml:h4|xhtml:h5|xhtml:h6"/></xsl:variable>
<a name="{name()}-{$count}"/>
<xsl:copy><xsl:apply-templates select="@*|node()"/></xsl:copy>
</xsl:template>


FILE: {pub}/resources/shared/css/page.css
Add this to your CSS (to indent each level):

/* Header Menu */
.header1 { padding: 0px 0px 0px 0px; }
.header2 { padding: 0px 0px 0px 10px; }
.header3 { padding: 0px 0px 0px 20px; }
.header4 { padding: 0px 0px 0px 30px; }
.header5 { padding: 0px 0px 0px 40px; }
.header6 { padding: 0px 0px 0px 50px; }


<< Menu: SubpagesMenu: External Links >>

Contact Solprovider
Paul Ercolino