Adding mainnavigation levels problem

[thomasmstein]

Benjamin,

I like the change to 7.0.0 (Thanks!) also in relation to the easier menu configuration especially subnavigation, breadcrumb and languagenavigation.

However, I am *_struggling *_with mainnavigation and I need more levels. I just can't figure it out how to add more levels. I am a 'content provider' and need to structure the content to more levels which cannot be achieved by two levels.

Increasing levels by setting "page.10.dataProcessing.10.levels=5" (preferably higher) does not seem to make any difference. It might be obvious to some but unfortunately not to me.

Some clarification and support in that direction would be greatly appreciated - and I believe others would love it too :-)

Thanks

Thomas

[benjaminkott]

@thomasmstein the setting is absoloutly correct and the data should be available, but the template for the mainmenu itself will not output more than 2 automaticly because the template does not support it.

if you want to have more than 2 levels in the main menu you will need to overlay the partial for the main menu and just add rendering for the children of the elements, have a look here.

https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Private/Partials/Page/Navigation/Main.html#L38-L44

[thomasmstein]

@benjaminkott
Thanks Benjamin,
I tried to implement the additional levels but the puzzle has not come together yet.

I have developed a sample static menu structure as html including the required CSS for the dropdown-submenu class, hover, etc. - just as an aid. However, I cannot figure it out how to develop the dynamics to go with it :-( ... despite the long weekend.

Do I have to repeat the <f:for each="{mainnavigationItem.children}" as="child"> loop for each level and add some <f:if condition="{item.children}"> in order to check for submenus etc. ?
Thanks
Thomas

This is my static test menu structure:

<!-- 2. Lev -->
<li class="dropdown-submenu"> <a href="#">Second level</a>
</li>
<li class="dropdown-submenu"> <a href="#">Second level - More ...<b class="caret"></b></a>
    <ul class="dropdown-menu">
        <!-- 3. Lev -->
        <li><a href="#">Third level</a>
        </li>
        <li class="dropdown-submenu"> <a href="#">Third level - More ...<b class="caret"></b></a>
            <!-- 4. Lev -->
            <ul class="dropdown-menu">
                <li class="dropdown-submenu"><a href="#">4th - More ...<b class="caret"></b></a>
                    <!-- 5. Lev -->
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu"><a href="#">5th</a>
                        </li>
                        <li class="dropdown-submenu"><a href="#">5th</a>
                        </li>
                        <li class="dropdown-submenu"><a href="#">5th - More ...<b class="caret"></b></a>
                            <!-- 6. Lev -->
                            <ul class="dropdown-menu">
                                <li class="dropdown-submenu"><a href="#">6th</a>
                                </li>
                                <li class="dropdown-submenu"><a href="#">6th</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">4th level</a>
                </li>
                <li><a href="#">4th level</a>
                </li>
            </ul>
        </li>       
        <li><a href="#">Third level</a>
        </li>
        <li><a href="#">Third level</a>
        </li>
    </ul>
</li>
<li class="dropdown-submenu"> <a href="#">Second level</a>
</li>

[thomasmstein]

@benjaminkott
Benjamin,

I eventually worked it out and the main navigation can expand now by 5 sub levels (total of 6 levels). Thanks for your hint.

I haven't had the time to add the active link <li class="{f:if(condition: child.active, then:'active')}"> part yet.

Attached the modified Main.html (added the .txt extension for the upload) with some inline comments.

Cheers

Thomas

Main.html.txt

[thomasmstein]

Benjamin et al.,

Attached the slightly modified version now including 'active' state for selected page and menu path.

Main.html (added .txt to filename for the upload).

Cheers

Thomas

Main.html.txt

[Kev0003]

Hello Benjamin and Thomas,

I hope you don't mind me writing to this closed thread.
I am struggling with this as well. Thanks for the examples.
The problem I have is when viewing on a screen less than 992px wide.

The main navigation and the next levels work good (level-one & level-two), but when I try to toggle the "following level level-three", “next level-level two” and “following level-level three” close.

When I click on the button “next level-level two-2” the toggle changes and adds the open class, but the toggle on “mainNav item-level one-2” reverts back and the open class is removed, closing the menu levels.

I am trying to get "following level-level three" to open only after clicking "-next level-level two-2"
currentlty when I click "next level-level two-2" both levels two & three close. I see the open class is toggled.
How I do I toggle the open class on “next level-level two-2” without effecting the class on “mainNav item-level one-2”, to keep them all open? I've struggled on this all day now and just don't get it.

---

---mainNav item-level one
---mainNav item-level one-2
-----------next level-level two-1
-----------next level-level two-2
------------------following level-level three
------------------following level-level three
-----------next level-level two-3
---mainNav item-level one

---mainNav item-level one

Many thanks,

Kev

[benjaminkott]

@Kev0003 thats a sounds more or less like a bootstrap problem - have a look here for solutions http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
http://bootsnipp.com/snippets/featured/multi-level-navbar-menu

[Kev0003]

Hi Benjamin,

Thanks for the tip and links I will take a look.

Cheers,
Kev