One page with three menus - All using Menu Manager
by Richard Powell
RichardoP, a freelance web designer from Newcastle, UK who can be found in the forums and chat room
Menu Manager is a powerful module that creates List driven menus from your pages in your favourite CMS: Content Management System Made Simple. The beauty of it is that if you know a bit of HTML and CSS its really quite easy to use. In this tutorial I am going to:
- Create 3 'typical' menus using different menu manager options
- Give some more general tips and advice on menu manager styling
My own "Typical Sites" usually have 3 menus, these are Level 1 Navigation, Level 2 Navigation and Global Navigation. The Site Wireframe image below illustrates this point.
Of course your site might have a different structure. Level 2 Navigation might appear as a drop down list underneath the level 1 items. However this tutorial aims to just give an overview of Menu Manager rather than a 'catch all' feature list.
For Demonstration purposes my site, a portfolio site for a Photographer, has the following pages and Layout:
- Home Page
- Gallery
- Weddings
- Prices
- Special Offer
- Prices
- Children
- Prices
- Portraiture
- Prices
- Weddings
- About
- contact
- Mailing List
- Privacy Policy
- Terms and Conditions
- Help
Level 1 Navigation
From the page layout above I can identify that the following pages are level 1 items:
- Home Page
- Gallery
- About
- Contact
Even though it looks like they should; Privacy Policy, Terms and Conditions and help aren't really important enough to occupy the prime realestate that is level 1 navigation. Instead, these belong in the Global Navigation section. So now we know what pages we want to include in level 1 navigation its time to call them into our template. We can do this with:
{menu number_of_levels="1" excludeprefix="privacypolicy,terms,help"}
So whats this actually doing? Well, first of all we tell menu manager we want to place a menu:
menu
Normally you would place this in your page template, though its is (probably) possible to place it in global content blocks, or content areas, though this isn't recommended. Next we tell Menu Manager that we only want to display links to page that are in level 1 with:
number_of_levels="1"
Lastly, we need to tell Menu Manager not to include the pages that we want to reserve for Global Navigation. We do this via:
excludeprefix="privacypolicy,terms,help"
This excludes pages by their page alias, we can exclude multiple pages by separating each page alias with a comma. Of course we could use 'includeprefix' instead, however this would mean adding more pages, and also that any new pages we added wouldn't be automatically included in the menu.
To see a full list of the options you can use with menu manager in your cms installation go to "Admin > Layout > Menu Manger > Help". You should read this page now and familiarise yourself with the options available to you.
Level 2 and 3 Navigation
Now we need to add in Level 2 navigation, this time we don't need to worry about what pages to include and exclude, we just need to deal with navigation levels. Additionally I don't like have more than 4 levels of navigation, but looking at out site map we do, specifically:
- Gallery
- Weddings
- Prices
- Special Offer
- Prices
- Weddings
The special Offer page is on the 4th level of navigation, so we should stop this menu from including this, here goes:
{menu start_level="2" number_of_levels="3" }
This means that the menu starts at level 2, and will only display level 2 items from the currently selected parent lvl 1 page:
start_level="2"
Next we stop the 4th level of navigation from being displayed:
number_of_levels="3"
You could also achieve this by changing the page properties of any pages 4 levels deep to 'not show in menu', but this can cause problems with tags such as cms_selflink, also that would mean manually editing each page.
Global Navigation
Lastly we need to sort out global navigation, this is easily done. Looking at our site map we need to include the 'Privacy policy', 'Terms and Conditions' and 'Help Pages' and ignore all other pages. Also, as Global navigation is ussually just 1 level we need to stop the menu from including more than 1 level. Here goes:
{menu number_of_levels="1" includeprefix="Privacy_Policy,Terms_and_Conditions,Help"}
I hope by now you can figure out what exactly this is doing, but just in case, first we need to limit the menu to just level 1:
number_of_levels="1"
Next we need to tell menu manager to only include the pages that we have decided are classed as global navigation
includeprefix="Privacy_Policy,Terms_and_Conditions,Help"
Just like 'excludeprefix' we include pages by their page alias, and we separate each page alias with a comma. In fact its quite common to see other modules doing very similar things. That's it, we have all 3 menus in place. We've only covered a few of the options available to use, but these are the options i use most.
for further menu manager options be sure to check out "Admin > Layout > Menu Manager > Help" in your cms installation.
Styling your menu
Usually you can style your menu purely through CSS without having to dig into the menu manager template. So if you are good with styling lists via CSSyour all set, if you're not you should check out these resource:
Add A Comment
Thanks for this information, it's really helpfull.
Great Article! Look forward to reading more from you!
Nice article!
The page selection for Global navigation can also be achived by using items="Privacy_Policy,Terms_and_Conditions,Help" The items option exclusively takes the page aliases and not as prefix like includeprefix do.
well done! R.