Building a simple menu

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

Building a simple menu

Now that we've included the js and css files into the html document we can start to build the menu.

If you've never coded in a computer language before then things could get a little rocky from now on, I'm going to try and keep it as simple as possible so even if you aren't that knowledgeable with programming (yet) you'll have a chance of understanding how to build the T-Menu.

During the next steps, we will build this:

But first of all you're going to need to understand the lingo, take a look at the following diagram:

Just keep that in mind for now!

Moving on and actually building this beast, we're including the css file first (The Menu's skin) as mentioned in Lesson 1:


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

Then include the javascript file containing all the complicated stuff that does all the hard work for us:


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

To build the menu we need to give it some data, the following code builds the menu you saw in the image:

NOTE: If you find the following code a bit difficult to understand DON'T PANIC, I take you through it line-by-line just afterwords.


<script type="text/javascript">

var myMenuBar = new MenuBar(); // setup our main bar which all the Menus will go on


var fileMenu = new Menu("File"); // define that file menu (with the text label of "File")



// build our menu items which we're gonna put on the file menu

var new_item = new MenuItem("New", "new.html");

var open_item = new MenuItem("Open", "open.html");

var save_item = new MenuItem("Save", "save.html");

var saveas_item = new MenuItem("Save As", "saveas.html");

var exit_item = new MenuItem("Exit", "exit.html");



// add those MenuItems we just built to our file menu we defined (just previously)

fileMenu.add(new_item);

fileMenu.add(open_item);

fileMenu.add(save_item);

fileMenu.add(saveas_item);

fileMenu.add(exit_item);



// add the file menu onto the MenuBar (works just like adding MenuItems onto a Menu)

myMenuBar.add(fileMenu);



// The menu data is now built, all we have to do is write our MenuBar variable!

document.write(myMenuBar);

</script>

That's it!, if you think you've fully understood the commands then skip onto Lesson 2a otherwise KEEP READING, I'll go through it line-by-line


<script type="text/javascript">

We're gonna need to tell the browser that we'll be writing some javascript from now on


var myMenuBar = new MenuBar(); // setup our main bar which all the Menus will go on

We're making a variable called myMenuBar, we "must" use the new keyword before MenuBar(); We might want more MenuBars in the future!


var fileMenu = new Menu("File"); // define that file menu (with the text label of "File")

We're making a variable called fileMenu (a new Menu object), again we need to use "new" and we pass a parameter for the text label


var new_item = new MenuItem("New", "new.html");

We're making a variable called new_item (a new MenuItem object), yet again gotta' use "new" and we pass 2 parameters, the text label for the MenuItem (1st parameter) and what the browser should do if the user clicks on the MenuItem (2nd parameter) (in THIS case new.html) so if the user clicked on New the browser would direct to new.html.

However by making this variable it doesn't AUTOMATICALLY MEAN it goes on the Menu we defined earlier which was called fileMenu.

We'll skip the rest of those MenuItem object DEFINITIONS as you've probably got the drift.

We must give the MenuItem objects we've made to the fileMenu, which is very simple:


fileMenu.add(new_item);

We just take the fileMenu object, put a '.' after it and call the add method with the parameter of a MenuItem variable which we've made.

fileMenu now has a MenuItem inside with the text label of "New" and if you clicked it you would goto new.html.

But we also must give our MenuBar object (myMenuBar) a Menu, it is the same kind of stuff:


myMenuBar.add(fileMenu);

That's our whole Menu built (But it's in computer memory only) To show the Menu we must write it to the html document. You do this by:


document.write(myMenuBar);

This command writes lots of html into the browser If want to take a look at the generated html you could simply do:


alert(myMenuBar);

That's it for lesson 2, the next lesson is Lesson 2a!