Basic Hitop.
8. Basic Nav Customisation
Now that we've sorted out our directory structure, it's time to think about customising our page a bit, to make it look a bit nicer.
Our template was looking a bit of a mess, so let's create a new one. One of the wonderful things about Hitop is that, as the page design and the page content are kept in seperate files, it's very easy to change the page design in a flash - just change the template file, and run Hitop over the site and the whole site can look completely different!
This is the template we're going to use:.
<html>
<title><@GET NAME="pagetitle"></title>
<body bgcolor="#FFFFFF" text="#000000">
<table cellpadding="10" cellspacing="0" border="0" width="100%">
<tr valign="top">
<td width="120" bgcolor="#99ccff">
<@NAV SRC="radio.nav" FORMAT="FOLDED">
</td>
<td>
<h1 align="right">The World Of Radio</h1>
<h2><MAINTITLE></h2>
<BODYTEXT>
</td></tr>
</table>
</body>
</html> It's not pretty or exciting. It is however, functional! As you can see from the code, we've specified a basic folded nav. However as a design, its a bit boring. What if we want to customise it a bit? Make the nav entry on the page we're on, bold perhaps?
With @NAV, it's easy. @NAV has an attribute called ENTRY, which calls a function. For each entry in the navigation bar, it will be processed by our function. But first we need to make that function. Let's call it LEFTNAVENTRY. This function is called from @NAV as follows:
<@NAV SRC="radio.nav" FORMAT="FOLDED"
ENTRY="LEFTNAVENTRY">We then just have to define our LEFTNAVENTRY function. In order for @NAV to pick it up, this must be defined above our @NAV call.
As soon as we specify a function in the @NAV, Hitop throws out all it's designs and we have the opportunity to do what we want with our navigation bar. In this example we'll recreate Hitop's default design, with a small difference. We'll keep the indents, but ditch the bullets, and we'll make the page we're on, appear in bold in the nav.
To do all this, we need to know three variables that Hitop offers us for
@NAV entry manipulation. These are NAME, HREF,
OPEN and LEVEL.
So what do these mean?
NAME- this is the name of the nav entry (ie what appears on the left in our nav file)
HREF- this is the location of the page.
OPEN- returns a value of 1 if the entry is on the page we're on (ie the page is selected) or 0 if it's not.
LEVEL- returns a numeric value, depending on which level of the navigation we are on - Contents for example is on level 0, while Radio Caroline, being in the Pirate Stations section, is on level 1.
In order to use OPEN in our example, we need to know about
@IF and @ELSE.
These are common in most programming languages so chances are that you will have come across something like it before. At it's basic form, it says IF something is true, do this, ELSE if it's not, do something else.
So let's start:
<@DEF NAME="LEFTNAVENTRY">
<@SET NAME="PAD" VALUE=" ">
<@GET NAME="PAD:REPEAT(${LEVEL})">
<@IF NAME="OPEN" VALUE="1">
<strong><@GET NAME="NAME"></strong><br>
<@ELSE>
<a href="${HREF}"><GET NAME="NAME"></a><br>
</@IF>
</@DEF> Before we explain this, You may have noticed something above:
${HREF} and ${LEVEL}. Normally when we have wanted
to use a variable, we have used <@GET NAME="WHATEVER">, but
we can't do this when we want to use it as an attribute value. Instead we use
${WHATEVER}.
So, what does our function do?
First of all, a variable, called PAD which is set to be four spaces. We
then use PAD to create our indent, using <@GET
NAME="PAD:REPEAT(${LEVEL})">.
This nicely introduces REPEAT(). This is one of many commands which can be used to manipulate strings, all of which are called by the method above. You can daisy chain them by simply adding another one to the end. We'll look into this more, in a later chapter.
REPEAT() is a very useful manipulator which will repeat something a given number of times. In this case, it repeats it depending on what level of the navigation we're on. For the Contents page for example, we are on Level 0, so it doesn't repeat at all. Radio Caroline is on Level 1, so we repeat once. If we had a second or third level, it would repeat twice or three times respectively.
After that, our function checks to see if the navigation entry is selected
or not. If it is, it gets the entry's name, and displays it in bold, and
starts a new line. If it's not, it puts the name inside a link instead. Then
we close our IF statement using </@IF>.
In this part, we've looked at a lot of new parts of Hitop, but we couldn't have built even a basic navigation bar without learning most of this. Thankfully you can do a lot with knowing just this, but a little more knowledge, offers even more possibilities!
We'll look at further customisation in the next section, including doing some funky stuff with LEVELs, as well as learning how to manipulate submenu titles, so that they look different from the way we display the selected title. When you are in the Pirate Radio section for example, 'Pirate Radio' is displayed in bold, as is the page name, ie 'Radio London'. We can easily change that if we want, and in the next section, we'll learn how.
Check out the example files for this part, here.
This work is licensed under a Creative Commons License.
