menugen1

Menu Generator 1.1

Index:

         Short Description
         Features
         Content of Download-Package
         Download
         Manual
                  Necessary Changes on the WebPage
                  Definition and configuration of the menu
                  Font style definitions
         Let's go now!
         Further documentation
         Copyright

Short Description:

The Menu Generator is a JavaScript Program, which integrates dropdown-Menus into your WebPage! Very simple to handle and with many options to configure! If you wish, you can have your menus Windows-like, or even better - exactly the way you want them to look! Just add a list of menu entries and you'll have the dropdown menus on your own Webpage, with an unlimited number of submenus!

The Menu Generator is free and ready to use - just download the Menu Generator onto your PC!

By the way: to get an quick impression of the way the Menu Generator works - just try the dropdown menus on http://www.trueworld.ch

Features:

-	easy handling
-	fast to integrate into your WebPage
-	fully configurable
-	unlimited number of submenus
-	each menu/submenu can be individually configured to appear horizontal or vertical
-	background colour/image separately definable for each menu entry
-	background colour/image for selected entries independently from "normal" background configurable
-	"tooltips" may be used to give comments on menu entries that are not self explanatory.
-	"preload" of background images (all images are loaded on opening the WebPage, to prevent after-loading when using the menus).
-	font-face, -type and -size individually definable for each menu entry
-	supports the following concepts: LAYER (Netscape 4.x and higher), DIV (Internet Explorer 4.x and higher), DOM (Netscape/Internet Explorer 6.x and higher)
-	supports CSS (Cascading Style Sheets) for font style definition
-	no limits for positioning on your WebPage
-	alignment of text for each menu individually configurable (left, centre, right)
-	alignment of each menu individually configurable (left, centre, right)
-	side of submenu appearance free definable (left, auto, right)
-	indicate link on menu entries with graphic (configurable)
-	menu entries without a link can be made unselectable
-	menu entries without a link can be indicated by different font styles
-	links are shown in the status bar of the Browser
-	predefined graphics (arrows etc.) may be substituted by own graphics

Content of Download-Package:

-	generator.js	javascript-program
-	styles.css	font style definition
-	arrow_left.gif	left arrow (indicates a submenu)
-	arrow_right.gif	right arrow (indicates a submenu)
-	link_left.gif	left link-graphic (indicates a link)
-	link_right.gif	right link-graphic (indicates a link)
-	index.htm	WebPage example
-	help.pdf	manual (this WebPage)

Download:

menugen_en.zip (with english manual - 110.9 Kb)

menugen.zip (with german manual - 129.4 Kb)

Manual:

Necessary Changes on the WebPage

1)

The JavaScript program is a separate file and therefore has to be referenced in the header of the WebPage, on which the Menus will be shown. Also the CSS-file, which contains the font type definitions, has to be referenced there too. It is up to you, whether you want to keep all the files in the same folder where your WebPage is located, or if you want to place it somewhere else - please adjust the according references (red):

<html>
<head>
<title>Menu Generator: Example</title>
<link type="text/css" href="styles.css" rel=stylesheet>
<script type="text/javascript" src ="generator.js"></script>
</head>
:
:

2)

To make the menus appear after loading the WebPage, there has to be a call of the Menu Generator in the BODY-Tag (according to the example-WebPage "index.htm").

:
:
<body onLoad="M_create();" onResize="M_resize();">
:
:

Now that the above points have been done, all the changes necessary for the HTML file have been completed!

Definition and configuration of the menu

Of course, we're still missing the definitions of the menu entries and the configuration of the menus. This is done in the JavaScript program "generator.js" itself. Please open the file in any text editor, to apply the necessary changes.

If you look at the program, you can see three areas, divided by comment boxes. The comment boxes describe the following program area and should be deleted before publishing on the web to save space and therefore download time.

In the first area the general menu configuration is done (e.g. position of the main menu, alignment etc.)
Please replace the example data by your own values (red)!

:
:
// _______________________________ \/ menu configuration (user area) \/ ___...
:
:
// ______________p_l_e_a_s_e___d_e_l_e_t_e___t_h_i_s___c_o_m_m_e_n_t___b_o_x...

