CODEWITHSUNDEEP
menutypo3accordiontyposcripttypo3-7.6.x
firegate666
firegate666

Reputation: 108

Create accordion menu with TypoScript

Yesterday and today I had quite some fun figuring out how to create an accordion menu with bootstrap css and TypoScript in TYPO3 7.6.*

Since I nearly lost my mind and questioned my brain on the way to it, I am searching for a good solution.

Edit: moved solution to own answer and changed topic start to question

Upvotes: 0

Views: 683

Answers (3)

stormat
stormat

Reputation: 3

@firegate666, your solution was inspirational! I've modified to account for: - subparts (note: also works with fluid, just change ###SUBPART### ) - user-generated full CSS styling (no panels) - a (minimum) 3 level menu

HTML Template:

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

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

TYPOscript:

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

...and (suggested) CSS:

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

I hope this addition to your code is helpful :-)

Upvotes: 0

firegate666
firegate666

Reputation: 108

Yesterday and today I had quite some fun figuring out how to create an accordion menu with bootstrap css and TypoScript in TYPO3 7.6.*

Since I nearly lost my mind and questioned my brain on the way to it, I want to share you my outcome and would like to get some improvement ideas.

I have a 2 level menu where the first level is only for grouping - not linked - and the second level contains the sub pages

This is the HTML container inside my template:

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

And this is my 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>
}

I still a small clean up on my todolist, to remove the submenu stuff for NO where there is no submenu.

What do you think?

Upvotes: 0

bschauer
bschauer

Reputation: 1010

Perhaps you could use fluid for Menu rendering. Here are some examples:

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

Upvotes: 1

Related Questions