blob: 8cbb95a7d441c1741cac5430eb84a1140de06f5a [file] [log] [blame]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="Apache Forrest" name="Generator">
<meta name="Forrest-version" content="0.9-dev">
<meta name="Forrest-skin-name" content="pelt">
<title>Site Navigation How-To</title>
<link type="text/css" href="../../../skin/basic.css" rel="stylesheet">
<link media="screen" type="text/css" href="../../../skin/screen.css" rel="stylesheet">
<link media="print" type="text/css" href="../../../skin/print.css" rel="stylesheet">
<link type="text/css" href="../../../skin/profile.css" rel="stylesheet">
<script src="../../../skin/getBlank.js" language="javascript" type="text/javascript"></script><script src="../../../skin/getMenu.js" language="javascript" type="text/javascript"></script><script src="../../../skin/fontsize.js" language="javascript" type="text/javascript"></script>
<link rel="shortcut icon" href="../../../favicon.ico">
</head>
<body onload="init()">
<script type="text/javascript">ndeSetTextSize();</script>
<div id="top">
<!--+
|breadtrail
+-->
<div class="breadtrail">
<a href="http://www.apache.org/">apache</a> &gt; <a href="http://lenya.apache.org/">lenya</a><script src="../../../skin/breadcrumbs.js" language="JavaScript" type="text/javascript"></script>
</div>
<!--+
|header
+-->
<div class="header">
<!--+
|start group logo
+-->
<div class="grouplogo">
<a href=""><img class="logoImage" alt="Lenya" src="../../../images/apache-lenya-light.png" title=""></a>
</div>
<!--+
|end group logo
+-->
<!--+
|start Project Logo
+-->
<div class="projectlogo">
<a href=""></a>
</div>
<!--+
|end Project Logo
+-->
<!--+
|start Search
+-->
<div class="searchbox">
<form action="http://www.google.com/search" method="get" class="roundtopsmall">
<input value="lenya.apache.org" name="sitesearch" type="hidden"><input onFocus="getBlank (this, 'Search the site with ');" size="25" name="q" id="query" type="text" value="Search the site with ">&nbsp;
<input name="Search" value="Search" type="submit">
</form>
</div>
<!--+
|end search
+-->
<!--+
|start Tabs
+-->
<ul id="tabs">
<li>
<a class="unselected" href="../../../index.html">Project</a>
</li>
<li>
<a class="unselected" href="../../../docs/index.html">Developer</a>
</li>
<li>
<a class="unselected" href="../../../community/index.html">Community</a>
</li>
<li>
<a class="unselected" href="../../../docs/2_0_x/index.html">Version 2.0</a>
</li>
<li class="current">
<a class="selected" href="../../../docs/1_2_x/index.html">Version 1.2</a>
</li>
</ul>
<!--+
|end Tabs
+-->
</div>
</div>
<div id="main">
<div id="publishedStrip">
<!--+
|start Subtabs
+-->
<div id="level2tabs"></div>
<!--+
|end Endtabs
+-->
<script type="text/javascript"><!--
document.write("Last Published: " + document.lastModified);
// --></script>
</div>
<!--+
|breadtrail
+-->
<div class="breadtrail">
&nbsp;
</div>
<!--+
|start Menu, mainarea
+-->
<!--+
|start Menu
+-->
<div id="menu">
<div onclick="SwitchMenu('menu_selected_1.1', '../../../skin/')" id="menu_selected_1.1Title" class="menutitle" style="background-image: url('../../../skin/images/chapter_open.gif');">Version 1.2</div>
<div id="menu_selected_1.1" class="selectedmenuitemgroup" style="display: block;">
<div class="menuitem">
<a href="../../../docs/1_2_x/index.html">Index</a>
</div>
<div onclick="SwitchMenu('menu_1.1.2', '../../../skin/')" id="menu_1.1.2Title" class="menutitle">Installation</div>
<div id="menu_1.1.2" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/installation/index.html">Download</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/installation/subversion.html">Subversion Access</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/installation/source_version.html">Install Instructions</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.3', '../../../skin/')" id="menu_1.1.3Title" class="menutitle">Tutorial</div>
<div id="menu_1.1.3" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/index.html">Introduction</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/understanding_lenya.html">1. Understanding Lenya</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/installing_lenya.html">2. Installing Lenya</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/anatomy_of_the_pipeline.html">3. Anatomy of the Pipeline</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/editing_in_lenya.html">4. Editing in Lenya</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/custom_navigation.html">5. Custom Navigation in Lenya</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/mod_proxy_and_lenya.html">6a. Mod Proxy and Lenya</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/mod_proxy_and_lenya_continued.html">6b. Mod Proxy and Lenya</a>
</div>
</div>
<div onclick="SwitchMenu('menu_selected_1.1.4', '../../../skin/')" id="menu_selected_1.1.4Title" class="menutitle" style="background-image: url('../../../skin/images/chapter_open.gif');">How-To</div>
<div id="menu_selected_1.1.4" class="selectedmenuitemgroup" style="display: block;">
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/faq.html">FAQ</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/new_publication.html">New Publication</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/deploy_publication.html">Deploy Publication</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/look_and_feel.html">Look and Feel</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/custom_resourcetype.html">Custom Resource Type</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/new_mime_type.html">Adding Mime Types</a>
</div>
<div class="menupage">
<div class="menupagetitle">Site Navigation</div>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/ldap_authentication.html">LDAP Authentication</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/cms_menus.html">CMS Menus</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/cms_screens.html">CMS Screens</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/search.html">Search Publications</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/external_data.html">External Data</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/unittests.html">Unit Tests</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5', '../../../skin/')" id="menu_1.1.5Title" class="menutitle">Components</div>
<div id="menu_1.1.5" class="menuitemgroup">
<div onclick="SwitchMenu('menu_1.1.5.1', '../../../skin/')" id="menu_1.1.5.1Title" class="menutitle">Access&nbsp;Control</div>
<div id="menu_1.1.5.1" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/terms.html">Basic Terms</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/accesscontrollers.html">Access&nbsp;Controllers</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/accesscontrollerresolvers.html">Access Controller Resolvers</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/authenticators.html">Authenticators</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/authorizers.html">Authorizers</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/policymanagers.html">Policies and Policy&nbsp;Managers</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/accreditablemanagers.html">Accreditable&nbsp;Managers</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/ssl.html">SSL Encryption</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.2', '../../../skin/')" id="menu_1.1.5.2Title" class="menutitle">Authoring</div>
<div id="menu_1.1.5.2" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/authoring/adding-document-creator.html">Adding a new document creator</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/authoring/image-upload.html">Image Upload</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/authoring/openoffice.html">OpenOffice</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.3', '../../../skin/')" id="menu_1.1.5.3Title" class="menutitle">Deployment</div>
<div id="menu_1.1.5.3" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/deployment/proxying.html">Proxying</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.4', '../../../skin/')" id="menu_1.1.5.4Title" class="menutitle">Editors</div>
<div id="menu_1.1.5.4" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/editors/htmlform.html">HTML Form Editor</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/editors/1form.html">HTML One Form Editor</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/editors/bxe.html">Bitflux Editor</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/editors/kupu.html">Kupu</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/editors/xopus.html">Xopus</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.5', '../../../skin/')" id="menu_1.1.5.5Title" class="menutitle">Layout</div>
<div id="menu_1.1.5.5" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/layout/navigation.html">Navigation</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/layout/xhtml-templating.html">XHTML templating</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/layout/static-resources.html">Serving static resources</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/layout/lenya-menubar.html">Lenya Menubar</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.6', '../../../skin/')" id="menu_1.1.5.6Title" class="menutitle">Publication</div>
<div id="menu_1.1.5.6" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/publication/pageenvelopemodule.html">PageEnvelopeModule</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/publication/siteTree.html">Site tree</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.7', '../../../skin/')" id="menu_1.1.5.7Title" class="menutitle">Resource&nbsp;Types</div>
<div id="menu_1.1.5.7" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/resource-types/resource-types.html">Resource&nbsp;Types</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.8', '../../../skin/')" id="menu_1.1.5.8Title" class="menutitle">Revision Control</div>
<div id="menu_1.1.5.8" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/revisioncontrol/revisioncontroller.html">Revision Controller</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/revisioncontrol/rcml.html">RCML</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/revisioncontrol/checkin.html">Check In</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/revisioncontrol/checkout.html">Check Out</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/revisioncontrol/version.html">Revisions</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/revisioncontrol/rollback.html">Rollback</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.9', '../../../skin/')" id="menu_1.1.5.9Title" class="menutitle">Repository</div>
<div id="menu_1.1.5.9" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/repository/index.html">WebDAV Servers</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.10', '../../../skin/')" id="menu_1.1.5.10Title" class="menutitle">Search</div>
<div id="menu_1.1.5.10" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/search/lucene.html">Searching with Lucene</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.11', '../../../skin/')" id="menu_1.1.5.11Title" class="menutitle">URI Handling</div>
<div id="menu_1.1.5.11" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/uri-handling/URIParametrizer.html">URI Parametrizer</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/uri-handling/standardURI.html">URI Scheme</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/uri-handling/usecases.html">Usecases</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.12', '../../../skin/')" id="menu_1.1.5.12Title" class="menutitle">Asset Management</div>
<div id="menu_1.1.5.12" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/asset-management/management.html">Asset Management</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.13', '../../../skin/')" id="menu_1.1.5.13Title" class="menutitle">Link Management</div>
<div id="menu_1.1.5.13" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/link-management/link-management.html">Link Management</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.14', '../../../skin/')" id="menu_1.1.5.14Title" class="menutitle">Meta Data</div>
<div id="menu_1.1.5.14" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/metadata/metadata.html">Meta Data Handling</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.15', '../../../skin/')" id="menu_1.1.5.15Title" class="menutitle">Multilingual Documents</div>
<div id="menu_1.1.5.15" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/multilingual/multilingual.html">Multilingual Document Handling</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.16', '../../../skin/')" id="menu_1.1.5.16Title" class="menutitle">Tasks</div>
<div id="menu_1.1.5.16" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/concept.html">The Task Concept</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/defining.html">Defining Tasks</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/taskaction.html">The TaskAction</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/scheduling.html">Scheduling a Task</a>
</div>
<div onclick="SwitchMenu('menu_1.1.5.16.5', '../../../skin/')" id="menu_1.1.5.16.5Title" class="menutitle">Included tasks</div>
<div id="menu_1.1.5.16.5" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/anttask.html">AntTask</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/publisher.html">DefaultFilePublisher</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/exporter.html">StaticHTMLExporter</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/mailtask.html">MailTask</a>
</div>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/development.html">Developing Tasks</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.17', '../../../skin/')" id="menu_1.1.5.17Title" class="menutitle">Workflow</div>
<div id="menu_1.1.5.17" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/workflow/terms.html">Terms</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/workflow/state-machine.html">The State Machine</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/workflow/configuration.html">Configuration</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/workflow/implementation.html">Implementation</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.18', '../../../skin/')" id="menu_1.1.5.18Title" class="menutitle">Site Management</div>
<div id="menu_1.1.5.18" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/archive.html">Archive</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/copy.html">Copy</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/deactivate.html">Deactivate</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/delete.html">Delete</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/deletetrash.html">Delete the trash</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/move.html">Move</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/moveupdown.html">Move Up/Down</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/rename.html">Rename</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/restore.html">Restore</a>
</div>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.6', '../../../skin/')" id="menu_1.1.6Title" class="menutitle">Miscellaneous</div>
<div id="menu_1.1.6" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/misc/namespaces.html">Namespaces</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/misc/reserved_names.html">Reserved Names</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/misc/xinclude-processor.html">XInclude Processor</a>
</div>
</div>
<div class="menuitem">
<a href="../../../apidocs/1.2/index.html">1.2 API (Javadoc)</a>
</div>
</div>
<div id="credit"></div>
<div id="roundbottom">
<img style="display: none" class="corner" height="15" width="15" alt="" src="../../../skin/images/rc-b-l-15-1body-2menu-3menu.png"></div>
<!--+
|alternative credits
+-->
<div id="credit2">
<a href="http://wiki.apache.org/lenya/MeetingFreiburg2008"><img border="0" title="Meeting Freiburg 2008" alt="Meeting Freiburg 2008 - logo" src="../../../images/apache-lenya-meeting-freiburg-2008.png" style="width: 160px;height: 40px;"></a>
</div>
</div>
<!--+
|end Menu
+-->
<!--+
|start content
+-->
<div id="content">
<div title="Portable Document Format" class="pdflink">
<a class="dida" href="site_navigation.pdf"><img alt="PDF -icon" src="../../../skin/images/pdfdoc.gif" class="skin"><br>
PDF</a>
</div>
<h1>Site Navigation How-To</h1>
<div id="front-matter">
<div id="minitoc-area">
<ul class="minitoc">
<li>
<a href="#Technical+Background%3A+How+Lenya+builds+the+site+navigation">Technical Background: How Lenya builds the site navigation</a>
</li>
<li>
<a href="#Tabs+as+main+navigation%2C+menubar+as+sub-navigation">Tabs as main navigation, menubar as sub-navigation</a>
</li>
<li>
<a href="#Simple+solution%3A+Hide+the+menus+using+CSS">Simple solution: Hide the menus using CSS</a>
</li>
<li>
<a href="#Advanced+solution%3A+Exclude+the+menus+using+XSLT">Advanced solution: Exclude the menus using XSLT</a>
</li>
</ul>
</div>
</div>
<p>One of the ingredients for a good website is a well structured navigation. The Default publication in Lenya comes with a <a href="../../../docs/1_2_x/components/layout/navigation.html">navigation framework</a> that is made up of horizontal tabs, breadcrumbs and a menu on the left. A lot of websites use these navigational elements, but depending on the site you're building, you might want to change the navigation or structure if differently. </p>
<a name="N10015"></a><a name="Technical+Background%3A+How+Lenya+builds+the+site+navigation"></a>
<h2 class="h3">Technical Background: How Lenya builds the site navigation</h2>
<div class="section">
<p>The source of all navigation elements is the sitetree, which you can find in <em>PUB_HOME/authoring/sitetree.xml</em>, <em>PUB_HOME/live/sitetree.xml</em>, <em>PUB_HOME/trash/sitetree.xml</em> or <em>PUB_HOME/archive/sitetree.xml</em> depending on the relevant area. </p>
<p>The tree you can see in the left half of the screen when you access the <em>Site</em> tab in authoring mode is pretty much a 1:1 representation of the site tree. </p>
<p>The sitetree.xml document of the default publication which we will use as an example here looks like this: </p>
<pre class="code">
&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;site i18n:attr="label" label="Authoring"
xmlns="http://apache.org/cocoon/lenya/sitetree/1.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation=
"http://apache.org/cocoon/lenya/sitetree/1.0
../../../../resources/entities/sitetree.xsd"
xmlns:i18n="http://apache.org/cocoon/i18n/2.1"
&gt;
&lt;node id="index"&gt;
&lt;label xml:lang="en"&gt;Home&lt;/label&gt;
&lt;label xml:lang="de"&gt;Home&lt;/label&gt;
&lt;/node&gt;
&lt;node id="tutorial"&gt;
&lt;label xml:lang="en"&gt;Tutorial&lt;/label&gt;
&lt;label xml:lang="de"&gt;Tutorial&lt;/label&gt;
&lt;node id="new_doctype"&gt;
&lt;label xml:lang="en"&gt;Create new doctype&lt;/label&gt;
&lt;/node&gt;
&lt;/node&gt;
&lt;node id="concepts"&gt;
&lt;label xml:lang="en"&gt;Concepts (english only)&lt;/label&gt;
&lt;/node&gt;
&lt;node id="features"&gt;
&lt;label xml:lang="en"&gt;Features&lt;/label&gt;
&lt;label xml:lang="de"&gt;Funktionen&lt;/label&gt;
&lt;/node&gt;
&lt;node id="doctypes"&gt;
&lt;label xml:lang="en"&gt;Document Type Examples&lt;/label&gt;
&lt;label xml:lang="de"&gt;Dokumenttyp Beispiele&lt;/label&gt;
&lt;node id="xhtml-document"&gt;
&lt;label xml:lang="en"&gt;XHTML Doctype&lt;/label&gt;
&lt;label xml:lang="de"&gt;XHTML Dokumenttyp&lt;/label&gt;
&lt;/node&gt;
&lt;/node&gt;
&lt;/site&gt;
</pre>
<p>The default publication defines three navigation elements: </p>
<ul>
<li>
<p> Tabs (horizontal) </p>
</li>
<li>
<p> Breadcrumbs </p>
</li>
<li>
<p> Menu (left) </p>
</li>
</ul>
<p>Each of them is built by applying a specific XSLT to sitetree.xml (compare: <a href="../../../docs/1_2_x/components/layout/navigation.html">navigation framework</a>). </p>
<p>In case you need additional navigation elements besides tabs, breadcrumbs and menus, you can set up an additional XSLT file and integrate it into the sitemap. (More on this later.) </p>
</div>
<a name="N10056"></a><a name="Tabs+as+main+navigation%2C+menubar+as+sub-navigation"></a>
<h2 class="h3">Tabs as main navigation, menubar as sub-navigation</h2>
<div class="section">
<p>Depending on the amount of content on your site, you may opt for different styles of navigation. You might for example get rid of the tabs and only use the menu on the left. You can also use the tabs and the menu as parallel means of navigation, which is what the default publication does. If you have a lot of content organized on multiple levels, you might also choose to use the tabs as the first level of navigation and the menu as a second level. </p>
<p>If your sitetree for example looks like this: </p>
<p>
</p>
<ul>
<li>
<p> Home </p>
</li>
<li>
<p> Products </p>
<ul>
<li>
<p> Consumer Products </p>
<ul>
<li>
<p> Product Line A </p>
</li>
<li>
<p> Product Line B </p>
</li>
<li>
<p> Product Line C </p>
</li>
</ul>
</li>
<li>
<p> Industrial Products </p>
</li>
</ul>
</li>
<li>
<p> Services </p>
<ul>
<li>
<p> Maintainance Contracts </p>
</li>
<li>
<p> 24-hour Emergency Hotline </p>
</li>
</ul>
</li>
</ul>
<p>
</p>
<p>a typical navigation could look this this: </p>
<pre class="code">
+--------------------------------------------------------------------
| | *HOME* | Products | Services |
+--------------------------------------------------------------------
|
</pre>
<p>when the user clicks on Producs, a menu will show up: </p>
<pre class="code">
+--------------------------------------------------------------------
| | Home | *PRODUCTS* | Services |
+--------------------------------------------------------------------
|
| - Consumer Products
| - Industrial Products
|
</pre>
<p>clicking on Services will show up a different menu: </p>
<pre class="code">
+--------------------------------------------------------------------
| | Home | Products | *SERVICES* |
+--------------------------------------------------------------------
|
| - Maintainance
| Contracts
| - 24-hour Emergency
| Hotline
</pre>
</div>
<a name="N100BB"></a><a name="Simple+solution%3A+Hide+the+menus+using+CSS"></a>
<h2 class="h3">Simple solution: Hide the menus using CSS</h2>
<div class="section">
<p>This behaviour can be achieved by changing the CSS of the default publication. Edit the file </p>
<pre class="code">
$PUB_HOME/resources/shared/css/page.css
</pre>
<p>and add the following snippet, preferrably beneath the existing <em>menublock</em> declarations: </p>
<pre class="code">
.menublock-1 {
display: none;
}
</pre>
<p>This way, all non-selected first level menu entries are hidden, which comprises all menu entries belonging to the other tabs. </p>
</div>
<a name="N100D5"></a><a name="Advanced+solution%3A+Exclude+the+menus+using+XSLT"></a>
<h2 class="h3">Advanced solution: Exclude the menus using XSLT</h2>
<div class="section">
<p>In this approach, you use a custom XSLT stylesheet to generate the menubar XHTML snippet. The file has to be placed at </p>
<pre class="code">
$PUB_HOME/lenya/xslt/navigation/menu.xsl
</pre>
<p>Note the step <em>/lenya</em> in the path, this is necessary to tell Lenya that you're overriding a file from the core. The stylesheet might look as follows: </p>
<pre class="code">
&lt;xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:nav="http://apache.org/cocoon/lenya/navigation/1.0"
xmlns="http://www.w3.org/1999/xhtml"
exclude-result-prefixes="nav"
&gt;
&lt;xsl:import href="../../../../../xslt/navigation/menu.xsl"/&gt;
&lt;xsl:template match="nav:site/nav:node[not(descendant-or-self::nav:node[@current = 'true'])]"/&gt;
&lt;xsl:template match="nav:site/nav:node[descendant-or-self::nav:node[@current = 'true']]"&gt;
&lt;div class="menublock-selected-{count(ancestor-or-self::nav:node)}"&gt;
&lt;xsl:apply-templates select="nav:node"/&gt;
&lt;/div&gt;
&lt;/xsl:template&gt;
&lt;/xsl:stylesheet&gt;
</pre>
<ul>
<li>
<p> First, you import the core menu XSL so that you can reuse most of the core functionality. </p>
</li>
<li>
<p> The first <em>&lt;xsl:template&gt;</em> excludes all top-level <em>&lt;nav:node&gt;</em> entries which don't contain the current item. </p>
</li>
<li>
<p> The second <em>&lt;xsl:template&gt;</em> is optional. If you include it, the top-level menu items won't be displayed in the menubar. </p>
</li>
</ul>
</div>
</div>
<!--+
|end content
+-->
<div class="clearboth">&nbsp;</div>
</div>
<div id="footer">
<!--+
|start bottomstrip
+-->
<div class="lastmodified">
<script type="text/javascript"><!--
document.write("Last Published: " + document.lastModified);
// --></script>
</div>
<div class="copyright">
Copyright &copy;
2002-2007 <a href="http://www.apache.org/licenses/LICENSE-2.0">The Apache Software Foundation.</a>
</div>
<div id="feedback">
Send feedback about the website to:
<a id="feedbackto" href="mailto:dev@lenya.apache.org?subject=Feedback%C2%A0for%C2%A0docs/1_2_x/how-to/site_navigation.html">dev@lenya.apache.org</a>
</div>
<!--+
|end bottomstrip
+-->
</div>
</body>
</html>