FirstSpirit Online Documentation - Navigating a website

Start page / Tutorials / First project / Working with page templates / Navigation

Website navigation

Navigation is one of the most important elements of a website. Implementing navigation in FirstSpirit is done using functions that are defined on the template set tabs. You should therefore select the html (HTML) tab in the editing area again.

The functions are always defined within the <CMS_HEADER> area. For our test project, we will use the navigation function.

As already explained when we specified the project layout, the navigation is split into two navigation levels with the following reference names:

First navigation level: pt_mainNavigation
Second navigation level: pt_subNavigation

First navigation level: pt_mainNavigation

	<CMS_FUNCTION name="Navigation" resultname="pt_mainNavigation">
		   <CMS_PARAM name="expansionVisibility" value="all" />
   		<CMS_PARAM name="wholePathSelected" value="1" />

   		<CMS_ARRAY_PARAM name="innerBeginHTML">
      			<CMS_ARRAY_ELEMENT><![CDATA[<ul>]]></CMS_ARRAY_ELEMENT>
   		</CMS_ARRAY_PARAM>

		   <CMS_ARRAY_PARAM name="beginHTML">
      			<CMS_ARRAY_ELEMENT><![CDATA[
              <!-- first level -->
              <li class="textnavi">
      ]]></CMS_ARRAY_ELEMENT>
      			<CMS_ARRAY_ELEMENT><![CDATA[
              <!-- second level -->
              <li>
      ]]></CMS_ARRAY_ELEMENT>
   		</CMS_ARRAY_PARAM>

   		<CMS_ARRAY_PARAM name="unselectedHTML">
      			<CMS_ARRAY_ELEMENT><![CDATA[<a class="unselected" href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label.convert2)$</a><br />]]></CMS_ARRAY_ELEMENT>
      			<CMS_ARRAY_ELEMENT><![CDATA[<a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label.convert2)$</a>]]></CMS_ARRAY_ELEMENT>
   		</CMS_ARRAY_PARAM>

		   <CMS_ARRAY_PARAM name="selectedHTML">
      			<CMS_ARRAY_ELEMENT><![CDATA[<a class="selected" href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label.convert2)$</a><br />]]></CMS_ARRAY_ELEMENT>
      			<CMS_ARRAY_ELEMENT><![CDATA[<a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label.convert2)$</a>]]></CMS_ARRAY_ELEMENT>
   		</CMS_ARRAY_PARAM>

   		<CMS_ARRAY_PARAM name="endHTML">
      			<CMS_ARRAY_ELEMENT index="0..1"><![CDATA[
              </li>
              <!-- /$CMS_VALUE(if(#nav.level == 0, "first", "second"))$ level -->
      ]]></CMS_ARRAY_ELEMENT>
   		</CMS_ARRAY_PARAM>

   		<CMS_ARRAY_PARAM name="innerEndHTML">
      			<CMS_ARRAY_ELEMENT><![CDATA[</ul>]]></CMS_ARRAY_ELEMENT>
   		</CMS_ARRAY_PARAM>

	</CMS_FUNCTION>

Description of the navigation function elements for the first navigation level


<CMS_FUNCTION name="Navigation">	Calls up the navigation function.
resultname="pt_mainNavigation"	Reference name used to output the result of the function later.
<CMS_PARAM name="expansionVisibility" value="all"/>	The expansionVisibillity parameter specifies which areas of the site store are to be displayed in the navigation. The value "all" means that the entire navigation tree is expanded completely and all elements are displayed.
<CMS_PARAM name="wholePathSelected" value="1"/>	The wholePathSelected parameter specifies how the expanded navigation levels are to be displayed. "1" means that the entire path to the current element is displayed as "selected".
<CMS_ARRAY_PARAM name="innerBeginHTML"> <CMS_ARRAY_PARAM name="innerEndHTML">	The parameters innerBeginHTML and innerEndHTML are used to enter additional information about the HTML fragments, which are to include all children of the navigation entry.
<CMS_ARRAY_ELEMENT><![CDATA[...>]]> </CMS_ARRAY_ELEMENT	Since usually every navigation menu item refers to a new page, every array element requires a <![CDATA[...]]> tag for adding a link. A link can be added within the tags using <a href=““>...</a>.
<CMS_ARRAY_PARAM name="beginHTML"> <CMS_ARRAY_PARAM name="endHTML">	The two parameters beginHTML and endHTML are used to define the template fragments for each individual navigation level, which are each output before (beginHTML) or after (endHTML) an element. This means that each entry of the corresponding level and all its subitems are included within these two parameters.
<CMS_ARRAY_PARAM name="unselectedHTML"> <CMS_ARRAY_PARAM name="selectedHTML">	The parameters selectedHTML and unselectedHTML are used to define the corresponding template fragments to be used when outputting an element for each level to be displayed. "selectedHTML" covers the selected areas and "unselectedHTML" covers the unselected areas of the navigation. For each level to be displayed, a corresponding <CMS_ARRAY_ELEMENT> must be added within the parameter.

Second navigation level: pt_subNavigation

		<CMS_FUNCTION name="Navigation" resultname="pt_subNavigation">
		   <CMS_PARAM name="expansionVisibility" value="standard"/>
   		<CMS_PARAM name="wholePathSelected" value="1"/>

   		<CMS_ARRAY_PARAM name="innerBeginHTML">
      			<CMS_ARRAY_ELEMENT index="1"><![CDATA[<li class="without"><ul>]]></CMS_ARRAY_ELEMENT>
   		</CMS_ARRAY_PARAM>

   		<CMS_ARRAY_PARAM name="unselectedHTML">
      			<CMS_ARRAY_ELEMENT index="1..4"><![CDATA[<li><a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label.convert2)$</a></li>]]></CMS_ARRAY_ELEMENT>
   		</CMS_ARRAY_PARAM>

   		<CMS_ARRAY_PARAM name="selectedHTML">
      			<CMS_ARRAY_ELEMENT index="1..4"><![CDATA[<li><a href="$CMS_REF(#nav.ref)$" class="high">$CMS_VALUE(#nav.label.convert2)$</a></li>]]></CMS_ARRAY_ELEMENT>
   		</CMS_ARRAY_PARAM>

   		<CMS_ARRAY_PARAM name="innerEndHTML">
      			<CMS_ARRAY_ELEMENT index="1"><![CDATA[</ul></li>]]></CMS_ARRAY_ELEMENT>
   		</CMS_ARRAY_PARAM>

	</CMS_FUNCTION>

Description of the navigation function elements for the second navigation level


<CMS_FUNCTION name="Navigation">	Calls up the navigation function.
resultname="pt_subNavigation"	Reference name used to output the result of the function later.
<CMS_PARAM name="expansionVisibility" value="standard"/>	The expansionVisibillity parameter specifies which areas of the site store are to be displayed in the navigation. The value "standard" means that the entire navigation tree is fully collapsed.
<CMS_PARAM name="wholePathSelected" value="1"/>	The wholePathSelected parameter specifies how the expanded navigation levels are to be displayed. "1" means that the entire path to the current element is displayed as "selected".
<CMS_ARRAY_PARAM name="innerBeginHTML"> <CMS_ARRAY_PARAM name="innerEndHTML">	The parameters innerBeginHTML and innerEndHTML are used to enter additional information about the HTML fragments, which are to include all children of the navigation entry.
<CMS_ARRAY_ELEMENT><![CDATA[...>]]> </CMS_ARRAY_ELEMENT	Since usually every navigation menu item refers to a new page, every array element requires a <![CDATA[...]]> tag for adding a link. A link can be added within the tags using <a href=““>...</a>.
<CMS_ARRAY_PARAM name="unselectedHTML"> <CMS_ARRAY_PARAM name="selectedHTML">	The parameters selectedHTML and unselectedHTML are used to define the corresponding template fragments to be used when outputting an element for each level to be displayed. "selectedHTML" covers the selected areas and "unselectedHTML" covers the unselected areas of the navigation. For each level to be displayed, a corresponding <CMS_ARRAY_ELEMENT> must be added within the parameter.

Print version | Page start