title: Howto set a CSS class in a TYPOscript menu depending on content from tt_content
body: <p>I am building a navigation menu with TYPOscript which is extended with content from the tt_content table.</p>
  
  <p>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").</p>
  
  <p>This is my TYPOscript so far:</p>
  
  <pre><code>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 = &lt;ul class="nav navbar-nav" role="menubar"&gt;|&lt;/ul&gt;
  
        expAll = 1
        target = _top
        noBlur = 1
  
        wrap= &lt;ul class="nav navbar-nav" role="menubar"&gt;|&lt;/ul&gt;
  
        NO {
          wrapItemAndSub = &lt;li class="first"&gt;|&lt;/li&gt; |*| &lt;li&gt;|&lt;/li&gt; |*| &lt;li class="last"&gt;|&lt;/li&gt;
          linkWrap = |  
          ATagParams = role="menuitem"
          title = field:title
          ATagTitle.field = subtitle // title
        }
  
        ACT &lt; .NO
        ACT = 1
        ACT {
          wrapItemAndSub = &lt;li class="first active"&gt;|&lt;/li&gt; |*| &lt;li class="active"&gt;|&lt;/li&gt; |*| &lt;li class="last active"&gt;|&lt;/li&gt;
          ATagParams = class="mainmenuActive"
          # linkWrap = &lt;strong&gt;|&lt;/strong&gt;
        }
      }
  
      2 &lt; .1
      2 {
        wrap = &lt;div class="drop-wrapp CLASS_IF_CONTENT_FROM_TT_CONTEN"&gt;&lt;div class="drop-wrapp-inner"&gt;|&lt;/div&gt;&lt;/div&gt;
  
  
        20 = HMENU
        20 {
          special = directory
          special.value.data = field:pid
  
          1 = TMENU
          1 {
            expAll = 1
  
            NO {
              wrapItemAndSub = &lt;li class="first"&gt;|&lt;/li&gt; |*| &lt;li&gt;|&lt;/li&gt; |*| &lt;li class="last"&gt;|&lt;/li&gt;
              linkWrap = |  
              ATagParams = role="menuitem"
              title = field:title
              ATagTitle.field = subtitle // title
            }
  
            ACT &lt; .NO
            ACT = 1
            ACT {
              wrapItemAndSub = &lt;li class="first active"&gt;|&lt;/li&gt; |*| &lt;li class="active"&gt;|&lt;/li&gt; |*| &lt;li class="last active"&gt;|&lt;/li&gt;
              ATagParams = class="mainmenuActive"
              # linkWrap = &lt;strong&gt;|&lt;/strong&gt;
            }
          }
        }
  
        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 = &lt;div class="teaser-block"&gt;&lt;div class="teaser-block-inner"&gt;&lt;strong class="title"&gt;PAGE TITLE FIRST LEVEL&lt;/strong&gt;&lt;div class="teaser-text"&gt;|&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  
            // wrap only if there is content!
            required = 1
          }
        }
  
        stdWrap.innerWrap = &lt;div class="drop-block"&gt;&lt;ul class="list-unstyled nav-list" role="menubar"&gt;|&lt;/ul&gt;&lt;/div&gt;
  
      }
    }
  
    30 = TEXT
    30.wrap = &lt;a id="skipMainNavi" class="sr-only"&gt;|&lt;/a&gt;
    30.value = &amp;nbsp;
    30.htmlSpecialChars = 0  
  }
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>This is very breafly what I want to achieve:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Level 0.0&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Level 0.1&lt;/a&gt;
        
          &lt;div class="drop-wrapp wide"&gt;&lt;!-- only add class ".wide" if there is content from tt_content in "div.teaser-block" --&gt;
            &lt;div class="drop-wrapp-inner"&gt;
              &lt;div class="drop-block"&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Level 1.0&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Level 1.1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Level 1.2&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="teaser-block"&gt;
                Here is content from tt_content
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Level 0.2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>