Howto set a CSS class in a TYPOscript menu depending on content from tt_content

Question

I am building a navigation menu with TYPOscript which is extended with content from the tt_content table.

Now I am trying to change the CSS-class of the parent element (.drop-wrapp), if there is content from tt_content and put the page title from parent page in second level (here: "PAGE TITLE FIRST LEVEL").

This is my TYPOscript so far:

lib.navMain = COA
lib.navMain {

  10 = TEXT
  10.wrap = |
  10.value = {$const.lang.navi.skip}
  10.typolink {
    parameter.data = page:uid
    parameter.dataWrap = |#skipMainNavi
    ATagParams = class="sr-only sr-only-focusable"  
  } 

  20 = HMENU
  20 {
    special = directory
    special.value = {$const.pid.home}
    entryLevel = 0

    1 = TMENU
    1 {
      wrap = <ul class="nav navbar-nav" role="menubar">|</ul>

      expAll = 1
      target = _top
      noBlur = 1

      wrap= <ul class="nav navbar-nav" role="menubar">|</ul>

      NO {
        wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
        linkWrap = |  
        ATagParams = role="menuitem"
        title = field:title
        ATagTitle.field = subtitle // title
      }

      ACT < .NO
      ACT = 1
      ACT {
        wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
        ATagParams = class="mainmenuActive"
        # linkWrap = <strong>|</strong>
      }
    }

    2 < .1
    2 {
      wrap = <div class="drop-wrapp CLASS_IF_CONTENT_FROM_TT_CONTEN"><div class="drop-wrapp-inner">|</div></div>


      20 = HMENU
      20 {
        special = directory
        special.value.data = field:pid

        1 = TMENU
        1 {
          expAll = 1

          NO {
            wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
            linkWrap = |  
            ATagParams = role="menuitem"
            title = field:title
            ATagTitle.field = subtitle // title
          }

          ACT < .NO
          ACT = 1
          ACT {
            wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
            ATagParams = class="mainmenuActive"
            # linkWrap = <strong>|</strong>
          }
        }
      }

      stdWrap.append = CONTENT
      stdWrap.append {
        table = tt_content
        select {
          pidInList.field = pid
          where = colPos=1 AND deleted=0 AND hidden=0
          orderBy = sorting
          languageField = sys_language_uid
          max = 2
        }

        stdWrap {
          wrap = <div class="teaser-block"><div class="teaser-block-inner"><strong class="title">PAGE TITLE FIRST LEVEL</strong><div class="teaser-text">|</div></div></div>

          // wrap only if there is content!
          required = 1
        }
      }

      stdWrap.innerWrap = <div class="drop-block"><ul class="list-unstyled nav-list" role="menubar">|</ul></div>

    }
  }

  30 = TEXT
  30.wrap = <a id="skipMainNavi" class="sr-only">|</a>
  30.value = &nbsp;
  30.htmlSpecialChars = 0  
}

UPDATE:

This is very breafly what I want to achieve:

<nav>
  <ul>
    <li><a href="#">Level 0.0</a></li>
    <li>
      <a href="#">Level 0.1</a>
      
        <div class="drop-wrapp wide"><!-- only add class ".wide" if there is content from tt_content in "div.teaser-block" -->
          <div class="drop-wrapp-inner">
            <div class="drop-block">
              <ul>
                <li><a href="#">Level 1.0</a></li>
                <li><a href="#">Level 1.1</a></li>
                <li><a href="#">Level 1.2</a></li>
              </ul>
            </div>
            <div class="teaser-block">
              Here is content from tt_content
            </div>
          </div>
        </div>
      
    </li>
    <li><a href="#">Level 0.2</a></li>
  </ul>
</nav>

Could you please be so kind to streamline the code to get a minimal example? This would help to answer your question. At first I would try to use so called REGISTER cObjects — Björn von TRITUM
I added the HTML in my question. In the meantime I found a working solution for me (see answer). Not sexy, but working. Maybe you know a better way? — chris

chris chris · Accepted Answer · 2016-03-30T15:13:52

I am sure, there are better solutions, but the following example works now for me. My trick are the two elements after the "30 = CONTENT" element. If there is content from tt_content I open a "div"-element and close if afterwards. Maybe there is a better way to do this with a special wrap?

lib.navMain = COA
lib.navMain {

  10 = TEXT
  10.wrap = |
  10.value = {$const.lang.navi.skip}
  10.typolink {
    parameter.data = page:uid
    parameter.dataWrap = |#skipMainNavi
    ATagParams = class="sr-only sr-only-focusable"  
  } 

  20 = HMENU
  20 {
    special = directory
    special.value = {$const.pid.home}
    entryLevel = 0

    1 = TMENU
    1 {
      expAll = 1
      target = _top
      noBlur = 1

      wrap = <ul class="nav navbar-nav" role="menubar">|</ul>

      NO {
        wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
        linkWrap = |  
        ATagParams = role="menuitem"
        title = field:title
        ATagTitle.field = subtitle // title
      }

      ACT < .NO
      ACT = 1
      ACT {
        wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
        ATagParams = class="mainmenuActive"
        # linkWrap = <strong>|</strong>
      }
    }

    2 < .1
    2 {
      wrap = <div class="drop-wrapp"><div class="drop-wrapp-inner">|</div></div>

      stdWrap.cObject = COA
      stdWrap.cObject {

        20 = HMENU
        20 {
          special = directory
          special.value.data = field:pid

          1 = TMENU
          1 {
            expAll = 1
            wrap = <div class="drop-block"><ul class="list-unstyled nav-list" role="menubar">|</ul></div>

            NO {
              wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
              linkWrap = |  
              ATagParams = role="menuitem"
              title = field:title
              ATagTitle.field = subtitle // title
            }

            ACT < .NO
            ACT = 1
            ACT {
              wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
              ATagParams = class="mainmenuActive"
              # linkWrap = <strong>|</strong>
            }
          }
        }

        30 = CONTENT
        30 {
          table = tt_content
          select {
            pidInList.field = pid
            where = colPos=99 AND deleted=0 AND hidden=0
            orderBy = sorting
            languageField = sys_language_uid
            max = 2
          }

          stdWrap {
            wrap = |

            // wrap only if there is content!
            required = 1
          }
        }

        1 = COA
        1 {
          if.isTrue.numRows < lib.navMain.20.2.stdWrap.cObject.30
          10 = TEXT
          10.value = <div class="wide">
        }

        100 = COA
        100 {
          if.isTrue.numRows < lib.navMain.20.2.stdWrap.cObject.30
          10 = TEXT
          10.value = </div><!-- /.wide -->
        }
      }

    }
  }

  30 = TEXT
  30.wrap = <a id="skipMainNavi" class="sr-only">|</a>
  30.value = &nbsp;
  30.htmlSpecialChars = 0  
}

Howto set a CSS class in a TYPOscript menu depending on content from tt_content

1 Answers