Create a Typo3 Menu/Navigation and include it in a Fluid-Template

TIP: For an easier creation, management and reuse of TYPO3 Fluid-Templates, I recommend using the Fluid-Template-Manager (short FTM).

Notice: This Post is the fifth part of Create a complete Typo3 website by using the Fluid Template Engine

After creating a few more sites, includes some CSS-Files and designing the main frame, we will create a main-menu for our site.

1. Navigate into ‘WEB’->’List’, select the root-site within the tree and create a new sub-template by clicking on the New-Icon on your main-template. (show image)
2. Enter a name and save the new sub-template. (show image)
3. Be sure that the new sub-template is listed under the main-template and edit the main-template. (show image)
4. Open the Inlcudes-tab and search in the Include Basis Template Area for your sub-template, then include it (show image) and save the changes. (show image)
5. Open the new sub-template for creating the menu-TypoScript. (show image)
The mainNavi TypoScript could look like (show image) :

lib.mainNavi = HMENU
lib.mainNavi.entryLevel=0
lib.mainNavi.1 = TMENU
lib.mainNavi.1 {
  wrap = <ul id="mainNavi">|</ul>
  expAll = 0
  NO.allWrap = <li class="mainNaviItem">|</li>
  RO < .NO
  RO = 1
  CUR < .NO
  CUR = 1
  CUR.allWrap = <li class="mainNaviItemActive">|</li>
  ACT < .CUR
}

 

6.
Now we just have to include the mainNavi TypoScript objectpath into our Fluid-Template. Therefore we navigate into ‘FILE’->’Filelist’ and edit the fileadmin/templates/layouts/main.html and add the f:cObject on the needed position (show image) :

  <f:cObject typoscriptObjectPath="lib.mainNavi" />

 
Our Fluid-Template now looks like:

<div id="header">
  <div id="header-top-border"></div>
  <div id="header-area"></div>
  <f:cObject typoscriptObjectPath="lib.mainNavi" />
  <div id="header-line-dark"></div>
  <div id="header-line"></div>
</div>
<div id="content"><f:render section="content" /></div>
<div id="footer">
  <div id="footer-line"></div>
  <div id="footer-text">
    <div id="footer-text-left"></div>
    <div id="footer-text-right"></div>
  </div>
  <div id="footer-bottom-border"></div>