var m_align    = 'center';
var m_margin   = 10;
var m_top      = 10;
var m_popup    = 'right';
var m_showlink = 'highlite,icons,style';
var m_icn    = new Array(new Image(), new Image(), new Image(), new Image());
m_icn[0].src = "arrow_left.gif";
m_icn[1].src = "arrow_right.gif";
m_icn[2].src = "link_left.gif";
m_icn[3].src = "link_right.gif";
:
:

Description of the parameters:

Parameter	Description	Value-Range
m_align	defines the alignment of the main menu on the webpage.	'left' = align on the left side 'center' = center the main menu 'right' = align on the right side
m_margin	horizontal distance of the main menu to the border of the webpage(left side, if alignment is set to "left", right side, when alignment is set to "right").	pixel
m_top	vertical distance of the main menu to the upper border of the webpage.	pixel
m_popup	defines, on which side a submenu should popup, when the parent menu entry is selected.	'left' = submenus popup on the left side of the parent menu. 'auto'= submenus of a menu entry located on the left side of the main menu popup on the right side and submenus of a menu entry located on the right side of the main menu popup on the left side ( this is to prevent poping up submenus out of the page range). 'right' = submenus popup on the right side of the parent menu.
m_showlink	defines, how a menu entry with a link is marked. combine the parameters as you wish (delimiter = ",").	'highlight' = menu entries without a link can not be selected. 'icons'= menu entries with links are marked with a little graphic. 'style' = the font styles for menu entries without a link are different to the menu entries with a link. Therefore, all the "style"-definitions have to be duplicated - once with a prefix "weak" (see chapter "font styles"). The style definition with the prefix "weak" is used for menu entries without links.

If you wish, you could also replace the four graphics on your own - just change the URL of the graphics.

The second area contains the structure of the menus and the definitions of every single menu entry. Please replace the example date with our own values (red)!

:
:
// _______________________________ \/ menu definition (user area) \/ ___...
:
:
// ______________p_l_e_a_s_e___d_e_l_e_t_e___t_h_i_s___c_o_m_m_e_n_t___b_o_x...

var m_df   = new Array();
m_df[0]    = new Array();
m_df[0][0] = new M_menu (false, "center", 0);
m_df[0][1] = new M_entry("menu-0 entry-1", ""     , "_blank", "title", 170, 25,                          5, "#92A8B0", "#728890",  1, "comment 1");
m_df[0][2] = new M_entry("menu-0 entry-2", "<URL>", "_blank", "title", 170, 25,                          5, "#92A8B0", "#728890",  2, "comment 2");

m_df[1]    = new Array();
m_df[1][0] = new M_menu (true, "left", 1);
m_df[1][1] = new M_entry("menu-1 entry-1", "<URL>", "_blank", "entry", 200, 18,                          0, "#92A8B0", "#728890", -1, "");
m_df[1][2] = new M_entry("menu-1 entry-2", ""     , "_blank", "entry", 200, 18,                          0, "#92A8B0", "#728890", -1, "comment 3");

m_df[2]    = new Array();
m_df[2][0] = new M_menu (true, "left", 1);
m_df[2][1] = new M_entry("menu-2 entry-1", ""     , "_blank", "crazy", 200, 18,                          0, "#92A8B0", "#728890", -1, "");
m_df[2][2] = new M_entry("menu-2 entry-2", "<URL>", "_blank", "crazy", 200, 18,                          0, "#92A8B0", "#728890", -1), "comment 4";
:
:

We use a dynamic 2-dimensional table to be able to define the menus and their menu entries. The first Dimension contains the menus and the second dimension stands for the single menu entries. We always begin to count with 0.

m_df[0] contains a table with all menu entries of the main menu.
m_df[1] contains a table with all menu entries of the first submenu.
etc.

The assignment of the submenus to their parent menu entries is done on the parent menu entry.
In this way it is possible to create unlimited submenus.

The first entry of a menu definition always defines the look and feel of the corresponding menu:

m_df[0][0] = new M_menu (false, "center", 0);

