Including the CSS and JavaScript

CFoster.net / Software / T-Menu / Tutorial / Lesson 1

Including the CSS and JavaScript

We must include the javascript file (tmenu.js) into the html because otherwise we won't be able to build the menu.

The js file (javascript file) acts as a kind of package or library with it's own functions/sub routines/methods, those functions do 90% of the work for building the menu and all they require is information from you (parameters) defining how the menu behaves and its data.

Perhaps another way of understanding it is (tmenu.js) is the engine. The data you provide / The data you build is like fuel which goes through the engine.

We must also include a css file (cascading style sheet) into the html, the menu's look and feel (skin) is defined by css, skins are easy to change and you can even make your own providing you understand css. In this css file is information about colours of menu items, background colours and so on. If you would like to check one out you can see the default skin for cfoster.net (tmenu.css)

One thing you must do before you start is to note is that whatever files you make you must have a directory in the same folder called "images" and in there place 2 files

[arrow.gif] () and [d_arrow.gif] ()

So if you're building a menu in c:\testarea\test.html

You make the folder c:\testarea\images\ and place the 2 gif files in there.

T-Menu naturally thinks they're in there, you can specify another directory but more on that later.

Just make sure you setup the gif files for now.

If you're still unsure here is a diagram:

Now for the html, just 1 thing to mention, you must include the css file before the js file because of a bug in Konqueror 2.

Here is the code:


<link href="tmenu.css" type="text/css" rel="stylesheet">

<script type="text/javascript" src="tmenu.js"></script>

It is probably best for web standards sake to included these two lines between your <head></head> tags.

So an example of what an html document like look like is:




<html>


<head>

<title>John Smith's homepage</title>

<link href="tmenu.css" type="text/css" rel="stylesheet">

<script type="text/javascript" src="tmenu.js"></script>

</head>


<body>

Hello World, I'm John and I like Javascript

</body>


</html>

That's lesson 1 over, currently we can't even see a Menu Bar with this code, but we are now setup for giving those functions in tmenu.js a wirl, now go get a coffee for lesson 2!