Combining Menu and Page

by Andreas Hartmann

The file menupage.xsl is used to combine the navigation menu and the actual page.

<?xml version="1.0"?>
<xsl:stylesheet
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version='1.0'
    xmlns:xlink="http://www.w3.org/1999/xlink">

Import the XSLT file to create the navigation menu.

<xsl:import href="menu.xsl"/>

The parameters:

  • section: The currently selected section.
  • toc-file: The XML file that contains the table of contents.
  • request-url: The file that was requested. Used to label the currently selected menu item.
  • css-stylesheet: The CSS stylesheet for the page.
  • base-url: The base URL of the site. This is coded in a parameter so that the XSLT files can easily be reused for other sites.
<xsl:param name="toc-file"/>
<xsl:param name="section"/>
<xsl:param name="request-url"/>
<xsl:param name="css-stylesheet"/>
<xsl:param name="base-url"/>
  
<xsl:template match="/"><break/>
  <html>
    <head>
      <title>Bonebreaker Bicycles</title>

Include a link to a CSS stylesheet to layout the page.

      <link rel="stylesheet" type="text/css"
          href="{$base-url}/{$css-stylesheet}"/>

Include a link to a CSS stylesheet to layout the navigation menu.

      <link rel="stylesheet" type="text/css"
          href="{$base-url}/menu.css"/>
    </head>
  
    <body>

Create the page header.

      <table bgcolor="#9999FF" width="100%" border="0"
        cellpadding="10" cellspacing="0">
        <tr><td><h1>Bonebreaker Bicycles</h1></td></tr>
      </table>

The table to divide the window into menu (left) and page (right).

      <table border="0" cellpadding="10" cellspacing="0" height="100%">
        <tr>

The left table cell includes the navigation menu. The XML file $toc-file is included with the document() function and transformed by the imported XSLT file menu.xsl.

          <td width="200" bgcolor="#CCCCFF" valign="top">
            <xsl:apply-templates select="document($toc-file)/*"/>
          </td>

The right table cell includes the actual page. The XML page was already transformed into an HTML fragment. This fragment was passed to this XSLT file by the Cocoon pipeline and is copied into the HTML result tree with <xsl:copy-of>.

          <td valign="top">
            <table border="0" cellpadding="10" cellspacing="0">
              <tr>
                <td>
                  <xsl:copy-of select="."/>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </body>
  </html> 
        
</xsl:template>
              
</xsl:stylesheet>