All further entries define the menu entries themselves:

m_df[0][1] = new M_entry ("menu....

The following is a description of the parameters:

Syntax-diagrams

m_df[0][0] = new M_menu (<menu direction>, <entry alignment>,
                         <space to parent menu>);
m_df[0][1] = new M_entry(<name>, <link>, <target>, <css-style>, <width>,                          <background> <height>, <space to next entry>,
                         <selected background>, <child menu>, <tooltip>);

Parameter	Description	Value-Range
menu direction	defines whether the single menu entries of a menu should appear horizontally or vertically oriented.	true = vertical false = horizontal
entry alignment	the alignment of menu entries with different sizes, is done via this parameter	'left' = left alignment 'center' = center the entries 'right' = right alignment
space to parent menu	Space between parent menu entry and its submenu (vertically or horizontally - depending on 'menu direction')	pixel
name	Text of the menu entry, which will be shown in the menu	string
link	an absolute or relative link address (URL)	URL
target	Target window or -frame, where the link should be opened.	'_blank' = new window '_parent' = parent frame '_top' = top frame '_self' = same window <name of the window/ frame>
css-style	Name of the CSS style definition, which formats the text of the according menu entry (see chapter "font style definition").	css-definition
width	width of the menu entry	pixel
height	height of the menu entry	pixel
space to next entry	space to the next menu entry (horizontally or vertically - depending on 'menu direction')	pixel
background	defines the background of the menu entry. Could be a color or even a picture!	color-definition - e.g.: '#00AA22', 'red' etc. Picture address - e.g.: 'pic:myfolder/picture.gif'.
selected background	defines the background of selected menu entries	see 'background'
child menu	number of the submenu, which should appear when selecting this menu entry. If no submenu should popup: '-1'	number of submenu -1 = no submenu
tooltip	comments about the menu entry will appear, when the mouse pointer is held over the selected entry for a certain time.	string (HMTL allowed)

The third area contains the program itself and may not be changed!

:
:
// _______________________________ \/ menu generation \/ ___...
:
:
// ______________p_l_e_a_s_e___d_e_l_e_t_e___t_h_i_s___c_o_m_m_e_n_t___b_o_x...

:
:

Font style definition

CSS (Cascading Style Sheets) allows us to define the font style, -type, -size etc. for each menu entry separately (if you wish). In a very simple way you can make these definitions and store them under specific names, which can be used for the menu definition.

The option (parameter m_showlink) to let menu entries without a link look different (see chapter "definition and configuration of the menus (parameter m_showlink)" is possible only with CSS. All the style definitions have to be duplicate, once with the prefix "weak", whereby the font color should be lighter than for the menu entries with a link.

Please open the CSS-file with any text editor, to define the font styles. Below, there is an example, how you can make your own definitions. If something is unclear, please see the documentation "'SELFHTML'" from Stefan Muenz.

.title         { color: #2F4751; font: 12px Arial Black; cursor: default;}
.entry         { color: #2F4751; font: 10px Arial;       cursor: default;}
.entry         { color: #222222; font: 12px Impact;      cursor: default;}
.weaktitle     { color: #6F8791; font: 12px Arial Black; cursor: default;}
.weakentry     { color: #6F8791; font: 10px Arial;       cursor: default;}
.weakentry     { color: #666666; font: 12px Impact;      cursor: default;}

Let's go now!

You have now made all the necessary changes and the menu definitions, so the menus should now work and you can try them!

If you have any questions or have perhaps found an error, or if you have any suggestions for improvements or just wish to express your satisfaction - please contact us! We will be pleased to receive feedback and will try to answer all questions.

If you wish, you can give us a public feedback via the visitor's book or to make it personal, use the feedback form. Thank you in advance!

-> Visitor's Book
-> Feedback-Form

by the way: this script is listed on various archives - if you like it, please rate it at:

Further documentation

'SELFHTML' from Stefan Muenz is very thorough and easy to read documentation. This documentation covers HTML, JavaScript, CSS and much more. So, it's just the right thing for people who want to experiment or get more involved and build their own webpage.