Responsive Menu in TYPO3

Question

I have to implement a new responsive Navigation for a client which uses TYPO3. I didn't build the site and I've never used Typo3 before.

Could anyone help me to understand how I can implement this Template or something similar: https://demo.sebkln.de/hmenu/?type=3

So far I replaced the TypoScript Code in the projects "default_navbar.ts" and I found a way to load smartmenus js & css. The Problem right now is: The Code for the new Navbar does not show up. I guess I need to edit some template as well?

If someone knows a better way to update a already written Navbar, you're welcome to suggest something. The current Navbar has 3 Levels. Every little answer helps me a lot.

Old Navi (non responsive)

lib.default_navbar = HMENU
lib.default_navbar {
    wrap (
    <div class="navbar navbar-default with-hover">
      <div class="container">
        <div class="navbar-collapse" id="bs-navbar-collapse-1">
          |
        </div>
        </div>
    </div>
    )
    entryLevel = 0
    1 >
    1 = TMENU
    1 {
        noBlur = 1
        expAll = 1
        wrap = <ul class="nav navbar-nav"><li class="home"><a class="navbar-brand" href="/"><i class="fa fa-home"></i></a></li>|</ul>

        NO = 1
        #NO.stdWrap.htmlSpecialChars = 0
        #NO.wrapItemAndSub.insertData=1
        #NO.wrapItemAndSub = <li class="first m{field:uid} p{field:pid}">|</li> |*| <li class="m{field:uid} p{field:pid}">|</li> |*| <li class="last m{field:uid} p{field:pid}">|</li>

        NO {
            wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
            stdWrap.wrap = <i class="fa fa-angle-right"></i>|
        }


        ACT < .NO
        ACT {
            wrapItemAndSub = <li class="first act">|</li> |*| <li class="act">|</li> |*| <li class="act last">|</li>
            stdWrap.wrap = <i class="fa fa-angle-right"></i>|
        }
        CUR < .NO
        CUR {
            wrapItemAndSub = <li class="first act cur">|</li> |*| <li class="act cur">|</li> |*| <li class="act cur last">|</li>
            stdWrap.wrap = <i class="fa fa-angle-right"></i>|
        }
    }
    2 = TMENU
    2 {
        noBlur = 1
        expAll = 1
        wrap = <ul class="dropdown-menu" role="menu">|</ul>
        NO = 1
        NO.wrapItemAndSub.insertData=1
        NO.wrapItemAndSub = <li class="first m{field:uid}">|</li> |*| <li class="m{field:uid}">|</li> |*| <li class="last m{field:uid}">|</li>

        NO {
            wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
            stdWrap.wrap = <i class="fa fa-angle-right"></i>|
        }
        ACT < .NO
        ACT {
            wrapItemAndSub= <li class="first act first_act m{field:uid}">|</li> |*| <li class="act m{field:uid}">|</li> |*| <li class="last act m{field:uid}">|</li>
            stdWrap.wrap = <i class="fa fa-angle-right"></i>|
        }
        CUR < .NO
        CUR {
            wrapItemAndSub= <li class="first act cur first_act first_cur m{field:uid}">|</li> |*| <li class="act cur m{field:uid}">|</li> |*| <li class="last act cur m{field:uid}">|</li>
            stdWrap.wrap = <i class="fa fa-angle-right"></i>|
        }
        SPC = 0
    }
}

Navi I would like to use

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 = https://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>

                    // Set 'active' class to shortcuts that link to the current page (e.g. useful when 'Home' is root page):
                    wrapItemAndSub.override.cObject = COA
                    wrapItemAndSub.override.cObject {
                        if {
                            value = 4
                            equals.field = doktype
                            isTrue = 1
                            isTrue.if {
                                value.data = TSFE:page|uid
                                equals.field = shortcut
                            }
                        }

                        10 = TEXT
                        10.value = <li class="active">|</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
        }
    }
}

Where is your default_navbar.ts code placed? How do you load it? Could you post its content? — Riccardo De Contardi
@RiccardoDeContardi The default_navbar.ts is in typo3conf\ext\dm62\Configuration\TypoScript\menu - How its getting loaded? No Clue. I can search the whole project for a string. Can i find it this way? The content of default_navbar.ts is the same as shown in demo.sebkln.de/hmenu/?type=3 at the bottom of the page. — roehler.nrw
lib.default_navbar is still used? if you can find out where it is defined - for example in a file inside EXT:dm62, you could replace that code with yours, I think. — Riccardo De Contardi
Okay, thanks! I found the line were i needed to replace the lib.default_navbar! Now the new menu is showing up inside the project. The next problem is: The menu toggle button is hidden. When I make it visible the toggle does not work properly.... but thanks for your help! I'm one step closer to success! :) — roehler.nrw

Riccardo De Contardi Riccardo De Contardi · Accepted Answer · 2019-12-09T23:16:06

I understand that EXT:dm62 (short for /typo3conf/ext/dm62) is the extension that you (or someone else) wrote as the place where all the frontend configuration, i.e. TypoScript, Assets like CSS, JS and HTML templates are stored. Usually this is referred as "frontend provider" or "site package" or some similar name. Here you can find some information to start.

You wrote that your file contains lib.bootstrap3-smartmenuswhich is a TypoScript object, you could start looking if is loaded at all. To check this you can check the whole TypoScript in use using the Template Module (I took screenshots from version 9.5)

After that, select your homepage (or the page where the main TypoScript template is located) and then on the dropdown on the top, select "typoscript object browser" and "setup":

You will see a tree with all the TypoScript currently in use in your setup; I expect you to see the lib.bootstrap3-startmenus somewhere here:

Said that, it is a bit difficult to help you further, as this object can be rendered in the frontend in several ways, depending on the template system in use and how it is configured. For example

if plain TypoScript is in use, there could be just something like

page.20 < lib.bootstrap3-smartmenus

(the "20" number may vary)

if FLUIDTEMPLATE is used, I would expect that in EXT:dm62 there is a file inside the folder /Resources/Private that may contain a line like this:

<f:cObject typoscriptObjectPath="lib.bootstrap3-smartmenus" />

if an older system like TEMPLATE or even TemplaVoilà is in use, the configuration will be even different. If you can, share more details about the files included in EXT:dm62; please specify also the TYPO3 version you're using.

Responsive Menu in TYPO3

2 Answers