...continued from Page One

On Page One, we introduced the four components of a “drop-down menu” powered by the Dreamweaver-based “mm_menu.js” JavaScript file. Let's take a look at each of the four components a little more closely.

1. The first component, the “mmLoadMenus()” function, is normally embedded in the “head” section of a web page's HTML code, inside of JavaScript “script” tags.

If you look at the “mm_menu_0309134612_0” name assigned by the Dreamweaver software to the first menu in the original script seen directly below, you will see that it has been renamed “first_menu” in our example code further down—to make the “mmLoadMenus()” function easier for you to read.

[Note: Those three dots “...” you see in the original script below represent some minor extra code that we will discuss later.]


<script type="text/javascript">

// <![CDATA[

function mmLoadMenus() {

if (window.mm_menu_0309134612_0) return;

window.mm_menu_0309134612_0 = new Menu("root",79,16,"Arial, Helvetica, sans-serif",10,
"#000000","#FFFFFF","#99FFCC","#000000","left","middle",3,0,1000,-5,7,true,true,true,0,
true,true); mm_menu_0309134612_0.addMenuItem("New&nbsp;item"); ... mm_menu_0309134612_0.writeMenus(); // ]]> </script>

[from original script] Component 1




<script type="text/javascript">

// <![CDATA[

function mmLoadMenus() {

if (window.first_menu) return;

window.first_menu = new Menu("root",79,16,"Arial, Helvetica, sans-serif",10,"#000000",
"#FFFFFF","#99FFCC","#000000","left","middle",3,0,1000,-5,7,true,true,true,0,
true,true); first_menu.addMenuItem("Spaghetti"); writeMenus(); } // ]]> </script>

[new example code] Component 1


You will notice that there is no “first_menu” name prefixing the “writeMenus();” command-line in the new example code, that would coincide with the prefixed “mm_menu_0309134612_0.writeMenus();” command-line of the original script. This is because a prefixed “menu-name” is added to a “writeMenus();” command-line by the Dreamweaver software for internal menu-identification purposes, and the “writeMenus();” command-line will work just fine without such a prefixed “menu-name”—and so it was removed: to simplify the example code in this tutorial, and because a prefixed “writeMenus();” command-line can lead to a “duplication problem” when one or more “new Menu()” functions are manually-added to the same “mmLoadMenus()” function. This will be discussed later.

Let's take a look at a new “instance” of the main “Menu()” function (that is over in the external “mm_menu.js” JavaScript file). This new “instance” of the main “Menu()” function is located within the “mmLoadMenus()” function. [Component 1]


window.first_menu = new Menu("root",79,16,"Arial, Helvetica, sans-serif",10,"#000000",
"#FFFFFF","#99FFCC","#000000","left","middle",3,0,1000,-5,7,true,true,true,0,
true,true
);

[new “instance” of the main “Menu()” function] Component 1


The 22 “arguments” in this “new Menu()” function (highlighted above in white italic typeitalic print) get sent over to the main “Menu()” function located in the “mm_menu.js” JavaScript file. These “arguments” are received by the 22 “abbreviated” positions (parameters) of the main “Menu()” function—in the same order that they were sent.




function Menu(label, mw, mh, fnt, fs, fclr, fhclr, bg, bgh, halgn, valgn, pad, space, to,
sx, sy, srel, opq, vert, idt, aw, ah
) { ...breaks down this way: function Menu("root"[label], 79[menuWidth (mw)], 16[menuItemHeight (mh)],
"Arial, Helvetica, sans-serif"[fontFamily (fnt)], 10[fontSize (fs)],
"#000000"[fontColor (fclr)], "#FFFFFF"[fontColorHilite (fhclr)],
"99FFCC"[menuItemBgColor (bg)], "#000000"[menuHiliteBgColor (bgh)],
"left"[menuItemHAlign (halgn)], "middle"[menuItemHAlign (valgn)],
3[menuItemPadding (pad)], 0[menuItemSpacing (space)], 1000[hideTimeout (to)],
-5[submenuXOffset (sx)], 7[submenuYOffset (sy)], true[submenuRelativeToItem (srel)],
true[menuBgOpaque (opq)], true[vertical (vert)], 0[menuItemIndent (idt)],
true[menuAutomaticWidth (aw)], true[menuAutomaticHeight (ah)]
) {

[main Menu() function explained] Component 4


You can see within the brackets of the “broken down” version of the main “Menu()” function above the full name for each “abbreviation”...that better describes what each “abbreviation” (function parameter) represents.

The second “abbreviation,” (mw), for example, stands for “menuWidth”—or the “width” of the drop-down menu. A width of “79” has been chosen for “first_menu.”

The fourteenth “abbreviation,” (to), stands for “hideTimeout”—or the “delay-time” before the drop-down menu disappears from the web page after the cursor has moved away from a “button-image” link or “text” link. In our “Hover Here” “text” link example on Page One, the “delay-time” was set to “1000 (milliseconds)” [one second], and so Millie the waitress did not have to rush the plate back into the kitchen.


<script type="text/javascript">

// <![CDATA[

function mmLoadMenus() {

if (window.first_menu) return;

window.first_menu = new Menu("root",79,16,"Arial, Helvetica, sans-serif",10,"#000000",
"#FFFFFF","#99FFCC","#000000","left","middle",3,0,1000,-5,7,true,true,true,0,
true,true); first_menu.addMenuItem("Spaghetti"); writeMenus(); } // ]]> </script>

[addMenuItem() code-line] Component 1


The “addMenuItem();” code-line highlighted above contains the line of text for the example drop-down menu on Page One.

You will have to add the HTML “&nbsp;” character-entity wherever a “space” would ordinarily go in a “multi-word” line added to a “addMenuItem();” function code-line, such as in the following example:

first_menu.addMenuItem("Spaghetti&nbsp;and&nbsp;Meatballs");.

Otherwise, the words after the “space” get left off the drop-down menu! Also, any line of text longer than the drop-down menu's “width” will extend beyond the drop-down menu out onto the web page when the drop-down menu is displayed.

The “addMenuItem();” code-line is written directly underneath the “new Menu()” function.

Later, we will add a second line of text to a drop-down menu by adding a second “addMenuItem();” code-line below the first! We will also discuss the last line on the “mmLoadMenus()” function, the “writeMenus();” calling-function command-line—that should always be the last line of “mmLoadMenus().”

2. In our “Hover Here” example on Page One, we used a “text” link for the cursor to hover over. You can see below that there is an 'id=“image1”' attribute-value listed in the “onmouseover” event's “MM_showMenu()” calling-function, and that the main “MM_showMenu()” function in the external “mm_menu.js” file has “imgname” as the placeholder-name for an “id” or “name” attribute's “value.” (Either an “id” or “name” attribute's “value” will be acceptable to the “imgname” placeholder.)

But, as you can see in the “Hover Here” drop-down menu's script [See Page One - Component 2.], an “image” can also be the plain text in a “text” link.

To use a “button-image” for the cursor to hover over, as we will see later, you will insert an “img” tag between the “anchor” tags, in place of plain text.

If you are using an XHTML 1.0 Strict DOCTYPE, use the “id” attribute instead of using the “name” attribute in an “img” tag, as the “name” attribute will not validate.


<div>

<a id="image1" href="#" onmouseover="MM_showMenu(first_menu,0,23,null,'image1');" 

onmouseout="MM_startTimeout();">Hover Here</a>

</div>

Component 2




function MM_showMenu(menu, x, y, child, imgname) {

menu = first_menu;
x = moveXbySlicePos (x, obj); (34)
y = moveYbySlicePos (y, obj); (20)
child = [var l = menu.menuLayer || menu; var l = child;] (null)
imgname = 'image1'

...

Component 4


The main “MM_showMenu()” function (part of which is shown above) is one of many functions in the web page's linked, external “mm_menu.js” file. It accepts five “parameters” from the “onmouseover” event's “MM_showMenu()” calling-function in whichever “button-image” link or “text” link is being hovered-over by a cursor.

The function's first parameter, “menu”, is the name of the drop-down menu that you want displayed. The “x” and “y” parameters determine where on the web page, in relation to the “button-image” link or “text” link associated with that menu, the drop-down menu displays. If both “x” and “y” parameters are set to “0,” the drop-down menu will display directly on top of the “button-image” link or “text” link being hovered over by the cursor.

The “child” parameter appears to be for a second menu that would display off the first drop-down menu. A setting of “null” suffices for a single-level drop-down menu.

Also, the “sx” and “sy” “arguments” in the main “Menu” function in the external “mm_menu.js” JavaScript file are listed in that function as: “submenuXOffset = sx;” and “submenuYOffset = sy;.” They would appear to be for the display location of a second drop-down menu listed in the “child” parameter.

Additionally, the two, end “abbreviated” positions “aw” and “ah” in the main “Menu” function are both set to “true” in the original script. (See [main Menu() function explained] Component 4, above.) A posting on a Google Groups forum by Mark Haynes explains the meaning of these and other “abbreviated” positions in the main “Menu” function.


<script type="text/javascript">

// <![CDATA[

mmLoadMenus();

// ]]>

</script>

Component 3


3. The mmLoadMenus(); calling-function is placed in the “body” section of the web page's HTML code; and the fourth component [Component 4], the “mm_menu.js” JavaScript file, is linked-to from the web page by using “script” tags placed in the “head” section.

Now, let's go to Page Three and build two drop-down menus (using “button-image” links) with both menus containing two lines of plain text turned into “text” links.

To Top of Page

This page displays properly in Firefox 29.0.1, Google Chrome, and Internet Explorer-9 browsers.