Question

我有以下的typoscript片段，它使我成为带引导程序的下拉导航。

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

如何添加第三级Menü作为二级别的下拉菜单？

提前致谢。

Answer 1

Bootstrap的默认导航栏仅支持两个级别。我建议使用Smartmenus jQuery来获得三个或更多的子级别。

适用于TYPO3的HMENU设置如下：

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

必须对标记进行一些更改（例如，不再需要data-toggle="dropdown"）。

除了默认的Bootstrap文件外，还必须使用这些CSS和JavaScripts：

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

我曾创建过一个演示（包括此信息）here。

<小时/> 编辑：如果您希望使用提供的示例扩展默认的Bootstrap导航栏，则可以使用以下TypoScript设置。我使用Codepen示例的额外CSS成功测试了它。

它删除了子级中的插入符元素并添加了您需要的额外类。您可以根据需要调整班级container / container-fluid和navbar-fixed-top。

这个TypoScript（以及上面的代码片段）也将处理TYPO3（SPC）中的菜单分隔页，并且只添加Bootstrap的分隔符元素，如果它不是此分支的第一个子页面页面树。

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

请注意，包含子级别的页面不能以这种方式链接到TYPO3中的页面。您需要使用 Shortcut 页面，就像在此导航的第一级上使用这些页面一样。

TYPO3第三级导航级别带引导程序

1 个答案: