TYPO3带有引导程序的第三个导航级别

Question

I have the following typoscript snippet which makes me a drop down navigation with bootstrap.

 MENU = HMENU
    MENU.entryLevel = 0
    #NAVIMAIN.excludeUidList = 

    MENU {
    1 = TMENU
    1 {
      expAll = 1

    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title

    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title

    IFSUB = 1
    IFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    IFSUB.after =  <b class="caret"></b></a>
    IFSUB.doNotLinkIt = 1
    IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
    IFSUB.ATagTitle.field = abstract // description // title

    ACTIFSUB = 1
    ACTIFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    ACTIFSUB.after =  <b class="caret"></b></a>
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.wrapItemAndSub = <li class="dropdown active">|</li>
    ACTIFSUB.ATagTitle.field = abstract // description // title

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

       2 = TMENU
  2 {
    expAll = 1

    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title

    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub = |
    ACTIFSUB.before = <li class="divider"></li><li class="nav-header">
    ACTIFSUB.after = </li>
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.ATagTitle.field = abstract // description // title

    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title

    IFSUB = 1
    IFSUB.before = <li class="divider"></li><li class="nav-header">
    IFSUB.after = </li>
    IFSUB.doNotLinkIt = 1
    IFSUB.ATagTitle.field = abstract // description // title

    SPC = 1
    SPC.allWrap = <li class="divider"></li><li class="nav-header">|</li>

    wrap = <ul class="dropdown-menu">|</ul>
  }

How can I add a third level Menü as dropdown of a second level menü?

Thanks in advance.

Answer 1

The default navbar of Bootstrap only supports two levels. I'd recommend using Smartmenus jQuery to get three or more sublevels.

The adapted HMENU setup for TYPO3 would be like this:

lib.bootstrap3-smartmenus = COA
lib.bootstrap3-smartmenus {
  wrap = <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> | </div> </nav>
  
  10 = COA
  10 {
    wrap = <div class="navbar-header"> | </div>
    10 = COA
    10 {
      // hamburger icon:
      wrap = <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | </button>
      10 = TEXT
      10.value = <span class="sr-only">Toggle navigation</span>
      20 = TEXT
      20.value = <span class="icon-bar"></span>
      21 < .20
      22 < .20
    }
  
    // company name/logo:
    20 = TEXT
    20.value = Project name
    20.typolink {
      parameter = http://www.example.org/
      ATagParams = class="navbar-brand"
    }
  }
  
  20 = COA
  20 {
    wrap = <div class="navbar-collapse collapse"> | </div>
  
    10 = HMENU
    10 {
      wrap = <ul class="nav navbar-nav"> | </ul>
  
      1 = TMENU
      1 {
        expAll = 1
  
        NO = 1
        NO {
          ATagTitle.field = title
          wrapItemAndSub = <li>|</li>
        }
  
        CUR < .NO
        CUR {
          wrapItemAndSub = <li class="active">|</li>
        }
 
        IFSUB = 1
        IFSUB {
          ATagTitle.field = title
          ATagParams = class="sub-arrow"
          linkWrap = |<span class="caret"></span>
          ATagBeforeWrap = 1
          wrapItemAndSub = <li>|</li>
        }
 
        CURIFSUB < .IFSUB
        CURIFSUB {
          wrapItemAndSub = <li class="active">|</li>
        }
  
        ACT < .CUR
        ACTIFSUB < .CURIFSUB
  
        SPC = 1
        SPC {
          // no divider, if first menu item on this level (using optionSplit):
          wrapItemAndSub = <li class="dropdown-header">|</li> |*| <li class="divider"></li><li class="dropdown-header">|</li>
        }
      }
  
      2 < .1
      2 {
        wrap = <ul class="dropdown-menu">|</ul>
  
      }
  
      3 < .2
      4 < .3
    }
  }
}

Some changes to the markup must be made (eg no more data-toggle="dropdown" ).

In addition to the default Bootstrap files, these CSS and JavaScripts must be used:

• jquery.smartmenus.bootstrap.css
• jquery.smartmenus.min.js
• jquery.smartmenus.bootstrap.min.js

I once created a demo (including this information) here .

---

Edit: If you rather want to extend the default Bootstrap navbar with the provided example, you can use the following TypoScript setup. I successfully tested it with the extra CSS of the Codepen example.

It removes the caret element in sublevels and add the extra classes you need. You can adjust the classes container / container-fluid and navbar-fixed-top to your needs.

This TypoScript (as well as the snippet above) will also take care of menu separator pages in TYPO3 ( SPC ) and adds the divider element of Bootstrap only, if it is not the first subpage of this branch of the page tree.

 lib.navbar = COA lib.navbar { wrap = <nav class="navbar navbar-default"> <div class="container-fluid"> | </div> </nav> 10 = COA 10 { wrap = <div class="navbar-header"> | </div> 10 = COA 10 { // hamburger icon: wrap = <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">|</button> 10 = TEXT 10.value = <span class="sr-only">Toggle navigation</span> 20 = TEXT 20.value = <span class="icon-bar"></span> 21 < .20 22 < .20 } // company name/logo: 20 = TEXT 20.value = Project name 20.typolink { parameter = http://www.example.org/ ATagParams = class="navbar-brand" } } 20 = HMENU 20 { wrap = <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> | </ul> </div> 1 = TMENU 1 { expAll = 1 NO = 1 NO { ATagTitle.field = title wrapItemAndSub = <li>|</li> } CUR < .NO CUR { wrapItemAndSub = <li class="active">|</li> } ACT < .CUR IFSUB = 1 IFSUB { ATagTitle.field = title ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" linkWrap = |<b class="caret"></b> ATagBeforeWrap = 1 wrapItemAndSub = <li class="dropdown">|</li> } ACTIFSUB < .IFSUB ACTIFSUB { wrapItemAndSub = <li class="dropdown active">|</li> } CURIFSUB < .ACTIFSUB } 2 < .1 2 { // Adjust several classes for sublevels wrap = <ul class="dropdown-menu multi-level">|</ul> IFSUB.wrapItemAndSub = <li class="dropdown-submenu">|</li> ACTIFSUB.wrapItemAndSub = <li class="dropdown-submenu active">|</li> // Remove caret element (correct arrow is set with ::after pseudo element) IFSUB.linkWrap > ACTIFSUB.linkWrap > CURIFSUB < .ACTIFSUB SPC = 1 SPC { // no divider, if first menu item on this level (using optionSplit): wrapItemAndSub = <li class="dropdown-header">|</li> |*| <li class="divider"></li><li class="dropdown-header">|</li> } } 3 < .2 4 < .3 } } 

Please be aware that pages containing sublevels cannot not be linked to a page in TYPO3 this way. You'll need to use Shortcut pages, just as do with these pages on the first level of this navigation.