More than 1 Menu and MenuButtons

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

More than 1 Menu and MenuButtons

In Lesson 2 you learned how to setup your own MenuBar with its own Menu which had its own MenuItems.

This lesson will simply give an example of adding more Menus to a MenuBar and a little something about MenuButtons.

In the following steps we will create this:

1. Include the css first like before:


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

2. Include the js package:


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

3. Build the data and write the menu:


<script type="text/javascript">

var myMenuBar = new MenuBar(); // our MenuBar


var fileMenu = new Menu("File"); // our File Menu (will go on the MenuBar)



// build the MenuItems for 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 to the File Menu like in Lesson 2

fileMenu.add(new_item);

fileMenu.add(open_item);

fileMenu.add(save_item);

fileMenu.add(saveas_item);

fileMenu.add(exit_item);



// Add the fileMenu onto our MenuBar (myMenuBar)

myMenuBar.add(fileMenu);



// Ok now let's build the editMenu!

var editMenu = new Menu("Edit"); // a new Menu object with a label of Edit


// build the MenuItems that are gonna go in the editMenu

var cut_item = new MenuItem("Cut", "cut.html");

var copy_item = new MenuItem("Copy", "copy.html");

var paste_item = new MenuItem("Paste", "paste.html");

var undo_item = new MenuItem("Undo", "undo.html");


// Add those just built MenuItems onto the editMenu

editMenu.add(cut_item);

editMenu.add(copy_item);

editMenu.add(paste_item);

editMenu.add(undo_item);



// Add the editMenu object onto the our MenuBar (myMenuBar)

myMenuBar.add(editMenu);



// All the data's built, so all we've gotta do is write the MenuBar

document.write(myMenuBar);

</script>

Pretty simple isn't it? it is important to note here that T-Menu supports infinity Menus.

Now onto the topic of MenuButtons.

A MenuButton is something that goes on a MenuBar and looks like the buttons you've seen on there before like File and Edit, but if you click a MenuButton no Menu appears, the browser is then given a command to do something (like goto another page).

If you don't want to learn how to create MenuButtons then skip to Lesson 2b.

Adding MenuButtons onto a MenuBar is very simple, here is the code for a MenuBar with 1 MenuButton:


<script type="text/javascript">

var myMenuBar = new MenuBar(); // define our MenuBar as usual



var home_button = new MenuButton("Home", "index.html"); // define our MenuButton



myMenuBar.add(home_button); // add that MenuButton object to our MenuBar



document.write(myMenuBar); // then of course write the MenuBar

</script>

1st parameter of the MenuButton function is the text label that will show on the button.

2nd parameter of the MenuButton function is the location which the browser will point after the button is clicked.

That's it for Lesson 2a, grab some more coffee and get to Lesson 2b