CODEWITHSUNDEEP
typo3typoscriptfluid
user6800816
user6800816

Reputation: 543

TYPO3: Typoscript menu with condition for specific page id

I would like to hide/show a menu item depending on the clients resolution. I thought the easiest way to do this is to add a css class and handle this with media queries.

So I need to add a class to a specific menu item with typoscript. Is there a way to do this ?

Here is how my typoscript menu looks like: 

menu.navbar = HMENU
menu.navbar {
    entryLevel = {$threeme.menu.navbar.entry}
    excludeUidList = {$threeme.menu.navbar.excludeUidList}

    1 = TMENU
    1 {
        expAll = 1
        stdWrap.dataWrap = <ul class="nav navbar-nav colum-{register:count_menuItems}">|</ul>

        NO {
            htmlSpecialChars = 1
            wrapItemAndSub = <li id="navbar{field:uid}" class="" >|</li> |*| <li id="navbar{field:uid}">|</li> |*| <li id="navbar{field:uid}" class="last">|</li>
            wrapItemAndSub.insertData = 1
            ATagTitle.field = description // subtitle
        }

        ACT = 1
        ACT {
            htmlSpecialChars = 1
            wrapItemAndSub = <li id="navbar{field:uid}" class=" active">|</li> |*| <li id="navbar{field:uid}" class="active">|</li> |*| <li id="navbar{field:uid}" class="last active">|</li>
            wrapItemAndSub.insertData = 1
            ATagTitle.field = description // subtitle
        }

        IFSUB = 1
        IFSUB {
            ATagTitle.field = description // subtitle
            wrapItemAndSub = <li id="navbar{field:uid}" class="dropdown first">|</li> |*| <li id="navbar{field:uid}" class="dropdown">|</li> |*| <li id="navbar{field:uid}" class="dropdown last">|</li>
            wrapItemAndSub.insertData = 1
            stdWrap.htmlSpecialChars = 1
            ATagParams = class="dropdown-toggle" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
            linkWrap = |<span class="caret"></span>
            ATagBeforeWrap = 1
        }

        ACTIFSUB < .IFSUB
        ACTIFSUB = 1
        ACTIFSUB.wrapItemAndSub = <li id="navbar{field:uid}" class="dropdown first active">|</li> |*| <li id="navbar{field:uid}" class="dropdown active">|</li> |*| <li id="navbar{field:uid}" class="dropdown last active">|</li>
    }

    2 = TMENU
    2 {
        expAll = 1
        wrap = <ul class="dropdown-menu">|</ul>

        NO.htmlSpecialChars = 1
        NO.wrapItemAndSub = |*| <li class="odd">|</li> || <li class="even">|</li> |*|

        ACT = 1
        ACT.htmlSpecialChars = 1
        ACT.wrapItemAndSub = |*| <li class="odd active">|</li> || <li class="even active">|</li> |*|
    }

    3 = TMENU
    3 {
        expAll = 1
        wrap = <ul class="dropdown-submenu">|</ul>

        NO.htmlSpecialChars = 1
        NO.wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>

        ACT = 1
        ACT.htmlSpecialChars = 1
        ACT.wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="active last">|</li>
    }

    4 = TMENU
    4 {
        wrap = <ul class="dropdown-submenu-1">|</ul>

        NO.htmlSpecialChars = 1
        NO.wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>

        ACT = 1
        ACT.htmlSpecialChars = 1
        ACT.wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="active last">|</li>
    }
}

Upvotes: 1

Views: 1588

Answers (1)

Riccardo De Contardi
Riccardo De Contardi

Reputation: 2148

If you want to target a specific page, using the uid is IMO the best method as it is univocal; so you could add everywhere a class that uses the {field:uid}.

I have seen that you already use it for setting some id (<li id="navbar{field:uid}"...)

Upvotes: 1

Related Questions