Basic Hitop.
10. More Fun With @NAV
So far we've concentrated at looking at vertical style nav bars, but what if we get bored with them? Supposing on our Radio pages we want to do something different? How about a horizontal navigation bar?
It's obviously not going to be hard to do a horizontal nav such as the one we use at Planet Hitop. The one we use at the top of our pages is very simple and is produced just using a normal FLAT nav format with no customisation. But what if we wanted to do something a bit more complex. Take a look at the nav bar below:
![[A Vertical Nav from durge.org]](images/durgeorgnav.gif)
The above is taken from an old version of www.durge.org and shows a vertical navigation system in action. In this screen shot, we're on the FAQ submenu, which has two items available: Group and Glossary.
durge.org is built using Hitop's sister programme, Hitoplive, and that navigation bar is built using @NAV. So can we do something similar?
Well the answer to that should be a blatent yes! How would we do it? The navigation bar here is built using tables, with each level on it's own row. We could use POSITION to check if an entry is the first one in a level and start the row that way, and use another @NAV variable called TOTAL which tells us how many items are on a particular level, to help us close the row, but there is a much easier way.
PREGROUP and POSTGROUP.
Hitop offers us two additional ways of calling functions from our @NAV command: PREGROUP and POSTGROUP. PREGROUP will call a function which is processed before a level of navigation. POSTGROUP calls one which is processed after a level of navigation.
In order to make a vertical nav fit, we've had to change our template a little. Below is the new navigation:
<@DEF NAME="LEFTNAVENTRY">
<@IF NAME="OPEN" VALUE="1">
<strong> <@GET NAME="NAME"> </strong>
<@ELSE>
<a href="${HREF}"><@GET
NAME="NAME"></a>
</@IF>
<@IF NAME="POSITION" VALUE="${TOTAL}">
<@ELSE>
|
</@IF>
</@DEF>
<@DEF NAME="LEFTNAVPRE">
<@IF NAME="LEVEL" VALUE="0">
<@SET NAME="COLOUR" VALUE="#ffff66">
</@IF>
<@IF NAME="LEVEL" VALUE="1">
<@SET NAME="COLOUR" VALUE="#ffffcc">
</@IF>
<tr><td bgcolor="${COLOUR}" align="center">
</@DEF>
<@DEF NAME="LEFTNAVPOST">
</td></tr>
</@DEF>
<table cellpadding="2" cellspacing="0" border="0" width="100%">
<@NAV SRC="radio.nav" FORMAT="FLAT" PREGROUP="LEFTNAVPRE"
POSTGROUP="LEFTNAVPOST" ENTRY="LEFTNAVENTRY">
</table> So what are we doing here? Let's start at the bottom. Firstly we've wrapped
the @NAV within two TABLE tags - notice also that we're using
FLAT as our @NAV format. When building horizontal navs, you should always use
FLAT.
When the nav is being created, @NAV arrives at Level 0, and processes the
PREGROUP function (LEFTNAVPRE). LEFTNAVPRE looks at what level of navigation
we're on - we're on Level 0 - so it sets a variable called COLOUR
to be FFFF66 - a shade of yellow. Then it opens the table row tag, opens up a
table cell and gives it our background colour.
@NAV then goes through all the entries in level 0. Selected entries are still in bold, but we've put a line (or pipe) between each entry.
Note the line
<@IF NAME="POSITION" VALUE="${TOTAL}">
<@ELSE>|</@IF> As mentioned before TOTAL is the number of entries in the
level of our nav. We don't want the pipe to appear after the last entry of the
level so we do a check - is the position that we are in, the last one. If it's
not, draw the line. If it is, don't bother.
So when we get to the end of the level, @NAV goes to LEFTNAVPOST and runs
that - in this case it just closes the TD and TR
tags. Then @NAV moves onto the next level (if it exists) and starts again.
This time we're on level 1 so it uses FFFFCC as the background colour.
You can see the results above. Not quite as pretty as durge.org's navigation, but if you take a further look at our newly created example pages you can see that we have the basics there, and with some effort, we could replicate durge.org's style.
Levels
There is one more variable that we can use in our functions, should you
need it - personally I have never used it, but you might need it, so let's
mention it. HIGHEST will return the value of the highest level of
navigation displayed by our navigation.
So on our contents page it would return 0 as only Level 0 is displayed. In the Pirate Radio section, it would return 1 as we have now got Level 1.
In our @NAV command we can also restrict which levels of the navigation are
shown on screen, using FROM and TO in the following
way:
<@NAV FORMAT="FLAT" SRC="ournav.nav" FROM="1"
TO="4">In this example our nav would display only levels 1 to 4 - if they exist.
If any level doesn't exist, it won't display. If we wanted to display up to
the maximum number of levels, we would put TO="${HIGHEST}" for
example.
This is the technique we use to display the top nav bar on Planet Hitop. We set both the FROM and TO to be zero, hence we only get level 0 of our navigation tree at the top of the page.
@NAV Wrapped Up
We have learnt about @NAV and we've looked at a few ways of implementing it. We can do a lot with very little. It should now be quite easy to do horizontal navigation, vertical navigation - even crumb trails, just by using the functionality that @NAV gives us. The possibilities are endless. Take a look at some other examples on the sites below - they all use @NAV to do navigation bars in different styles:
- Planet Bods
Currently uses Hitop to do tabs. - durge.org
Left navigation with hover effects. - Anchovy
Uses @NAV in a very graphical style, resembling a tube map.
Download the example files for this section here.
This work is licensed under a Creative Commons License.
