Manual rendering of VHS menus

Shows how to manually loop and render pages using 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
  1. FluidTYPO3.Fluidpages
  2. FluidTYPO3.Vhs
  1. Pages
  2. ViewHelpers
  1. Menu.html
<div xmlns:v=""
<!-- By setting the "as" argument, we create a new variable accessible inside tag content -->
< as="myMenuVariable">
<ol class="mySpecialMenu">
<f:for each="{myMenuVariable}" as="menuPage">
<!-- A few key properties are added on {menuPage} for user friendliness -->
<!-- These are: "linktext", "link", "active", "current", "hasSubPages" -->
<f:if condition="{menuPage.current}">
<!-- Special rendering of "current" page title as raw text -->
<!-- And with a conditional next level menu using auto rendering: -->
<f:if condition="{menuPage.hasSubPages}">
< pageUid="{menuPage.uid}" />
<!-- There are two common methods of rendering the page links: -->
<!-- Using which will re-create the "link" HREF -->
< pageUid="{menuPage.uid}" class="{menuPage.class}">{menuPage.linktext}</>
<!-- Or with manual link tags using pre-built "link" HREF -->
<a href="{}" class="{menuPage.class}">{menuPage.linktext}</a>
<!-- Note that the {myMenuVariable} no longer exists since the variables are cleaned after tag finishes -->
view raw Menu.html hosted with ❤ by GitHub