More than 1 MenuBar

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

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, 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

myMenuBar1.add(button1);

myMenuBar1.add(button2);

myMenuBar1.add(button3);



// Add some MenuButtons to 2nd MenuBar

myMenuBar2.add(button4);

myMenuBar2.add(button5);

myMenuBar2.add(button6);



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

</script>



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


<script type="text/javascript">

document.write(myMenuBar2); // Write the second MenuBar

</script>

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).