Question

昨天和今天，我很高兴找到如何在TYPO3 7.6中使用bootstrap css和TypoScript创建手风琴菜单。*

由于我几乎失去了理智，并且在去往它的路上询问了我的大脑，我正在寻找一个好的解决方案。

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

Answer 1

也许您可以使用流体进行菜单渲染。以下是一些例子：

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

Answer 2

昨天和今天，我很高兴找到如何在TYPO3 7.6中使用bootstrap css和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>
}

我仍然对我的todolist进行了一次小小的清理工作，在没有子菜单的情况下删除NO的子菜单。

您怎么看？

Answer 3

@ firegate666，您的解决方案令人鼓舞！我已经修改为说明： -子部分（注意：也适用于流体，只需更改### SUBPART ###） -用户生成的完整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创建手风琴菜单

3 个答案: