Submenus of submenus

CFoster.net / Software / T-Menu / Tutorial / Lesson 3b

Submenus of submenus

With T-Menu you can have an infinate number of sub Menus.

Don't worry about Menus running off the screen, T-Menu has built in features to cope with large Menus and small screens.

This lesson will show you how to master sub Menus, you'll find it very simple if you've already grasped the concept of sub Menus in lessons 3 and 3a.

To simplify things we will only make a few MenuItems for each Menu.

In the following steps, we will create this:

Again you'll see a lot of code, but it's not complicated

1. Include the CSS:


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

2. Include the Javascript file:


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

3. Build the data:


<script type="text/javascript">

var taskBar = new MenuBar(); // defining our MenuBar object that we'll put the Start Menu on



var startMenu = new Menu("Start"); // Just define the start Menu for now, we'll add to it later



var progMenu = new Menu(); // Define the Programs Menu, we'll add to it later



// Define the Accessories Menu (this will go on the Programs Menu)

var accMenu = new Menu();

var wordpad = new MenuItem("WordPad", "wordpad.html");

var notepad = new MenuItem("Notepad", "notepad.html");

var paint = new MenuItem("Paint", "paint.html");



accMenu.add(wordpad); // Adding those just defined MenuItems to the Accessories Menu

accMenu.add(notepad); // ""

accMenu.add(paint); // ""



// Define the Games Menu (this will go on the Programs Menu too)

var gamMenu = new Menu();

var freecell = new MenuItem("FreeCell", "freecell.html");

var hearts = new MenuItem("Hearts", "hearts.html");

var chess = new MenuItem("Chess", "chess.html");



gamMenu.add(freecell); // Add those MenuItems we just defined to the Games Menu

gamMenu.add(hearts); // ""

gamMenu.add(chess); // ""



// Now we create MenuItems that will go on the Programs Menu that will POINT TO the according Menus.

var accItem = new MenuItem("Accessories", accMenu);

var gamItem = new MenuItem("Games", gamMenu);



// We then add those MenuItems to the Programs Menu

progMenu.add(accItem);

progMenu.add(gamItem);



// We then need to make a MenuItem that's gonna go on the Start Menu that will POINT TO the programs Menu

var progItem = new MenuItem("Programs", progMenu);



// Add the Programs Menu to the Start Menu

startMenu.add(progItem);



// Add the Start Menu to the taskBar (MenuBar)

taskBar.add(startMenu);



// And finally write the taskBar (MenuBar)

document.write(taskBar);

</script>

Lots of Menus and sub Menus can get a little confusing, keep code as small as possible for easier reading. When you're ready, lesson 4 (Working with images) is the next step.