Expanding the fluid_styled_content menu in TYPO3 7

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.