Expanding the fluid_styled_content menu in TYPO3 7 - typo3

Question

I am looking for a way to expand the fluid_styled_content menu in TYPO3 7, and not sure how to proceed. For example the Type1 Menu has the following code:
<ce:menu.directory pageUids="{pageUids}" as="pages">
<f:if condition="{pages}">
<ul class="ce-menu ce-menu-1">
<f:for each="{pages}" as="page">
<li>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
</li>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
Now I'm looking for a way to expand the menu so it shows subpages when available.
If this page has subpages, show list with subpages (As a nested UL tree).
How can this be done with Fluid?

Answer 1

I do not know the view helper you are using (<ce:menu.directory />). I guess it takes a list of page uid´s and gets there children (menu.directory) and put them into a array/ObjectStorage ({pages}) - It could also just create an array of selected page uid´s and then this answer will not be correct.
You can always use the view helper <f:debug>{variableName}</f:debug> to debug what you have.
Try this:
<ce:menu.directory pageUids="{pageUids}" as="pages">
<f:if condition="{pages}">
<ul class="ce-menu ce-menu-1">
<f:for each="{pages}" as="page">
<li>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<ce:menu.directory pageUids="{page.uid}" as="subPages">
<f:if condition="{subPages}">
<ul class="level-2">
<f:for each="{subPages}" as="subPage">
<li>
<f:link.page pageUid="{subPage.uid}">
{subPage.title}
</f:link.page>
</li>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
</li>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
If above dosen´t work then try to dump {page} in the debug tag and update your question with the output.