1. Computing

Drop Down Menu

3. Customize the Menu

clr gif
Join the Discussion

Questions? Comments?

More of this Feature

Introduction Head Script Body Script

The next step is to customize the script so that the menu entries are those that you require. To do this locate the section of code in the head script that defines the example menu. It looks like this:

var bar = new menuBar();
bar.addMenu('Menu 1');
bar.addItem('entry1a.htm','Entry 1a');
bar.addItem('entry1b.htm','Entry 1b');
bar.addMenu('Menu 2');
bar.addItem('entry2a.htm','Entry 2a');
bar.addItem('entry2b.htm','Entry 2b');
  1. This code contains two drop down menus each of which consists of an addMenu call to set the menu title and a number of addItem calls to set the content of the menu. You can have as many menus as you want across the menu bar by repeating these statements as required (up to about six menus can fit across the screen at 600x800 resolution).
  2. For each menu you need to change the text to appear in the menu bar by replacing the parameter passed to addMenu with your required text.
  3. Each of the menus in the bar currently contains two example entries in the drop down menu. Simply repeat the addItem line as many times as necessary for your menus and replace the parameters passed to each of these fields with the URL of the page that the entry is to link to and the text to display in the menu for the entry respecively.

Now that you have customized your menu you can link it into the head of your page using the following code:

<script type="text/javascript" src="menuh.js">
</script>
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />

The final step is to generate the body script.

Introduction | Head Script | Customize Script | Body Script
Related Video
Add Menu Buttons in iDVD

©2014 About.com. All rights reserved.