More exciting NAV.

Even better!

So, we've seen our first NAV example, but we want to do more exciting stuff. These things are possible. The style of NAV we have used was the default style, known as FOLDED. Of course, this is changed easily, but at the moment there isn't much point. Why? Because to have the most fun, we need sub-menus. And for that, we need a few more pages.

It makes sense to make a new directory for this. Create a directory called nav, and go to it. Write the following code into your favourite text editor:

<HTML> <HEAD> <TITLE> <@GET NAME="pagetitle"> </TITLE> </HEAD> <BODY> <@NAV DATA="Tutorial=morenav.html,Sub-menu=(Hitop1=hitop1.html,Hitop2=hitop2.html),Second=(Hitop3=hitop3.html,Hitop4=hitop4.html),Final=final.html" FORMAT="FLAT"> <P> <@NAV DATA="Tutorial=morenav.html,Sub-menu=(Hitop1=hitop1.html,Hitop2=hitop2.html),Second=(Hitop3=hitop3.html,Hitop4=hitop4.html),Final=final.html" FORMAT="FOLDED"> </P> <P> <@NAV DATA="Tutorial=morenav.html,Sub-menu=(Hitop1=hitop1.html,Hitop2=hitop2.html),Second=(Hitop3=hitop3.html,Hitop4=hitop4.html),Final=final.html" FORMAT="OPEN"> </P> <H2><MAINTITLE></H2> <BODYTEXT> </BODY> </HTML>

Whew! Longwinded, eh? Well, this is the last time I'll use that format - I'll show you the alternative next session. For now, save that file as template2.hitop. Oh, all the stuff in quotes should be on one line, without pressing return.

Now we have our new template, we need the files it refers to... As this is just a demonstration, they can all be pretty much the same. Type the following into your text editor:

<@SET NAME="pagetitle" VALUE="More NAV"> <@DEF NAME="maintitle"> NAV test. </@DEF> <@DEF NAME="bodytext">Look up there! Innit great?</@DEF> <@FILE SRC="template2.hitop">

You'll notice that the @FILE tag now points to template2.hitop. Save this file as morenav.hitop. Then save the same file as hitop1.hitop, hitop2.hitop, hitop3.hitop, hitop4.hitop and final.hitop. You can change the title and body text if you like, but it isn't really necessary for the demonstration.

Now we need to create the html files. Now we could do as we have been, and just call hitop individually for each file. But this is the first time we have had a substantial number of files to do at once, so it's a good time to introduce the makefile.

Makefile.

What is a Makefile? Good question... I hadn't used a Makefile before hitop (don't be shocked...) but basically it is just a file that tells your computer how to make lots of files in one go. You can see the makefile here. This Make file comes from Darren Edmundson, one of the creators of hitop.

Obviously, to make it work for us, we need to change some things. Just open up the Makefile in a text editor. We need to change the line that says HTMLFILES and the line that says TEMPLATES. The Makefile I have made for this example has those lines looking like this.

HTMLFILES = morenav.html hitop1.html hitop2.html hitop3.html \ hitop4.html final.html TEMPLATES = template2.hitop

The comments in the Makefile should be easy to follow, just have a look at this guide as well if you get stuck.

Once you've edited the Makefile, save it. Then go to the shell and type:

make

That should make all the files you need. Now open up morenav.html in a browser. It should look like this example.

The first NAV is the FLAT NAV. You can see why it's called that... :) Try clicking on one of the middle two links. You'll see that the sub-menu opens up underneath.

The next NAV is the FOLDED NAV that we are used to. You'll see that the submenu's in here fold out when they are clicked on. You'll also note that (as with FLAT) the first page in a submenu is opened when you access that sub-menu.

The last style is OPEN. This style is similar to FOLDED, but all the submenus are automatically expanded.

Now you have seen the different styles that NAV can create. Next session we'll move onto customising your NAV.