[BZ] MenuFlex

[BZ] MenuFlex 2.0.3

No permission to download
Overview FAQ Updates (3) Reviews (1) History Discussion
bzcomputers said:
Make sure you save your options after any changes.

If you look at template bzmf_final.less it should look like this:
Code: 
// [BZ] MenuFlex Final Compiled Styles & Assignments - Last Updated: November 20, 2025 04:09:47 UTC +0000
// Do not make changes within this template, they will be overwritten next time you save MenuFlex settings.

// Open Menus On Hover: Enabled - custom LESS and JavaScript are being injected
<xf:include template="bzmf_openmenusonhover.less" />
// Tiered / Nested Menus: Enabled - custom LESS and JavaScript are being injected
<xf:include template="bzmf_tieredmenus.less" />
// Font Awesome Menu Icons: Disabled

// [BZ] MenuFlex Final Compiled Styles & Assignments - END
Click to expand...

This is how bzmf_final.less looks actually
Code: 
/* [BZ] MenuFlex Tiered / Nested Menus BEGIN */
@media all and (min-width: 651px) {
    .menu--structural .menu-content {
        overflow: visible;
        user-select: none;
        border: 1px solid @xf-borderColor;
        border-top: 2px solid @xf-paletteColor1;
        
        > .nav-popout {
            position: relative;

            &.is-hovered > .nav-popout--menu,
            &.is-active > .nav-popout--menu,
            &:hover > .nav-popout--menu,
            &:focus-within > .nav-popout--menu {
                display: block;
                opacity: 1;
                transition: opacity .25s ease, box-shadow .25s ease, transform .25s ease;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
                transform: translateY(-2px);
            }

            .nav-popout--menu .nav-popout {
                &.is-hovered > .nav-popout--menu,
                &.is-active > .nav-popout--menu,
                &:hover > .nav-popout--menu,
                &:focus-within > .nav-popout--menu {
                    display: block;
                    opacity: 1;
                    transition: opacity .25s ease, box-shadow .25s ease, transform .25s ease;
                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
                    transform: translateY(-2px);
                }
            }

            .nav-container {
                position: relative;
                display: flex;
                align-items: center;
                transition: background-color .2s ease;

                .menu-linkRow {
                    flex: 1;
                    word-wrap: break-word;
                    overflow-wrap: break-word;
                    white-space: normal;
                    line-height: 1.4;
                    padding: 5px;
                    transition: background-color .2s ease, color .2s ease;
                }

                a.offCanvasMenu-link {
                    padding: 0 5px;
                }

                a.offCanvasMenu-link--splitToggle {
                    &:before {
                        top: 2px;
                        bottom: 2px;
                    }

                    &:after {
                        .m-faContent(@fa-var-solid-caret-right, 1.2em);
                        height: 1.2em;
                        display: block;
                        transform-origin: 47% 50%;
                        transform: rotate(0deg);
                        transition: transform .2s ease;
                    }

                    &.is-hovered:after,
                    &.is-active:after {
                        transform: rotate(90deg);
                    }
                }

                &:hover {
                    background: @xf-contentHighlightBg;
                }

                & .menu-linkRow:hover ~ a.offCanvasMenu-link--splitToggle:after,
                &.is-hovered a.offCanvasMenu-link--splitToggle:after {
                    transform: rotate(90deg);
                }
            }

            .nav-popout--menu {
                display: none;
                position: absolute;
                width: 250px;
                background: #ffffff;
                background: @xf-contentBg;
                border: 1px solid @xf-borderColor;
                border-top: 2px solid @xf-paletteColor1;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
                border-radius: 3px;
                right: -250px;
                top: 0;
                z-index: 10;
                opacity: 0;
                transition: opacity .25s ease, box-shadow .25s ease, transform .25s ease;

                &.is-hovered,
                &.is-active {
                    display: block;
                    opacity: 1;
                }

                &.is-closed:not(.is-hovered):not(.is-active) {
                    display: none;
                    opacity: 0;
                }

                &.tierlimit-0 {
                    position: static;
                    width: auto;
                    border: none;
                    box-shadow: none;
                    opacity: 1;
                    transform: none;
                    z-index: 0;

                    .nav-popout--menu {
                        display: block !important;
                        position: static !important;
                        width: auto !important;
                        border: none !important;
                        box-shadow: none !important;
                        opacity: 1 !important;
                        transform: none !important;

                        .nav-container {
                            > a {
                                .offCanvasMenu-link--splitToggle { display: none !important; }
                            }
                        }

                        .menu-separator { display: block !important; }
                    }
                }

                &.tierlimit-1 {
                    .nav-popout--menu {
                        display: block !important;
                        position: static !important;
                        width: auto !important;
                        border: none !important;
                        box-shadow: none !important;
                        opacity: 1 !important;
                        transform: none !important;
                        max-height: inherit;
                        overflow-y: inherit;
                    }
                    
                    a.offCanvasMenu-link--splitToggle { display: none !important; }
                        
                    .nav-container {
                        a.u-indentDepth1 { text-indent: 0em; }
                        a.u-indentDepth2 { text-indent: 1em; }
                        a.u-indentDepth3 { text-indent: 2em; }
                        a.u-indentDepth4 { text-indent: 3em; }
                    }
                    
                    .menu-separator:last-child {
                        display: block !important;
                    }
                }

                &.tierlimit-2 {
                    .nav-popout--menu > .nav-popout > .nav-popout--menu {
                        display: block !important;
                        position: static !important;
                        width: auto !important;
                        border: none !important;
                        box-shadow: none !important;
                        opacity: 1 !important;
                        transform: none !important;
                        max-height: inherit;
                        overflow-y: inherit;
                    }
                    
                    .nav-popout--menu {
                        a.offCanvasMenu-link--splitToggle { display: none !important; }

                        .nav-container {
                            a.u-indentDepth1 { text-indent: 0em; }
                            a.u-indentDepth2 { text-indent: 0em; }
                            a.u-indentDepth3 { text-indent: 1em; }
                            a.u-indentDepth4 { text-indent: 2em; }
                        }

                        .menu-separator:last-child {
                            display: block !important;
                        }
                    }
                }
            }
        }
    }
}

