TYPO3 Menu: only first level is displayed

Question

I am currently working on a new site with Typo3, Version 7.3. This site will have a menu that should list all levels no matter of the current page. I tried with this TypoScript (which I also found on the internet in very similar variants):

MENU = HMENU
MENU.special = directory
MENU.special.value = 5
MENU.1 = TMENU
MENU.1 {
  wrap = <ul>|</ul>
  expAll = 1

  NO = 1
  NO  {
    wrapItemAndSub = <li>|</li>
  }
  ACT = 1
  ACT  {
    wrapItemAndSub = <li class="active">|</li>
  }
}
MENU.2 < MENU.1
MENU.2.wrap = <ul>|</ul>

Unfortunately this only outputs the first level of the page tree. Did I miss something? (The examples I found on the internet mostely related to version 6.x of Typo3) Is there some new command/syntax for menus in version 7.x of Typo3?

Thanks a lot for your help!

Answer 1

hello here is your Top navigation menu typo-script if you want to go with third level menu then it also possible this code is second level menu only

lib.Main_menu = COA
lib.Main_menu {
    10 = HMENU
    10.special = directory
    10.special.value = 2
    10 {
        wrap =<ul class="nav navbar-nav navbar-right text-uppercase">|</ul>
        #entryLevel = 0
        1 = TMENU
        1 {
            expAll = 1
            noBlur = 1


       # target = _top
        NO {
        ATagTitle {
            field = title
            fieldRequired = nav_title
        }
            ATagBeforeWrap = 1
            linkWrap = |

            wrapItemAndSub.insertData = 1
            wrapItemAndSub = <li class="menu-{field:uid}">|</li> |*| <li class="menu-{field:uid}">|</li>
            stdWrap.htmlSpecialChars = 1
           # allWrap = <div class="menu_header_no">|</div>

        }


        ACT < .NO
        ACT = 1
        ACT {
             wrapItemAndSub.insertData = 1
             wrapItemAndSub = <li class="active menu-{field:uid}" >|</li> 
            # ATagParams = class="" 
            # allWrap = <div class="menu_header_act">|</div>
        }
        IFSUB < .NO
        IFSUB = 1
        IFSUB {
            stdWrap.htmlSpecialChars = 1
            wrapItemAndSub = <li class="dropdown menu-{field:uid}">|</li> 
           # allWrap = <div class="menu_header_no">|</div>
           # ATagParams = class="dropdown-toggle"  data-toggle="dropdown"

        }
        ACTIFSUB < .IFSUB
        ACTIFSUB = 1
        ACTIFSUB {
            stdWrap.htmlSpecialChars = 1
            wrapItemAndSub = <li class="active menu-{field:uid} dropdown">|</li> 
           # allWrap = <div class="menu_header_no">|</div>
           # ATagParams = class="dropdown-toggle"  data-toggle="dropdown"
           # stdWrap.wrap = <b class="caret"></b>

        }
    }

    2 = TMENU
    2 {
        noBlur = 1
        wrap = <div class="hide-caret" data-toggle="dropdown" role="button" aria-expanded="false"><span class="caret"></span></div><ul class="dropdown-menu" role="menu">|</ul>
        NO {

        ATagTitle {
            field = title
            fieldRequired = nav_title
        }
             wrapItemAndSub.insertData = 1
            stdWrap.htmlSpecialChars = 1
            wrapItemAndSub = <li menu-{field:uid}><span class="sub-name">|</span><div class="menu-img"><img src="typo3conf/ext/fluxtemplate/Resources/Public/img/menu-5.png" class="img-responsive" alt="a" /></div></li> 

        }
        ACT < .NO
        ACT = 1
        ACT {
            wrapItemAndSub = <li class="active menu-{field:uid}"><span class="sub-name">|</span><div class="menu-img"><img src="typo3conf/ext/fluxtemplate/Resources/Public/img/menu-5.png" class="img-responsive" alt="a" /></div></li> 
            # ATagParams = class="" 
            #  allWrap = <div class="menu_header_act">|</div>
        }
    }
}

}

Answer 2

Following script will help you to show till third level menu.

lib.MainMenu= HMENU
lib.MainMenu.special = directory
lib.MainMenu.special.value = 1
lib.MainMenu.1 = TMENU
lib.MainMenu.1 {

    NO {
      wrapItemAndSub = <li >|</li>
      ATagTitle.field = 1
       #  = 1

    }  
  ACT = 1
  ACT{
      wrapItemAndSub = <li>|</li>
      ATagTitle.field = 1
      stdWrap.htmlSpecialChars = 1
      ATagParams = class="activemenu"
    }
    IFSUB{
      wrapItemAndSub = <li >|</li>
      ATagTitle.field = 1
    }
}

lib.MainMenu.2 < .lib.MainMenu.1
lib.MainMenu.2{

    wrap = <ul>|</ul>
    noBlur = 1
    expAll = 1
    NO {
      wrapItemAndSub = <li >|</li>
      ATagTitle.field = 1
    }  
    IFSUB{
      wrapItemAndSub = <li >|</li>
      ATagTitle.field = 1
     }
}

lib.MainMenu.3 < .lib.MainMenu.2
lib.MainMenu.3{

    wrap = <ul>|</ul>
    noBlur = 1
    expAll = 1
    NO {
      wrapItemAndSub = <li>|</li>
      ATagTitle.field = 1     
    }
    CUR = 1  
    CUR{
        linkWrap= <li>|</li>
    }
    CURIFSUB = 1
    CURIFSUB{
        linkWrap= <li>|</li>
    }

    ACTIFSUB = 1
    ACTIFSUB{
      linkWrap= <li>|</li>
    }  
}

You may change HTML as per your requirement

For more information about TYPO3 stuff you may visit my blog

https://jainishsenjaliya.wordpress.com/

Answer 3

meanwhile I found a solution (which I don't fully understand):

MENU = HMENU
MENU.special = directory
MENU.special.value = 5
MENU.1 = TMENU
MENU {
  1 {
    wrap = <ul>|</ul>
    expAll = 1

    NO = 1
    NO  {
      wrapItemAndSub = <li>|</li>
      stdWrap.htmlSpecialChars = 1
      ATagTitle.field = title
    }
    ACT <.NO
    ACT {
      ATagParams = class="active"
    }
  }
  2 < .1
  3 < .2
}

So all I changed is putting everything in MENU into a block ( {...} ) instead of using the dot-notation. To my understanding this should actually not make any difference, right?