Creating a Navigation Menu

by Andreas Hartmann

This tutorial is directed to Cocoon newbies who want to get an idea how to start a Cocoon project. Some basic XSLT knowledge is needed to understand the transformations. It is also helpful to be familiar with the Cocoon sitemap concept. The tutorial shows one possibility for creating the navigation elements of a typical website with a simple hierarchic structure. All pages contain a menu bar on the left, the currently selected item is highlighted.

In this tutorial, we will create a sample website for the bicycle manufacturer "Bonebreaker Bicycles".

(click on image for larger version)

Bonebreaker site screenshot

The tutorial illustrates some of the most important advantages of Cocoon:

  • Separation of layout and content
  • Easy maintainance
  • Reusability

All data and layout files can be changed separately.

You can reuse practically all layout files - it is possible to create a different site simply by replacing the data files and changing some entries in the sitemap.

You can download the tutorial files as a Windows ZIP file. You may have to change one or two entries in some files. Look for bold italic passages in the tutorial that indicate such changes.