Basic Hitop.
9. More Basic Nav Customisation
We've done our basic customisation of our nav bar, but let's be absolutely honest - we haven't actually done anything that exciting with it!
We've also seen that the Hitop variable OPEN can tell you if a
nav entry is selected or not.
If you look at the picture above of our Radio Caroline page, you'll notice that two entries in our nav bar are selected, and as such aren't links. These are 'Pirate Radio' (the section we are in) and 'Radio Caroline' (the page we are on).
Wouldn't it be nice if we could make the the section link ('Pirate Radio') display differently to the page link ('Radio Caroline')? Well I think it would! Can we do that? Of course we can!
The TYPE variable
Hitop offers us the TYPE variable enabling us to make that
distinction. TYPE will return one of two variables: 0 or 1. 0 is
returned if the item is a normal page entry and 1 is returned if the item is a
submenu entry. So, in our example 'Radio Caroline' would retrun 0 and 'Pirate
Radio' would return 1.
In Part 8 we used <@IF> to check whether a nav entry was
OPEN or not, and we can extend our function to check whether a
nav entry is of TYPE 0 or 1 also.
What we're going to do is put two greater than signs (eg >>) on our
opened submenu, as an additional visual clue to the fact that it has been
opened. So let's alter our function, LEFTNAVENTRY, to do just
this.
<@DEF NAME="LEFTNAVENTRY">
<@SET NAME="PAD" VALUE=" ">
<@GET NAME="PAD:REPEAT(${LEVEL})">
<@IF NAME="OPEN" VALUE="1">
<@IF NAME="TYPE" VALUE="1">
<strong><@GET
NAME="NAME"> >></strong><br>
<@ELSE>
<strong><@GET NAME="NAME"></strong><br>
</@IF>
<@ELSE>
<a href="${HREF}"><GET NAME="NAME"></a><br>
</@IF>
</@DEF> As you can see, we've used twice the HTML entity, > to represent our >> symbol to represent that the menu expands.
Above is the new navigation on our Radio Caroline page - note the new double arrowed addition.
If you flick around our test site some more, you'll see our double arrowed additon only appears on those pages where a submenu is present.
The POSITION Variable
There is another Hitop variable that is worth mentioning at this point. POSITION is probably not the most widely used variable available in Hitop's nav function, but may come in useful. POSITION returns the position of an entry in the navigation. For example, with a simple tweek to our navigation procedure, we could produce the following result:
1. Contents
2. Pirate Radio >>
1. Radio London
2. Radio Caroline
3. Radio Luxemburg
3. BBC Radio One
4. BBC Radio 5 Live
5. BBC GLR
6. xfm
All that's easily created with this new version of our LEFTNAVENTRY function:
<@DEF NAME="LEFTNAVENTRY">
<@SET NAME="PAD" VALUE=" ">
<@GET NAME="PAD:REPEAT(${LEVEL})">
<@GET NAME="POSITION">.
<@IF NAME="OPEN" VALUE="1">
<@IF NAME="TYPE" VALUE="1">
<@GET NAME="NAME"> >><br>
<@ELSE>
<@GET NAME="NAME"><br>
</@IF>
<@ELSE>
<a href="${HREF}"><GET NAME="NAME"></a><br>
</@IF>
</@DEF> A similar effect to this is used on the current version of hitop.org. As you can see from the screen
shot, each nav entry is prepended by an image with a number on it in a sort of
billiard ball style. This can be done simply putting <img
alt="${position}" src="${RELPATH}nav_${POSITION}.gif">.
![[hitop.org's left nav bar]](images/hitoporgnav.gif)
We can do a lot of customisation with just OPEN,
TYPE, LEVEL and possibly even POSITION,
however there are two more features of @NAV that we can use to do
even more: PREGROUP and POSTGROUP. We'll learn about
them next.
Before we do, have a play around with what we have learnt so far, and see what you can do. You should find that you can do a great deal.
Take a look at the example files for this part, here.
This work is licensed under a Creative Commons License.
