Submenus

Submenus

Submenus can be very useful if you are building something where someone would have to normally drill down through various pages to get what they actually want.

Some websites have a great deal of content, that is tiered in a hierachy, web applications may also benefit from sub menus.

T-Menu supports an infinity number of sub menus.

I designed the user code for maximum simplicity so anyone could pick it up quickly.

In the following steps we will create this:

don't be scared

1. So as normal, include the css first:

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

2. Then include that lovley js package:

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

3. Build the data for this menu with a sub menu:

<script type="text/javascript">
var myMenuBar = new MenuBar(); // our MenuBar object which "File" is gonna be on
var fileMenu = new Menu("File"); // define that file menu (with the text label of "File")

// define our MenuItems which we're gonna put on the fileMenu
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");

// This is how we build a sub Menu, we build it like just a normal Menu
var exportMenu = new Menu(); // There is no label this time though, I will show you later.

// We're gonna need to define some MenuItems which we'll put on this Menu
var psp_item = new MenuItem("Paint Shop Pro", "psp.html");
var off_item = new MenuItem("Office", "office.html");
var e_m_item = new MenuItem("E-Mail client", "client.html");

// Now we need to add those MenuItems we just defined to our sub Menu (just like we would a normal Menu)
exportMenu.add(psp_item);
exportMenu.add(off_item);
exportMenu.add(e_m_item);

// Now we need to create a MenuItem that goes on fileMenu that "points to" the Menu object (exportMenu)
var export_item = new MenuItem("Export", exportMenu);

// Now we'll add the MenuItems we want onto the fileMenu
fileMenu.add(new_item);
fileMenu.add(open_item);
fileMenu.add(save_item);
fileMenu.add(saveas_item);
fileMenu.add(export_item); // see this?
fileMenu.add(exit_item);

// add the file Menu onto the MenuBar
myMenuBar.add(fileMenu);

// write it
document.write(myMenuBar);
</script>

Ok let's go through the main points here

var exportMenu = new Menu(); // There is no label this time though, I will show you later.

All we are doing here is "defining" a simple Menu object which we can then add MenuItems too (just like any other Menu).

var export_item = new MenuItem("Export", exportMenu);

The syntax was a little different there, we still defined the MenuItem's text label as normal ie. "Export" but instead of then passing a String value like "x.html", we give a plain object variable that was a Menu we defined instead!

The object that we defined and gave was called exportMenu (the Menu we defined with it's own MenuItems earlier in the code)

In another way of explaining how sub Menus work in T-Menu:

  1. We define a Menu as normal (this will be our sub Menu).
  2. We add MenuItems to that Menu like we have done before normally.
  3. We create a MenuItem as normal BUT instead of giving a location, we give the var of the Menu we created at step 1
  4. We then add that MenuItem variable like normal to a main Menu then that MenuItem will POINT TO the Menu we made at step 1

Now may be a good time for you to take a glance at the API structure (Application Programming Interface) of T-Menu.

It's a reference to the javascript objects (like Menu and MenuItem) in tmenu.js that you can take advantage of.