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

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. Image may be NSFW.
Clik here to view.