Now you want to create a menu based on the pages in Typo3. Here you'll also find that I have inserted comments in the template-file from GoLive. This time my thought has been to substitute the five menu-items under the image with links to pages from Typo3. But I also have to make sure that there will be only 5 items!
The HTML code looks like this:
<tr height="20">
<!--###MENU### start-->
<td width="120" height="20" bgcolor="black" nowrap>
<center>
<a href="whatsnew.html">what's new</a></center>
</td>
<td width="120" height="20" bgcolor="#2f2714" nowrap>
<center>
<a href="resources.html">resources</a></center>
</td>
<td width="120" height="20" bgcolor="black" nowrap>
<center>
<a href="calendar.html">calendar</a></center>
</td>
<td width="120" height="20" bgcolor="#2f2714" nowrap>
<center>
<a href="faq.html">FAQ</a></center>
</td>
<td width="120" height="20" bgcolor="black" nowrap>
<center>
<a href="contact.html">contact</a></center>
</td>
<!--###MENU### stop-->
</tr>
As you see every menu-element is in a table-cell. So basically we need to "wrap" every item in a table-cell when we create the menu. Now, modify your template-record in Typo3 like this:
page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/main.css
page.bodyTag = <body background="Images/tile_bkgrnd.gif">
page.10 = TEMPLATE
page.10 {template = FILE
template.file = fileadmin/tmplpage.html
workOnSubpart = DOCUMENT_BODY
subparts.CONTENT < styles.content.get
subparts.MENU = HMENU
subparts.MENU.minItems = 5
subparts.MENU.maxItems = 5
subparts.MENU.1 = TMENU
subparts.MENU.1.NO {
allWrap = <td>|</td>
}
}
This inserts a menu of pages from the first level with forced 5 elements wrapped with table-cell tags. Now, it looks like this:
Looking at the original HTML-code we can see, that the elements are wrapped in a more sofisticated code. So we might insert this instead:
<td width="120" height="20" bgcolor="black" nowrap> | </td>
But we also see that the background color of the items shift! This can also be done by Typo3! This is called "optionSplit". Unfortunately this is very complicated, but it works and lets us define how the wrap of eg. the "first", the two "last" and the items in the middle of a menu should be wrapped.
The basic form of optionSplit we need is to let the wrap alter all the time between two choices. This is done by this:
|*| <td width="120" height="20" bgcolor="black" nowrap> | </td> || <td width="120" height="20" bgcolor="#2f2714" nowrap> | </td> |*|
I also entered the <center>-tags for all elements, but here I used another property of the TMENUITEM-object (which is the one used here. See the TypoScript reference).
So modify the template-record like this:
subparts.MENU.1.NO {allWrap = |*| <td width="120" height="20" bgcolor="black" nowrap> | </td> || <td width="120" height="20" bgcolor="#2f2714" nowrap> | </td> |*|
linkWrap = <center>|</center>
}
This is perfect! (But notice that the last menuitem was not found, therefore "..." is shown)
