Okay, so we've made some tasteful changes to update our navigation and make our boss happier, but we need to see the full power of the basic text menu in TYPO3 before we move on to graphical menus. We can't just go back to our bosses and show them that we added little lines to the menu; it's not that impressive. We need to really experiment with this, and that means we have to make more than small tasteful changes. We need to break stuff.
- There is a limited amount of space in our submenu area, so we'll set a maximum limit of items:
lib.subMenu.1.maxItems = 8
- We can skip over the first page in the main page tree (Products) for now, so we'll just start on the second item:
lib.mainMenu.1.begin = 2
- The spacing between the text items and the separators seems a little imprecise. We can replace the
spaces with spacer images:lib.mainMenu.1.NO.after = <img src="clear.gif" width="15"> | |*| <img src="clear.gif" width="15"> | |*|
- If we add a class to the
<a>tags, it will make it even easier to style in CSS:lib.mainMenu.1.NO.ATagParams = class="menu-links"
- Right now, we don't have a title field in the
<a>tags, but a title helps usability for everyone and especially those using screen readers or other assistive devices. We're all about web standards right now. We can add the description or page title from the page properties to the link's title field to clarify the contents of the page to which we are linking. To insure that we don't have blank titles, we are going to use the//operator in TypoScript so that TYPO3 will look for the description field first and use the title field if the description is empty:lib.mainMenu.1.NO.ATagTitle.field = description // title
- It might end up looking tacky, but we just want to see what it looks like to place an image in front of our text titles in the menu. Just to be consistent, we want to make sure that the image links to the same page as the text:
lib.mainMenu.1 { NO { beforeImg = fileadmin/templates/bullet.png beforeImgLink = 1 } } - While we're at it, let's just add a rollover image. Remember we have to enable the rollover state at the end for it to work:
lib.mainMenu.1.NO { RO = 1 beforeROImg = fileadmin/templates/bullet_rollover.png } - Finally, we decide that we want to show the pages in the current rootline (with the
ACTstate) differently to set them apart. Our first though might be to just worry about the current page state (CUR), but it might be nice if the main menu item displayed differently even if we're on a subpage. We can use the<operator TypoScript (see TSref for more information) to copy the properties of the normal state over as a starting point. To copy all of the properties, we will writeACT < .NO(notACT < NO). We'll change the class on the active links and remove the image in front of them. Once again, we will have to enable theACTstate to use it:lib.mainMenu.1 { ACT < .NO ACT = 1 ACT { ATagParams = class="active-link" beforeImg > } } - Finally, we need to add a class to the stylesheet to differentiate the active links according to TYPO3. We've just told the template to change the class to
active-link, so we can add the following code to the bottom of our CSS file to change the color of the link to a light grey:li.menu-item a.active-link { color: #ddd; }
After all of our changes, our menu may not be as simple and clean as it once was, but it definitely shows what we can do with some lines of TypoScript. Here is a screenshot with from the Content Elements page. With the mouse hovering over the Visions menu item we can see the rollover image and the link title text that is being pulled from the description field of the page properties:
If you stepped through all of those changes with us, you probably noticed that we added a lot of redundant lines because we wanted all of our modifications to stand on their own. Of course, in a production environment, those changes should look cleaned up:
## Main Menu [Begin]
lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.wrap = <ul id="menu-area">|</ul>
lib.mainMenu.1 = TMENU
lib.mainMenu.1 {
begin = 2
NO {
allWrap = <li class="menu-item">|</li>
after = <img src="clear.gif" width="15"> | |*| <img src="clear.gif" width="15"> | |*|
ATagParams = class="menu-links"
ATagTitle.field = description // title
beforeImg = fileadmin/templates/bullet.png
beforeImgLink = 1
RO = 1
beforeROImg = fileadmin/templates/bullet_rollover.png
}
ACT < .NO
ACT = 1
ACT {
ATagParams = class="active-link"
beforeImg >
}
}
text-based menustext-based menusfinal code## Main Menu [End]
## Submenu [Begin]
lib.subMenu = HMENU
lib.subMenu.entryLevel = 1
lib.subMenu.wrap = <ul id="submenu-area">|</ul>
lib.subMenu.1 = TMENU
lib.subMenu.1.maxItems = 8
lib.subMenu.1.NO {
allWrap = <li class="submenu-item">|</li>
}
## Submenu [End]