DesignProjectX

Entries Navigation Menu

Posted 24 May 2009 in Technology | XSL | XML | Text

Using XSLT and Symphony, it is a fairly simple matter to develop a list of entries that can indicate the currently selected entry using a URL parameter and an xsl:if conditional instruction. We will be relying heavily on attribute value templates to build the links for the pages.

Starting with the XML for the entries data, we can build the XSLT template to display a list of entries in descending chronological order. This is not very different from creating a list of entries excerpts. In fact, it’s really a simplified version of that list.

<ul class="menu">
    <xsl:for-each select="entries/entry">
        <xsl:call-template name="entries-menu-items"/>
    </xsl:for-each>
</ul>

The entries menu items template would look something like this:

<xsl:template name="entries-menu-items">
    <li><a href="{$root}/{$root-page}/{title/@handle}/"><xsl:value-of select="title"/></a></li>
</xsl:template>

Then, to indicate the currently selected article, simply add a conditional to test whether the entry title matches the currently selected entry handle, which is passed to the $entry parameter configured in the page template as a URL parameter. Using an xsl:attribute instruction, a class of “current” is added to the currently selected list item element with the following xsl:if conditional:

<xsl:if test="$entry = title/@handle">
    <xsl:attribute name="class">current</xsl:attribute>
</xsl:if>

Then, the list items template would look like this:

<xsl:template name="entries-menu-items">
    <li>
        <xsl:if test="$entry = title/@handle">
            <xsl:attribute name="class">current</xsl:attribute>
        </xsl:if>
        <a href="{$root}/{$root-page}/{title/@handle}/"><xsl:value-of select="title"/></a>
    </li>
</xsl:template>

Add the appropriate CSS rule to style current links.

ul.menu li.current a {
    color:#000;
    background:#fff;
}