XF 2.1 Converting Menu Into Multi-Drop Down

[LenKaiser]

Is it possible to convert the default menu system that comes in XenForo 2.1 to a Multi-level menu system? And if so where do I find the code to make the change?

What I want to do is as shown in the screen shot, I want to take the link in yellow and make them a flyout of the main link above them. So in this instance it would be:

Popular Content
--->(flyout) Most Replied Threads
--->(flyout) Most Like Threads
...and so on.

Here is what it is currently:



And here is what I want to achieve:

 

[gogo]

Not with my approach above, no. This is strictly a CSS approach sort of manipulating the way the sub-links show on the main menu, it doesn't create a clicking toggle feature. What you're after would require further edits.

I just found it doesn't show the contents of the third level well.



And how do I configure the width of all menu? I want to make them narrower..

 

[Russ]

I just found it doesn't show the contents of the third level well.

View attachment 237089

And how do I configure the width of all menu? I want to make them narrower..

It's hardcoded to width: 200px; in my CSS. You can adjust that value to change it.

 

[gogo]

It's hardcoded to width: 200px; in my CSS. You can adjust that value to change it.

The menu stops working for the 3rd level onward...

 

[7ore]

I was looking for something like this.
And I wouldn't mind if all menuitems below level 2 was shown in the same menu.The issue for us is that the first level is too long.
That will probably not be an issue för level 2.
Can I limit it to one sublevel?

 

[Joe Link]

I haven't really tested this thoroughly... but maybe it'll get you going.

PAGE_CONTAINER

Find:

<xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0">
    <xf:macro name="nav_link"
        arg-navId="{$navId}"
        arg-nav="{$nav}"
        arg-class="menu-linkRow u-indentDepth{$depth} js-offCanvasCopy" />
    <xf:if is="$nav.children">
        <xf:foreach loop="$nav.children" key="$childNavId" value="$child">
            <xf:macro name="nav_menu_entry"
                arg-navId="{$childNavId}"
                arg-nav="{$child}"
                arg-depth="{{ $depth + 1 }}" />
        </xf:foreach>
        <xf:if is="$depth == 0">
            <hr class="menu-separator" />
        </xf:if>
    </xf:if>
</xf:macro>

Replace with:

<xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0">
    <xf:if is="$nav.children">
        <div class="nav-popout">
    </xf:if>
    <xf:macro name="nav_link"
        arg-navId="{$navId}"
        arg-nav="{$nav}"
        arg-class="menu-linkRow u-indentDepth{$depth} js-offCanvasCopy {{ $nav.children ? 'nav-has-children' : 'nav-has-children' }}" />
        <xf:if is="$nav.children">
        <div class="nav-popout--menu">
        <xf:foreach loop="$nav.children" key="$childNavId" value="$child">
            <xf:macro name="nav_menu_entry"
                arg-navId="{$childNavId}"
                arg-nav="{$child}"
                arg-depth="{{ $depth + 1 }}" />
        </xf:foreach>
        <xf:if is="$depth == 0">
            <hr class="menu-separator" />
        </xf:if>
        </div>
    </xf:if>
    <xf:if is="$nav.children">
        </div>
    </xf:if>
</xf:macro>

Add this in extra.less:

.menu--structural .menu-content
{
    overflow: visible !important;
    .nav-popout
    {
        position: relative;

        &:hover .nav-popout--menu { display: block; }
        > .nav-has-children:after
        {
            .m-faBase();
            .m-faContent("\f0da");
            float: right;
        }
        .nav-popout--menu
        {
            display: none;
            position: absolute;
            right: -200px;
            top: 0;
            width: 200px;
            background-color: @xf-contentBg;
            border: 1px solid @xf-borderColor;
        }
    }
}

Result:

View attachment 215861

@Russ comes through again! This is exactly what I'm looking for

Unfortunately, there seems to be an issue with Safari (big surprise) preventing the sub-menu from opening correctly. It appears that it's opening within the drop-down menu box.

Any ideas on how we can fix this?