Feature #90994

Add "active" class to current page to the default fluid_styled_content menu_pages, menu_sitemap_pages etc.

Added by Jonas Eberle over 1 year ago. Updated 6 months ago.

Status:
New
Priority:
Should have
Assignee:
Category:
Fluid Styled Content
Target version:
-
Start date:
2020-04-10
Due date:
% Done:

0%

Estimated time:
PHP Version:
Tags:
menu
Complexity:
Sprint Focus:

Description

The data is already in the template, just the default templates would need to be changed.

#1

Updated by Riccardo De Contardi over 1 year ago

I'd vote for

- put class on the <li> tag
- use separate classes for active and current states

[additional, opinionated]

would be nice maybe to have BEM classes, like

- .t3-menu on the <ul> tag
- .t3-menu__item on each menu item
- .t3-menu__item--active and .t3-menu__item--current for the states

[warning]

It is very likely that if you want to use a framework like Bootstrap or Foundation you'll have to do additional work in rewriting everything!

Framework menu ( <ul> ) class menu item ( <li> ) class anchor ( <a> ) class active state class current state class
Twitter Bootstrap nav nav-item nav-link active (on <a> ) none
Zurb Foundation menu none none is-active (on <li> ) none

This topic requires carefulness... honestly I'd prefer to keep TYPO3 on frontend agnostic from frameworks, and let the integrators use which one they prefer.

#2

Updated by Jonas Eberle over 1 year ago

@Riccardo: Sorry, our research overlapped here ;) I didn't check for new posts before.

I checked these:
Foundation .vertical.menu on the <li> - https://get.foundation/sites/docs/menu.html#vertical-menu
Bootstrap 3 .nav-pills on the <li> - https://getbootstrap.com/docs/3.4/components/#nav
Bootstrap 4 nav components put it on the <a> but need additional markup anyways: https://getbootstrap.com/docs/4.4/components/navs/#vertical (why?...)

-- so I would also favor <li>

Undecided about BEM - useful yes, but very cluttery and should not be introduced for a single default content IMHO but if, then for all.

I would like to hear Benji about it, too.
I hope we'll talk about it in the next call of the rendering group of the structured content initiative.

This is how I currently integrate menu_sitemap_pages with Bootstrap 3:

// (scss)
.frame-type-menu_sitemap_pages {
    ul {
        @extend .nav;
        @extend .nav-pills;
        @extend .nav-stacked;
        list-style: none;
        padding-left: 0;

        ul {
            padding-left: 30px;
        }
    }
}

This covers the base already for a directory structure.
It produces some unnecessary CSS, but saves me from adapting default templates which I think is a big plus for maintainability.

#3

Updated by Riccardo De Contardi 6 months ago

Just to write something again on this topic: another nice suggestion is using the "namespaced CSS" convention

in this convention

- the menu should be a component so the prefix would be c- (IMHO, I would head some other opinions) or, as on my previous post, we could just imagine a t3- namespace
- the active state is just is-active (Foundation already follows it)

<ul class="c-menu">
   <li class="is-active">....</li>
</ul>

or if you prefer the anchor being "active":

<ul class="c-menu">
   <li><a class="is-active">....</a></li>
</ul>

some articles:

https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
https://css-tricks.com/combining-the-powers-of-sem-and-bio-for-improving-css/

Also available in: Atom PDF