Code examples

Manual rendering of VHS menus

Shows how to manually loop and render pages using v:page.menu instead of the built-in rendering which can only be affected in key aspects like class names. Includes a demonstration and small explanation of special properties which are added to each page's data, containing a pre-built link, link text and link tag CSS class name.

Description Rendering manual menus with VHS
Author NamelessCoder
Creation date 2014-08-24T02:11:03.000Z
Extensions
  1. FluidTYPO3.Fluidpages
  2. FluidTYPO3.Vhs
Tags
  1. Pages
  2. ViewHelpers
Files
  1. Menu.html
<div xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<!-- By setting the "as" argument, we create a new variable accessible inside tag content -->
<v:page.menu as="myMenuVariable">
<ol class="mySpecialMenu">
<f:for each="{myMenuVariable}" as="menuPage">
<li>
<!-- A few key properties are added on {menuPage} for user friendliness -->
<!-- These are: "linktext", "link", "active", "current", "hasSubPages" -->
<f:if condition="{menuPage.current}">
<f:then>
<!-- Special rendering of "current" page title as raw text -->
{menuPage.linktext}
<!-- And with a conditional next level menu using auto rendering: -->
<f:if condition="{menuPage.hasSubPages}">
<v:page.menu pageUid="{menuPage.uid}" />
</f:if>
</f:then>
<f:else>
<!-- There are two common methods of rendering the page links: -->
<!-- Using f:link.page which will re-create the "link" HREF -->
<f:link.page pageUid="{menuPage.uid}" class="{menuPage.class}">{menuPage.linktext}</f:link.page>
<!-- Or with manual link tags using pre-built "link" HREF -->
<a href="{menuPage.link}" class="{menuPage.class}">{menuPage.linktext}</a>
</f:else>
</f:if>
</li>
</f:for>
</ol>
</v:page>
<!-- Note that the {myMenuVariable} no longer exists since the variables are cleaned after tag finishes -->
</div>
view raw Menu.html hosted with ❤ by GitHub