2017-05-10 11 views
1

クライアントの解像度に応じてメニュー項目を表示/非表示したいと考えています。私はこれを行う最も簡単な方法は、CSSクラスを追加し、メディアのクエリでこれを処理することだと思った。TYPO3:特定のページIDの条件付きTyposcriptメニュー

私はtyposcriptで特定のメニュー項目にクラスを追加する必要があります。 これを行う方法はありますか?ここで

は私のTypoScriptメニューがどのように見えるかです:

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> 
    } 
} 
+0

<li id="navbar{field:uid}"...)あなたはすでにいくつかのIDを設定するためにそれを使用することを見てきました。特定のページをターゲットにしたい場合は、UIDは一意であるため、IMOが最も良い方法です(既にid = "navbar {field:uid}"を使用しています) –

+0

ありがとうございますriccardo私はそれについて完全に忘れてしまいました。私は{field:uid}を使用することができます – user6800816

+0

私は答えとして私のコメントを書いていきます –

答えて

1

あなたが特定のページをターゲットにしたい場合は、UIDを使用してIMOそれは一義的であるよう最善の方法です。 {field:uid}を使用するクラスをどこにでも追加できます。

私は理解している場合、あなたはどこにでも{フィールド:UID}を使用するクラスを追加することができ

関連する問題