Make js-code work to add - remove a class in TYPO3 TS menu

问题

I like to achieve this effect for a TYPO3 site navigation - see the codepen here:

https://codepen.io/mr_vespa/pen/zYryZQo

On load the menu has the first tab highlighted. On click the selected tab will be highlighted. Both effects are not taking place.

How to get an "active" class on the first menu tab only
why is the js-code not applied both jquery and the js-code are included/ TYPO3 version 9.*

The menu code (which is coded for use with Foundation 6.4.2 dropdown menu). and working fine.

    lib.nav_main = COA
lib.nav_main {
    10 = HMENU
    10 {
        #wrap = <div class="top-bar-right">|</div>
        entryLevel = 0
        1 = TMENU
        1 {
            expAll = 1
            noBlur = 1
            wrap = <ul class="dropdown menu" data-dropdown-menu>|</ul>
            target = _top
            NO {
                stdWrap.htmlSpecialChars = 1
                wrapItemAndSub = <li class="has-submenu">|</li>
                #allWrap = <div class=" ">|</div>
            }
            ACT <.NO
            ACT{
            wrapItemAndSub = <li class="has-submenu">|</li>
        }
        }
        2 = TMENU
        2 {
            expAll = 1
            noBlur = 1
            wrap = <ul class="submenu menu vertical" data-submenu>|</ul>
            target = _top
            NO {
                stdWrap.htmlSpecialChars = 1
                wrapItemAndSub = <li class="has-submenu">|</li>
                #allWrap = <div class=" ">|</div>
            }
            ACT <.NO
            ACT{
            wrapItemAndSub = <li class="has-submenu">|</li>
        }
        }
        3 = TMENU
        3 {
            noBlur = 1
            wrap = <ul class="submenu menu vertical" data-submenu>|</ul>
            target = _top
            NO {
                stdWrap.htmlSpecialChars = 1
                wrapItemAndSub = <li class="has-submenu">|</li>
                #allWrap = <div class=" ">|</div>
            }
               
                }
     
        }
        }

回答1:

It is recommended to use the MenuProcessor with TYPO3 9 or higher. It is very easy and extremely flexible. The first step is to let TYPO3 9 know which Pages should process. A basic example.

On your page = PAGE typoscript:

page = PAGE
page {
   10 = FLUIDTEMPLATE
   10 {
       template = FILE
       template.file = EXT:yourExtension/Resources/Private/Templates/index.html
       partialRootPath = EXT:yourExtension/Resources/Private/Partials/
       layoutRootPath =  EXT:yourExtension/Resources/Private/Layouts/

       7000 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
       7000 {
         levels = 3
         includeSpacer = 1
         entryLevel = 0
         as = mainnavigation
       }
    }
 }

What this does, is to call the MenuProcessor and it makes a database request based on the arguments you defined. The arguments in this example:

includeSpacer = Includes the "Spacer" type in the menus
levels = How many levels should the Menuprocessor look for
entryLevel = From which level should start. 0 means root page and so on
as = is the variable that will be passed in the FrondEnd with the results of the MenuProcessor

Your HTML (Maybe on your Layouts?)

You will have to play around with the templates in order to get your desire result. Here is an example. Not 100% tested but it should work.

Layouts:

<f:render partial="Menu/MainNavigation" arguments={_all} />

Just calling the Menu partial

Partials (Menu/MainNavigation.html)

<div class="title-bar" data-responsive-toggle="responsive_nav" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle="responsive_nav"></button>
    <div class="title-bar-title">Menu</div>
</div>

<div id="responsive_nav" class="top-bar">
   <div class="top-bar-left">
        <a class="title_bar_logo" href="{f:uri.page(pageUid:1)}">
            <f:image src="fileadmin/logo.svg" class="hide-for-small-only"/>
        </a>
   </div>
   <div class="top-bar-left">
     <f:render partial="Menu/Render/List" arguments="{
            records : mainnavigation,
            class   : 'dropdown menu',
            settings: settings,
            isFirstLevel : 1
        }"/>
   </div>
</div>

Creating the default schema of the foundation navigation. After that we call the list partial. What we do is to call the list every time the MenuProcessor finds a submenu. Meaning that every time that a menu item has children, then the list partial will be called. So we do not have to manually write 10 levels of HTML.

Partials (Menu/Render/List.html)

<ul class="class="{class}" {f:if(condition:'{isFirstLevel} == 1', then: 'data-dropdown-menu', else: '')}">
    <f:for each="{records}" as="item" iteration="i">
        <f:render partial="Menu/Render/Item" arguments="{
            item    : item,
            settings: settings
        }"/>
    </f:for>
</ul>

Here we create the list schema and we call the children (<li> items).

Partials (Menu/Render/Item.html)

<f:variable name="_classActive" value="{f:if(condition:'{item.active} == 1', then: 'active', else: '')}"/>

<li class="nav__item {_classActive}">
    <a href="{item.link}" target="{item.target}" title="{item.title}">
        {item.title}
    </a>
   <f:if condition="{item.children->f:count()} > 0">
        <f:render partial="Menu/Render/List" arguments="{
            records : item.children,
            settings: settings,
            class: 'menu vertical'
        }"/>
   </f:if>
</li>

Here we create the <li> schema and we call the list if this menu item has a submenu.

Helpful Links: