JavaScript tutorial:
Adding menus to your web pages

 

Using menus is an efficient way to navigate your web site and everybody understands them.
However, HTML does not natively support menus, and coding them in JavaScript is a non-trivial matter.

Your JavaScript Editor makes it very easy, though: you create, add, and modify cross-browser web menus (Internet Explorer, Firefox, Netscape, Opera...) visually and without any programming - the program creates all the JavaScript code for you.

The menu footprint is only few KB's, making it the smallest and most efficient menu system on the Net.

To add a menu to a web page:

Open the page in JavaScript Editor and click on the Visual Web Designer button

Click on the Add menu button, and

Decide whether the menu should appear on top or on the left of your page.

The program does the following:

Creates the default webmenu.css style sheet. This file controls the menu style, including fonts, size, colors, outlining, and other properties.

Creates the default webmenu.js. This file contains the JavaScript functions needed for the menu, and the menu definition. You can easily add. delete, and modify menu items to meet your needs.

Makes changes to the web page, allowing it to use webmenu.css and webmenu.js.

All the web pages on the site share one menu. This makes the files smaller and greatly simplifies the site maintenance, because any changes to the menu will be automatically reflected in all the pages.

Changing the colors of your menu

When the menu has been created, click on the Menu colors button to define the color scheme for the main menu and the two sub-menu levels. First, select the color scheme from the list of pre-set ones. If this is not 100% what you want, modify the colors for the text/background and the highlighted text/background for the main menu and the two sub-menu levels.

Editing your menu 

You design and maintain your menus visually. To add, delete, and modify menu items, click on the Edit menu button. JavaScript Editor automatically calculates the default positioning and size for the menu and the sub-menus, but leaves you with the possibility of modifying them. This is useful if you want the fine-tune the appearance of the sub-menu, or have it appear above or left of the item that triggers it.


Viewing your menu

To view your menu, click on the Show Internal Viewer button, or the Launch / View in Browser button. While you are designing your pages and writing JavaScript, we recommend using the Internal Viewer: if you have any errors it will capture them and direct you to where they are.

If you have selected the top menu, previewing it in the browser will be similar to the image below: