--------------------------------
Title
--------------------------------
Entries Navigation Menu


--------------------------------
Description
--------------------------------
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.



--------------------------------
Body
--------------------------------
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;
    }



--------------------------------
Date
--------------------------------
24 May 2009 7:44am


--------------------------------
Section
--------------------------------
Tutorials


--------------------------------
Category
--------------------------------
Technology


--------------------------------
Tags
--------------------------------
symphony cms, xslt