Textpattern CMS

#1 Yesterday 23:01:06

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 5,290

Website GitHub

Putting an active class on a menu item if a submenu item is selected?

I’ve got myself tied up in a knot again here and wonder if you clever folks can help me make sense of it.

• I have a regular main menu populated with a list of sections.
• Some of those sections have submenus.
• The submenus are a mix of articles and sections, so a simple article_custom list based off the section doesn’t work here.

What I’ve done instead is:

• create a link category that matches the section name.
• If the current section matches one of the link category names, output the submenu items as a linklist.
• I’ve also managed to output an aria-current="page" show on a submenu item.

All of that already works well.

What I’m trying to do is attach an active class to the button that triggers the submenu. This is the pattern I have, which corresponds to the new-ish popover pattern where a button triggers a popover menu:

<button class="menu-item" popovertarget="submenu-<txp:section />">
    <txp:section title />
</button>
<div id="submenu-<txp:section />" class="submenu-popover" popover>
    <txp:linklist category='<txp:section />' wraptag="ul" break="li" class="submenu" role="list">
        <a href="<txp:link_url />"<txp:evaluate query='"<txp:link_url />" = "/<txp:variable name="this_section" />/"'> aria-current="page"</txp:evaluate>>
            <txp:link_name wraptag="span" />
        </a>
    </txp:linklist>
</div>

I had originally hoped to use css and :has, but that the button is not a container but an adjacent sibling. I’d need to do:

.menu-item:has(+ .submenu-popover:has([aria-current="page"]))

but you are not allowed to nest a :has(…) in a :has(…).(doing just the has current-page or just the has an adjacent sibling both work, but not in combination).

My second attempt was to create a variable if the current page is found, then to put that variable – leveraging the process order trick – in the button class above it. But, as in my earlier attempts at using the processing order, I’ve not mastered the switch in levels. I’ve tried <txp:variable[1] … > outside and inside the linklist without any luck.

This is what I have (just showing the principle not the complete code), but it doesn’t work:

<!-- this doesn't work -->
<button class="menu-item<txp:variable name="has-active" />"…>…</button>

<txp:linklist ...>
    <txp:evaluate test="evaluate">
        <txp:variable name="has-active"> active</txp:variable>
        <txp:evaluate query='"<txp:link_url />" = "/<txp:variable name="this_section" />/"'> aria-current="page"</txp:evaluate>
    </txp:evaluate>
</txp:linklist>
<!-- this works: <txp:variable name="has-active" /> -->

Any ideas, or maybe alternative approaches?

---

TXP Builders – finely-crafted code, design and txp

#2 Today 01:26:28

phiw13

Plugin Author

From: South-Western Japan

Registered: 2004-02-27

Posts: 3,680

Website

Re: Putting an active class on a menu item if a submenu item is selected?

Not sure if I follow your code correctly, at present your has-active variable is created after and at level below the place where you call the value.

Can’t you leverage the <txp:variable name="this_section" /> to set the ‘active’ value on the button?

---

Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg