We just got done adding flexible banners and logos to our site, and we're ready to attack one of the biggest problems in template building: navigation. If you've flipped through, you noticed that this chapter has more tables and example code than everything before it combined. Don't worry, that's a good thing. The hierarchical menu in TYPO3 is one of the most powerful concepts available for us as TYPO3 developers. It includes the ability to create flexible menus with text, graphics, JavaScript, or DHTML completely through TypoScript without spending time in Photoshop or learning a new language.
Most importantly, this chapter is packed with code and examples because navigation is possibly the most important thing to get right in web design. All of the content and soon-to-be bestselling products in the world don't mean anything if users can't find them. Our menu is more than just the text at the top of the page; it's our first marketing pitch on how great a company we are to work with because we can help you find what you're looking for in the clearest way possible. So, it's time to get excited because there's no better way to show off our skills and please our boss (maybe get a bonus) then making a beautiful menu.
In this chapter you will:
- Learn about the base hierarchical menu object in TYPO3:
HMENU - Get introduced to the text-based menu object
- Rebuild the main menu and submenu from scratch with fancy text-based menu options
- Create your first graphical menu with a custom font, drop-shadows, and rollover actions
- Create a breadcrumb navigation menu that helps users see where they are in the website
We are about to dive into all of the little details, but there are a few basic concepts that we need to review first. We've already talked about the page tree and levels a little in the Chapter 1, but we are going to be using these concepts a lot in this chapter. So, we're going to make sure we have a more complete definition that avoids any confusion:
- Page tree: Our TYPO3 page tree is all of the pages and folders that we work with. This includes the home page, about us, subpages, and even non-public items such as the storage folder in our example site. If we have a very simple website it could look like this:
- Home
- About Us
- Staff
- Level: Our page tree will almost always have pages, subpages, and pages under those. In TYPO3, these are considered levels, and they increase as you go deeper into the page tree. For example, in our extremely simple website from the example above both Home and About Us are at the base (or root) of our page tree, so they are on level 0. The staff page is underneath the About Us page in the hierarchy, so it is on level 1. If we added a page for a photo gallery of our last staff lunch as a subpage to the staff page, then it would be at level 2:
- Home (Level 0)
- About Us (Level 0)
- Staff (Level 1)
- Staff Lunch Gallery (Level 2)
- Rootline: TYPO3 documentation actually has a few different uses for the term "rootline", but for the menu objects it is the list of pages from your current page or level moving up to the root page. In our example above, the current rootline from the Staff Lunch Gallery is Staff Lunch Gallery | Staff | About Us.