GENERATING WEBSITE NAVIGATION MENUS

Umbraco ships with a whole list of templates for generating lists of nodes for navigation, breadcrumbs, and other usage. This section provides some additional examples of how to work with XSLT and Razor to generate menus from your content structure. Razor is a view engine and is new in .NET 4.0. Razor allows you to access dynamic objects and display their associated data structures and values in the view (WebForm or other standard ASP.NET template). A common occurrence in websites is to have a multi-level top navigation with second level pages listed in dropdown menus. Listing 9-2 shows you how to do this.

image Because Umbraco renders exactly what you tell it to render, the output from Listing 9-2 can easily be styled using CSS and JavaScript to create an engaging and functional menu.

LISTING 9-2: TwoTierTopNav.xslt

image
<?xml version=“1.0” encoding=“UTF-8”?>
<!DOCTYPE xsl:stylesheet [
    <!ENTITY nbsp “&#x00A0;”>
 ]> <xsl:stylesheet version=“1.0” xmlns:xsl=“http://www.w3.org/1999/XSL/Transform” xmlns:msxml=“urn:schemas-microsoft-com:xslt” xmlns:umbraco.library=“urn:umbraco.library” xmlns:Exslt.ExsltCommon=“urn:Exslt.ExsltCommon” xmlns:Exslt.ExsltDatesAndTimes=“urn:Exslt.ExsltDatesAndTimes” xmlns:Exslt.ExsltMath=“urn:Exslt.ExsltMath” xmlns:Exslt.ExsltRegularExpressions=“urn:Exslt.ExsltRegularExpressions” ...

Get Umbraco User's Guide now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.