Sometimes navigation can become a chore especially when there are a lot of pages and you want to provide some sort of feedback to your visitor to indicate which page is current. Usually this means creating a special version of the menu for each page. In PageBlender this is very easy to achieve in a way which automatically detects the page being built and changes the menu accordingly. Take, for example, a simple table based navigation
| HOME |
| ABOUT |
| CONTACT |
| NAVIGATION |
To keep it simple we haven't bothered with fancy rollovers or anything but just display of the menu. Now suppose that we wanted to change the colour scheme for the active menu item and turn it off or make it inactive.
To start with we can use some of the power of PageBlender to make the menu more flexible. We do this by assigning a value to a variable which can be repeated whenever we want
#define @navitem <tr><td style="border:1px solid #800040;"><a href="%s="link"">%s="text"</a></td></tr>
The @ sign has been used to avoid replacement of the string "navitem" should it appear in the text. This may look complicated but a number of concepts have been introduced. Basically, every time the variable name @navitem is found in the source for the page it will be replaced at build time by the string assigned to it. This string contains a number of strange things though, what on earth is the URL given to the href in this code? The %s tells PageBlender to expect an imbedded variable with the name to the right of the equals sign identifying that variable. There are two here, link and text and we use these like this
@navitem[=link:#][=text:MENU TEXT]
What will happen when the page is built? The %s="link" will be replaced with # and the %s="text" with MENU TEXT.
Applying this to our menu we can use PageBlender to replace the variables and build the table rows for us
<table>@navitem[=link:#][=text:HOME]
@navitem[=link:#][=text:ABOUT]
@navitem[=link:#>[=text:CONTACT]
@navitem[=link:#>[=text:NAVIGATION]
</table>
Results in just what we want
| HOME |
| ABOUT |
| CONTACT |
| NAVIGATION |
That's all well and good but there isn't any feedback. The visitor will see all the menu items displayed the same way regardless of the page being visited. This can be handled very easily in PageBlender. First we need another variable...
#define @navactive <tr><td><span style="color:#FFF;background-color:#800040">%s="text"</span></td></tr>
The difference is that the link has been removed and a span introduced so that we can set up colours. Normally of course styles would be set up in a separate style sheet but for ease of explanation they have been used in-line.
Next we need to set up which of these variables is to be used when pages are built. PageBlender "knows" what page is being built by taking the file name without the extender. This page is navigation.htm so, when it was built PageBlender knew it as "navigation". (The internal variable PAGEID hold this and, like any other, can be tested and output controlled). We don't need to reference the variable here, though, as we can use one of PageBlender's commands to read it for us:
<table>#ifpage(index|@navactive[=text:HOME]|@navitem[=link:#][=text:HOME])
#ifpage(about|@navactive[=text:ABOUT]|@navitem[=link:#][=text:ABOUT])
#ifpage(contact|@navactive[=text:CONTACT]|@navitem[=link:#][=text:CONTACT])
#ifpage(navigation|@navactive[=text:NAVIGATION]|@navitem[=link:#][=text:NAVIGATION])
</table>
Because this page is known to PageBlender as "navigation" the last item will display the active menu item while all the others will display normal menu items. You can see this below but the page source will just show the contents of the variables and not the PageBlender source code.
| HOME |
| ABOUT |
| CONTACT |
| NAVIGATION |