Different wrap for submenu for active menu item

Question

I want to have different wrap for active submenu. My typoscript:

lib.navigation.sidebar = COA
lib.navigation.sidebar {
    10 = HMENU
    10 {
        entryLevel = 0
        1 = TMENU
        1 {
            wrap = <nav class="section-subnav"><ul class="nav nav-pills nav-stacked subnav subnav-1">|</ul></nav>
            expAll = 1
            noBlur = 1
            NO = 1
            NO {
                ATagTitle.field = nav_title // title
                wrapItemAndSub = <li>|</li>
                stdWrap.wrap = |&nbsp;<span class="subnav-toggle"><i class="fa fa-angle-right"></i></span>
            }
            ACT < .NO
            ACT {
                wrapItemAndSub = <li class="active js-subnav-toggle">|</li>
            }
            CUR < .ACT
        }
        2 = TMENU
        2 {
            ###
            ### This wrap should have class "in" for active submenu:
            ### wrap = <ul class="nav nav-pills nav-stacked subnav subnav-2 collapse in">|</ul>
            ###
            wrap = <ul class="nav nav-pills nav-stacked subnav subnav-2 collapse">|</ul>

            expAll = 0
            noBlur = 1
            NO = 1
            NO {
                ATagTitle.field = nav_title // title
                wrapItemAndSub = <li>|</li>
            }
            ACT < .NO
            ACT {
                wrapItemAndSub = <li class="active">|</li>
            }
            CUR < .ACT
        }
    }
}

Basically I need to add one more css class to my wrapped UL if we have item with state ACT in it. I will be grateful for any tips.

Answer 1

What you are looking for are the itemstates IFSUB, CURIFSUB and ACTIFSUB.
https://docs.typo3.org/typo3cms/TyposcriptReference/MenuObjects/CommonItemStates/Index.html

But you can't change the submenu wrap with this, you have anothe selector then (li.active>ul)

However, there is another answer around here which might help you:
Change wrap of TMENU when active menu item has a submenu

Answer 2

ok, this should do the trick, then:

        (...)
        2 = TMENU
        2 {
            wrap = <ul class="nav nav-pills nav-stacked subnav subnav-2 collapse">|</ul>
            wrap.override = <ul class="nav nav-pills nav-stacked subnav subnav-2 collapse in">|</ul>
            expAll = 0
            noBlur = 1
            NO = 1
            NO {
                ATagTitle.field = nav_title // title
                wrapItemAndSub = <li>|</li>
            }
            ACT < .NO
            ACT {
                wrapItemAndSub = <li class="active">|</li>
                 before.cObject = LOAD_REGISTER
                 before.cObject.actsubmenu = TEXT
                 before.cObject.actsubmenu.value = 1
             }
            CUR < .ACT
            wrap.override.if.isTrue.data = REGISTER:actsubmenu
        }
        (...)

maybe this thread might help you here, too:
Change wrap of TMENU when active menu item has a submenu

Answer 3

I had the same issue with ZURB's Foundation framework. It's a bit awkward to work with but linkWrap on the parent menu item is your friend here. See the comments in the TypoScript for further explanation:

10 = HMENU
10 {
    1 = TMENU
    1 {
        wrap = <ul class="menu vertical" data-accordion-menu>|</ul>
        noBlur = 1
        # Necessary to have submenus already rendered
        expAll = 1

        NO {
            wrapItemAndSub = <li>|</li>
            stdWrap.htmlSpecialChars = 1
        }

        ACT < .NO
        ACT = 1
        ACT {
            wrapItemAndSub = <li class="active">|</li>
        }

        # Add the submenu opening <ul>, if our 1st-level item has a submenu
        IFSUB = 1
        IFSUB {
            wrapItemAndSub = <li>|</li>
            linkWrap = |<ul class="menu vertical nested">
        }

        # Add the submenu opening <ul> if our 1st-level item has children and have the submenu open on load
        CURIFSUB = 1
        CURIFSUB {
            wrapItemAndSub = <li>|</li>
            linkWrap = |<ul class="menu vertical nested is-active">
        }

        # Same as above if any submenu item is currently active
        ACTIFSUB = 1
        ACTIFSUB {
            wrapItemAndSub = <li class="active">|</li>
            linkWrap = |<ul class="menu vertical nested is-active">
        }
    }

    2 = TMENU
    2 {
        # Close the previously openend <ul>
        wrap = |</ul>
        noBlur = 1
        expAll = 1

        NO {
            wrapItemAndSub = <li>|</li>
            stdWrap.htmlSpecialChars = 1
        }

        ACT < .NO
        ACT = 1
        ACT {
            wrapItemAndSub = <li class="active">|</li>
        }
    }
}