Hello,
I just started with neos a short while ago and I am now creating my first site package using boostrap 4.
I have the following site structure:
testsite1
–> subtestsite1
–> subtestsite2
testsite2
–>subtestsite3
and so on.
I’ve made my menu using the following fluid template:
{namespace neos=Neos\Neos\ViewHelpers} {namespace ts=Neos\Fusion\ViewHelpers}
<!-- render the navbar itself with the "section" element in it -->
<ul{attributes -> f:format.raw()} class="navbar-nav ml-auto">
<f:render section="itemsList" arguments="{items: items}" />
</ul>
<!-- render the navbar content -->
<!-- first level -->
<f:section name="itemsList">
<f:for each="{items}" as="item">
<li {ts:render(path: '{item.state}.attributes', context: {item: item}) -> f:format.raw()}>
<neos:link.node node="{item.node}">{item.label}</neos:link.node>
<!-- second level, show dropdown-->
<f:if condition="{item.subItems}">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle waves-effect" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{item.label} </a>
<ul class="dropdown-menu animated fadeInDown" aria-labelledby="navbarDropdownMenuLink" role="menu">
<f:render section="itemsList" arguments="{items: item.subItems}" />
</ul>
</li>
</f:if>
</li>
</f:for>
</f:section>
If I now render the page, a dropdown containing the subitems shows up - however the “normal” nav item is still there:
This is what I want to achieve:
This is how I did it for now using jquery:
//hide the not needed element before every dropdown-menu
$( ".navbar li.nav-item.dropdown" ).prev().css( "display", "none" );
How can I do this “the correct way”? How can I hide the “normal” nav item using fluid/fusion if it has subitems?
Thanks for any help,
pojntfx