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

Answer 1

If you use Typo3 version 8+ then it will good to use Menu processor https://docs.typo3.org/c/typo3/cms-core/master/en-us/Changelog/8.5/Feature-78672-IntroduceFluidDataProcessorForMenus.html You have to put this code in your FLUIDTEMPLATE object after that you will get Menu object in your fluid template and you can add wrapping whatever you want using "foreach"

Let me know if you need more help related to this

Thanks!!

Answer 2

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.