If you are using the TYPO3 Bootstrap Introduction Package and want to extend the main menu to display 3 levels instead of the initial 2 levels, essentially only 2 areas need to be adjusted. First, in the setup.txt file (which can be found at \typo3conf\ext\bootstrap_package\Configuration\TypoScript\setup.txt), make sure that enough levels are available for display so that the MenuProcessor knows how many levels it should provide. Then, the corresponding template file needs to be extended to render the menu in the desired way. The Main.html file can be found at \typo3conf\ext\bootstrap_package\Resources\Private\Partials\Page\Navigation\.
But first, let's look at the setup.txt. Here, we replace/extend the following lines:
##########################
### DATA PREPROCESSING ###
##########################
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
entryLevel = 0
levels = 2
includeSpacer = 1
as = mainnavigation
beispielsweise mit
##########################
### DATA PREPROCESSING ###
##########################
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
entryLevel = 0
levels = 88
expandAll = 1
includeSpacer = 1
as = mainnavigation
Nun zur Main.html: Möchten wir erreichen, dass die zweite und dritte Ebenen bei einem Klick auf einen Menüpunkt der ersten Ebene erscheinen, reicht es aus, den Inhalt der folgenden if-Bedingung:
<f:if condition="{mainnavigation}">
</f:if>
so zu gestalten (ohne Newlines und Absätze, da für die Darstellung hier zu verschachtelt):
<f:if condition="{mainnavigation}">
<nav class="navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav navbar-main">
<f:for each="{mainnavigationlala}" as="mainnavigationItem">
<li class="{f:if(condition: mainnavigationItem.active, then:'active')} {f:if(condition: mainnavigationItem.children, then:'dropdown')}">
<f:if condition="{mainnavigationItem.spacer}">
<f:then>
<p class="navbar-text">{mainnavigationItem.title}</p>
</f:then>
<f:else>
<f:if condition="{mainnavigationItem.children}">
<f:then>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span>{mainnavigationItem.title}</span>
<b class="caret"></b>
<span class="bar"></span>
</a>
<ul class="dropdown-menu">
<f:for each="{mainnavigationItem.children}" as="child">
<li class="{f:if(condition: child.active, then:'active')} {f:if(condition: child.children, then:'dropdown')}">
<f:if condition="{child.spacer}">
<f:then>
<p class="navbar-text">{child.title}</p>
</f:then>
<f:else>
<f:if condition="{child.children}">
<f:then>
<span>{mainnavigationItem.title}</span>
<b class="caret"></b>
<span class="bar"></span>
<ul>
<f:for each="{child.children}" as="grandchild">
<f:if condition="{grandchild.spacer}">
<f:then>
<p class="navbar-text">{grandchild.title}</p>
</f:then>
<f:else>
<a href="/{grandchild.link}" target="{grandchild.target}" title="{grandchild.title}">
<span>{grandchild.title}</span>
<span class="bar"></span>
</a>
</f:else>
</f:if>
</f:for>
</ul>
</f:then>
<f:else>
<a href="/{child.link}" target="{child.target}" title="{child.title}">
<span>{child.title}</span>
<span class="bar"></span>
</a>
</f:else>
</f:if>
</f:else>
</f:if>
</f:for>
</ul>
</f:then>
<f:else>
<a href="/{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}">
<span>{mainnavigationItem.title}</span>
<span class="bar"></span>
</a>
</f:else>
</f:if>
</f:else>
</f:if>
</li>
</f:for>
</ul>
</nav>
</f:if>
Jetzt haben wir ein schönes Menü mit drei Ebenen und können dies nach Belieben stylen. Umgesetzt in TYPO3 8.7.1.