@media (hover: none) {
    .menu--structural .menu-content {
        > .nav-popout:not(.is-active):hover > .nav-popout--menu,
        .nav-popout--menu .nav-popout:not(.is-active):hover > .nav-popout--menu {
            display: none;
        }
    }
}

@media all and (min-width: 651px) and (max-width: 899px) {
    .menu--structural .menu-content {
        overflow-x: auto;

        .nav-popout {
            .menu-separator:last-child {
                display: block !important;
            }
        }

        > .nav-popout > .nav-popout--menu {
            display: block !important;
            position: static !important;
            width: auto !important;
            border: none !important;
            box-shadow: none !important;
            opacity: 1 !important;
            transform: none !important;
            z-index: 0 !important;

            .nav-popout--menu {
                display: block !important;
                position: static !important;
                width: auto !important;
                border: none !important;
                box-shadow: none !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

        .nav-container a.offCanvasMenu-link--splitToggle {
            display: none !important;
        }
    }
}

@media all and (min-width: 900px) and (max-width: 1199px) {
    .menu--structural .menu-content {
        .nav-container > a.u-indentDepth1 { text-indent: 0em; }
        .nav-container > a.u-indentDepth2 { text-indent: 1em; }
        .nav-container > a.u-indentDepth3 { text-indent: 2em; }
        .nav-container > a.u-indentDepth4 { text-indent: 3em; }

        > .nav-popout > .nav-popout--menu {
            right: -250px;
            max-height: 80vh;
            overflow-y: auto;

            .nav-popout {
                .menu-separator:last-child {
                    display: block !important;
                }
            }

            .nav-popout:hover > .nav-popout--menu {
                right: -250px;
                top: 100%;
                z-index: 20;
            }

            .nav-popout--menu {
                display: block !important;
                position: static !important;
                width: auto !important;
                border: none !important;
                box-shadow: none !important;
                opacity: 1 !important;
                transform: none !important;
                max-height: inherit;
                overflow-y: inherit;
            }

            .nav-container a.offCanvasMenu-link--splitToggle {
                display: none !important;
            }
        }
    }
}

@media all and (min-width: 1200px) and (max-width: 1499px) {
    .menu--structural .menu-content {
        .nav-container > a.u-indentDepth1 { text-indent: 0em; }
        .nav-container > a.u-indentDepth2 { text-indent: 0em; }
        .nav-container > a.u-indentDepth3 { text-indent: 1em; }
        .nav-container > a.u-indentDepth4 { text-indent: 2em; }

        > .nav-popout .nav-popout--menu > .nav-popout .nav-popout--menu {
            right: -250px;
            max-height: 80vh;
            overflow-y: auto;

            .nav-popout {
                .menu-separator:last-child {
                    display: block !important;
                }
            }

            .nav-popout:hover > .nav-popout--menu {
                right: -250px;
                top: 100%;
                z-index: 20;
            }

            .nav-popout--menu {
                display: block !important;
                position: static !important;
                width: auto !important;
                border: none !important;
                box-shadow: none !important;
                opacity: 1 !important;
                transform: none !important;
                max-height: inherit;
                overflow-y: inherit;
            }

            .nav-container a.offCanvasMenu-link--splitToggle {
                display: none !important;
            }
        }
    }
}

@media all and (min-width: 1500px) {
    .menu--structural .menu-content {
        .nav-container > a.u-indentDepth1 { text-indent: 0em; }
        .nav-container > a.u-indentDepth2 { text-indent: 0em; }
        .nav-container > a.u-indentDepth3 { text-indent: 0em; }
        .nav-container > a.u-indentDepth4 { text-indent: 1em; }

        > .nav-popout .nav-popout--menu > .nav-popout .nav-popout--menu > .nav-popout .nav-popout--menu {
            right: -250px;

            .nav-popout {
                .menu-separator:last-child {
                    display: block !important;
                }
            }

            .nav-popout:hover > .nav-popout--menu {
                right: -250px;
                top: 100%;
                z-index: 20;
            }

            .nav-popout--menu {
                display: block !important;
                position: static !important;
                width: auto !important;
                border: none !important;
                box-shadow: none !important;
                opacity: 1 !important;
                transform: none !important;
            }

            .nav-container a.offCanvasMenu-link--splitToggle {
                display: none !important;
            }
        }
    }
}
/* [BZ] MenuFlex Tiered / Nested Menus END */
 
You must log in or register to reply here.
Back
Top Bottom