More than 1 MenuBar

More than 1 MenuBar

This lesson is here to show you an example of having more than 1 MenuBar on a HTML document.

T-Menu supports infinite MenuBar's as of version 1.1

In the following steps we will build this:

2 MenuBars with MenuButtons

2 MenuBars with MenuButtons, each MenuBar is seperated by a line break

1. Include the css first:

<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 for 2 MenuBars and write them:

<script type="text/javascript">
var myMenuBar1 = new MenuBar(); // 1st MenuBar
var myMenuBar2 = new MenuBar(); // 2nd MenuBar

// define some simple MenuButtons
var button1 = new MenuButton("Button 1", "but1.html");
var button2 = new MenuButton("Button 2", "but2.html");
var button3 = new MenuButton("Button 3", "but3.html");

var button4 = new MenuButton("Button 4", "but4.html");
var button5 = new MenuButton("Button 5", "but5.html");
var button6 = new MenuButton("Button 6", "but6.html");

// Add some MenuButtons to 1st MenuBar

// Add some MenuButtons to 2nd MenuBar

document.write(myMenuBar1); // Write the first MenuBar

<br> <!-- go down a line -->

<script type="text/javascript">
document.write(myMenuBar2); // Write the second MenuBar

That's the end of lesson 2b, you now know how to build MenuBars, Menus. MenuButtons and MenuItems.

But what about sub Menus? Something that looks a bit like this:

All explained in the next lesson (Lesson 3).