Feature #90994

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

Added by Jonas Eberle 8 months ago. Updated 8 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 8 months 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 8 months 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.

Also available in: Atom PDF