</div>

 
Notice: Don’t forget to clear the Typo3-Cache after editing the Fluid-Template. 😉

    • Chris
    • June 18th, 2011

    Hey, first of all thanks for this tutorials. As far as i can see this are the only useful ones to date if you want to create your TYPO3 templates with fluid.

    The only problem I have is that the menu won’t show up without any error whatsoever. Any idea what the reason may be? (I called it nav_main instead of mainNavi, but that should be no problem i guess).

      • tdeuling
      • June 19th, 2011

      Thanks 🙂
      All other things work, just the menu isn’t?!
      Did you also change the name in:

      Are you sure that the page has assigned the right template?

        • Chris
        • June 19th, 2011

        Hello Thomas,
        thanks for your reply. I managed to get the menu and some other details done in a night-long T3-Marathon 😉
        I tried some stuff and my menu now looks like this:

        lib.nav_main = HMENU
        lib.nav_main {
        entryLevel=0
        1 = TMENU
        1 {
        expAll=1
        noBlur=1
        wrap = |
        # NOrmal state
        NO{
        wrapItemAndSub = |
        }
        # ACTive state
        ACT=1
        ACT{
        wrapItemAndSub = |
        }
        # CURrent state
        CUR=1
        CUR{
        wrapItemAndSub = |
        }
        # ifsub state
        IFSUB=1
        IFSUB{
        wrapItemAndSub = |
        }
        }

        2<.1
        3<.2
        }

        A plain unordered list, three levels deep, that i have wrapped inside -Tags within the main-template to be html5 compliant.

        Greetings from Berlin!

          • tdeuling
          • June 20th, 2011

          Your TypoScript worked for me. I just exchanged it with yours…
          Is the subtemplate listed ‘under’ the maintemplate?
          If the problem still exists, contact me via mail 😉
          Good luck,
          Thomas

    • Volker
    • June 22nd, 2011

    Hi Thomas,

    in Deinem Beispielcode fehlt die Zeile
    lib.mainNavi = HMENU
    (im entsprechenden Screenshot ist sie hingegen drin). Bei mir hat das dazu geführt, dass der Code bis zum Einfügen dieser Zeile nicht funktierte. Vielleicht ergänzt Du das in dem – ansonsten super gemachten! – Tutorial noch?

    Gruß,
    Volker

      • tdeuling
      • June 22nd, 2011

      Thanks for the notice.. 😉
      I’ve just added the missing line.

      Thomas

    • Daniel
    • June 28th, 2011

    Hello Thomas,

    Thanks for this tutorial. At least one that discusses base templates rather than extension templates. However, I have a few questions, that are not answered in this simple example here:

    – Using the marker approach, it was possible to select a certain area of the layout (e.g. the body content) and use only that area as template. This has the great advantage, that the template file is a real HTML file that validates. How can I implement similar things with Fluid?

    – How do I insert stylesheet references from the template into the generated output?

    Thanks for your help!

    Regards,
    Daniel

    • ion gion
    • March 26th, 2012

    In the subtemplate typoscript configuration I’ve added and include because I want to store my typoscript files externaly

    Unfortunately it does not load the settings from that file, any tips?

    Thanks for the wonderful tutorial!

  1. Thank you a lot for this tutorial!!!

    • Amarjit Jha
    • September 11th, 2013

    Worked like magic!!

    I was struggling with Typo3 as an beginner. After going through all the manuals and everything about templating, I was standing no where. You have made it so easy for me.

    Thanks a lot.

    • martin
    • October 2nd, 2013

    After I inlcuded the menu I get this error:

    #1294587218: No TypoScript template found! (More information)

    TYPO3\CMS\Core\Error\Http\ServiceUnavailableException thrown in file
    /var/www/html/website/radiokorneuburg/typo3/sysext/frontend/Classes/Controller/TypoScriptFrontendController.php in line 2407.

    2 TYPO3\CMS\Frontend\Controller\TypoScriptFrontendController::getConfigArray()

    /var/www/html/website/radiokorneuburg/typo3/sysext/cms/tslib/index_ts.php:

    00167: // Get config if not already gotten
    00168: // After this, we should have a valid config-array ready

    00169: $TSFE->getConfigArray();

    00170: // Convert POST data to internal “renderCharset” if different from the metaCharset
    00171: $TSFE->convPOSTCharset();

    1 require(“/var/www/html/website/radiokorneuburg/typo3/sysext/cms/tslib/index_ts.php”)

    /var/www/html/website/radiokorneuburg/index.php:

    00039: ->redirectToInstallToolIfLocalConfigurationFileDoesNotExist();
    00040:

    00041: require(PATH_tslib . ‘index_ts.php’);

    00042: ?>

    I can’t find the problem…

    thx

      • tdeuling
      • October 4th, 2013

      Hi, it seems that you have forgotten some TYPOScript-Template Code.
      Please check if you have included them all on the right page.

    • martin
    • October 2nd, 2013

    somehow now it works.

    • sunny
    • October 3rd, 2013

    how to make a complete extension step by step …. pls add as many tutorials or helping material as much u can …. because typo material is so least over internet ………. want so much help as beginner …… thanx if u consider my request …..

      • tdeuling
      • October 4th, 2013

      Sadly I don’t have enough time for such a tutorial. But there’s an Extension called ‘extensionbuilder’. This Extension provides you a solid base for a new Extension, so that you’re able to see a lot of requirements and relationships. Here’s the link: http://typo3.org/extensions/repository/view/extension_builder/

    • Teelo
    • September 17th, 2015

    Hi Thomas,

    thank you for your tutorial! I’m new to Typo3 and Fluid. I wonder (heavily!) why there are such nice new advantages in Fluid as if conditions and for loops etc. but when it comes to navigation menus, I didn’t find any resource on the web, that would indicate a new way of initializing those menus. The TypoScript practically is the same as always, or am I misjudging this?

    The only thing that seems to have changed is the way the menu’s output is triggered in the template file with the f:cObject tag.

    Are we somehow discouraged by the Typo3 inventors to produce the menu html fully in the template file or should it be impossible? Wherever I look on the web, Fluid menus are built the same way as non-Fluid menus.

    Isn’t there a way of avoiding html (e.g. “ul” and “li”) in the TypoScript, i.e. avoiding the “wrap” and “allWrap” configurations and move them to the template file? In my opinion, since we have this nice new framework, there shouldn’t be any piece of html left in the TypoScript. I would expect there only the data to be prepared. Is that possible as far as you can say?

    Thank you very much for your opinion!

    Best regards,
    Teelo

      • tdeuling
      • September 18th, 2015

      Hey,
      you can use the extension:vhs for creating menus and many more. It’s one of the helpfuls extensions for TYPO3.
      Check it out: https://fluidtypo3.org/viewhelpers/vhs/master.html

      Best,
      Thomas

        • Teelo
        • October 1st, 2015

        Thank you for the hint. It seems Fluid is nothing without this extension, but when installed it’s pretty cool and pretty much what I was looking for.

  1. June 13th, 2011
  2. June 13th, 2011
  3. January 17th, 2012
    Trackback from : Homepage
  4. February 2nd, 2013
    Trackback from : Content Ausgabe greift nicht