使用 TypoScript 创建手风琴菜单

Question

昨天和今天我在弄清楚如何使用 bootstrap css 和 TYPO3 7.6 中的 TypoScript 创建手风琴菜单时玩得很开心。*

因为我差点失去理智并在途中质疑我的大脑，我正在寻找一个好的解决方案。

编辑：将解决方案移至自己的答案并将主题开始更改为问题

Answer 1

也许您可以使用流体来呈现菜单。以下是一些示例：

https://github.com/TYPO3/TYPO3.CMS/tree/master/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Menu

Answer 2

昨天和今天我在弄清楚如何使用 bootstrap css 和 TYPO3 7.6 中的 TypoScript 创建手风琴菜单时玩得很开心。*

由于我差点失去理智并在途中质疑我的大脑，我想与您分享我的结果并希望得到一些改进的想法。

我有一个 2 级菜单，其中第一级仅用于分组 - 不链接 - 第二级包含子页面

这是我模板中的 HTML 容器：

# HTML part, put into your template
<div class="panel-group" id="accordion">
    <f:cObject typoscriptObjectPath="lib.menu2" />
</div>

这是我的 TypoScript：

# TypoScript part
lib.menu2 = HMENU
lib.menu2 {
  wrap = |

  1 = TMENU
  1.expAll = 1

  1.NO = 1
  1.NO.wrapItemAndSub = <div class="panel panel-default">| </table></div></div></div>
  1.NO.doNotLinkIt = 1
  1.NO.allStdWrap.dataWrap =  <div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{field:uid}"> | </a></h4></div><div id="collapse{field:uid}" class="panel-collapse collapse"><div class="panel-body"><table class="table">

  1.IFSUB < .1.NO
  1.IFSUB.allStdWrap.dataWrap =  <div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{field:uid}"> | </a></h4></div><div id="collapse{field:uid}" class="panel-collapse collapse"><div class="panel-body"><table class="table">

  1.CURIFSUB < .1.NO
  1.CURIFSUB.allStdWrap.dataWrap =  <div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{field:uid}"> | </a></h4></div><div id="collapse{field:uid}" class="panel-collapse collapse in"><div class="panel-body"><table class="table">
  1.ACTIFSUB< .1.CURIFSUB

  2 = TMENU
  2.NO = 1
  2.NO.linkWrap = <tr><td> | </td></tr>
}

我仍然对我的待办事项列表进行了一些小的清理，以删除没有子菜单的 NO 的子菜单内容。

你怎么看？

Answer 3

@firegate666，您的解决方案非常鼓舞人心！我已经修改以说明： - 子部分（注意：也适用于流体，只需更改 ###SUBPART### ） - user-generated 完整 CSS 样式（无面板） - 一个（至少）3 级菜单

HTML 模板：

 <!-- ###MENU### START -->

 <!-- ###MENU### END -->

打字错误：

# declare the menu,
# wrap it in a list <ul>
# and then wrap all that in a container div (for post-processing menus like slicknav),
subparts.MENU = HMENU
subparts.MENU.wrap = <div id="menu"><ul> | </ul></div>
subparts.MENU {

    # 1st level
    1 = TMENU
    1 {

      expAll = 1

      # enable the NOrmal state, wrap it in a <li>
      NO = 1
      NO.wrapItemAndSub = <li> | </li>


      # IF item has a SUBmenu, then it's still like a NOrmal item, but more
      # wrap it in Bootstrap accordion/collapse functionality
      # then close it
      IFSUB < .NO
      IFSUB = 1  
      IFSUB.allStdWrap.dataWrap (
        <a class="accordion-toggle collapsed" data-toggle="collapse" href="#collapse{field:uid}"> | </a>
        <div id="collapse{field:uid}" class="collapse">
          <ul>
      )
      IFSUB.wrapItemAndSub (
            <li> | </li>
          </ul>
        </div>
      )
      IFSUB.doNotLinkIt = 1

    }

    # 2nd level sub-menu and 3rd level sub-sub-menu inherit all the properties of 1st level
    2 < .1
    3 < .1


# end subparts.MENU
}

...和（建议）CSS:

.accordion-toggle:before {
  content: "- ";
}
.accordion-toggle.collapsed:before {
  content: "+ ";
}

我希望对您的代码添加的内容对您有所帮助:-)

使用 TypoScript 创建手风琴菜单

Create accordion menu with TypoScript

menu

typo3

accordion

typoscript

typo3-7.6.x