Hover Here

“Hover Here” is a “text-link” drop-down menu with a single line of plain text.

There are four components to a Dreamweaver “drop-down menu” powered by the “mm_menu.js” JavaScript file—such as the “Hover Here” “text” link drop-down menu displayed above-left.

1. First, there is the “mmLoadMenus()” function (that holds the “description” of each drop-down menu on a web page) that is normally embedded in the “head” section of a web page's HTML code inside of JavaScript tags. This “description” of each drop-down menu comes in the form of 22 “arguments” that the “mmLoadMenus()” function will send to an external “mm_menu.js” JavaScript file for processing, along with at least one “.addMenuItem();” code-line that contains the “text” displayed on a drop-down menu.

In the case of the “Hover Here” drop-down menu above, the code-line used was:

.addMenuItem(“Spaghetti”);.

Therefore, the text “Spaghetti” appears on the drop-down menu.

The “mmLoadMenus()” function will send this menu-information to the “mm_menu.js” JavaScript file whenever someone hovers their cursor over a drop-down menu's associated “button-image” link or “text” link present on a web page.


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

Component 1


The 22 "arguments" (highlighted above in white italic typeitalic print) are the physical “description” for each drop-down menu—such as a drop-down menu's width, height, and background color.

2. Second, there are the drop-down menu's “button-image” links or “text” links that are present on a web page. These links are what you hover your cursor over in order to get the drop-down menu associated with a particular link to “display” near that link on a web page.


<div>

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

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

</div>

Component 2


3. Third, there is the JavaScript code [below] placed in the “body” section of a web page's HTML code that “calls” the “mmLoadMenus()” function—that is up in the “head” section—so that a drop-down menu can display on your computer screen. [See this article for an explanation of “calling” a function from the “body” section of a web page's HTML code.]


<script type="text/javascript">

// <![CDATA[

mmLoadMenus();

// ]]>

</script>

Component 3


4. And fourth, there is the “mm_menu.js” JavaScript file, usually “linked” to the web page's HTML code as an “external file.” This external “mm_menu.js” JavaScript file contains the main “Menu()” function that processes the 22 “arguments” sent to it from the “mmLoadMenus()” function. [See number 1.] [See Page Five for a copy of the “mm_menu.js” JavaScript file.]

Below is what the linking “script tags” up in the “head” section of a web page's HTML code would look like if the external “mm_menu.js” JavaScript file were in the same folder as the web page's HTML file:

<script type="text/javascript" src="mm_menu.js"></script>.


Analogy

An easy way to understand how the four components of an “mm_menu.js”-powered Dreamweaver drop-down menu interact in order for the drop-down menu to display on a web page is through the following analogy:

Let's say there is a restaurant called Freddie's Spaghetti. And let's say that as each customer enters Freddie's Spaghetti, waitress Millie takes their order at the front door while Gerald the maître d' makes sure that everything is set up properly in the dining area.

Millie doesn't submit the customer's orders to the kitchen; instead, she simply tacks pieces of paper with each customer's order onto a bulletin board in the Lobby area.

The customers then order drinks and sit around in the dining area talking, in no hurry to eat. The orders taken by Millie, that were tacked on the bulletin board in the Lobby area, are analogous to the 22 “arguments” (descriptions) stored in each “new Menu()” function within the “mmLoadMenus()” function—along with that new menu's “addMenuItem();” text line(s). [See number 1.]

Now, at Freddie's Spaghetti, there is only one plate in the whole restaurant. This means that only one customer can eat at a time. In our analogy, each customer in the restaurant is analogous to a “button-image” link or a “text” link on a web page.

When one of the customers decides that they are hungry, they raise their left hand, while with their right hand point at the spot on the table where they would like their plate set. This would be the same as someone hovering their cursor over a particular “button-image” link or “text” link on a web page.

Millie the waitress, upon seeing a particular customer raise their left hand, associates that customer with their order up on the bulletin board in the Lobby area and rushes into the kitchen to tell Chef Hank, and the other cooks in the kitchen, what the order is that they should put on the plate, and where the plate should be set on the customer's table.

Millie the waitress's actions here are analogous to the “onmouseover event” (as it is called) that starts when a cursor is placed over a “button-image” link or “text” link on a web page. The “onmouseover event” associates the “button-image” link or “text” link being hovered over (by accessing the link's “id” or “name” value) with that particular link's menu's stored “description” (and “addMenuItem();” text line(s))—that are up in the “mmLoadMenus()” function in the “head” section of the web page—and then rushes that menu's “description” and “addMenuItem();” text line(s) (the customer's order), along with the location of the spot on the table where the customer wants their plate set (obtained from two of the “parameters” specified in the “MM_showMenu()” calling-function), over to the external “mm_menu.js” JavaScript file (kitchen) where the main “Menu()” function (Hank), and the other functions in the “mm_menu.js” JavaScript file (the other cooks in the kitchen), prepare a new drop-down menu's “description” and “text” (the customer's meal), along with a note reminding Millie the waitress where on the table the customer wanted their plate set.

When Chef Hank and the other cooks have finished preparing the only plate in the restaurant, waitress Millie rushes this plate full of food (drop-down menu) out to the dining room (web page) and places it in front of the customer who had raised their left hand (“button-image” link or “text” link that was hovered-over on the web page), at the spot on the table the customer had specified (in the two “parameters” in the “MM_showMenu()” calling-function).

While Millie the waitress is doing all of this work, Gerald the maître d', who acts as the “mmLoadMenus();” calling-function in the “body” section of a web page's script, keeps an eye on the bulletin board in the Lobby area, as well as watching the dining area. [See number 3.]

Now, all during the time that Millie, Chef Hank, and the other cooks were interacting in the kitchen, the customer still had their left hand raised. And now that that customer has their plate of food in front of them, they can eat their food: as long as they keep their left hand raised (just as a cursor that remains poised over a “button-image” link or a “text” link allows its drop-down menu's text to be displayed)—and the other customers' orders (the other drop-down menu's “descriptions” and “addMenuItem();” text line(s) associated with each link on that same web page) will have to wait until this customer with the plate full of food finishes their meal and then puts their left hand down (as when a person moves their cursor away from a “button-image” link or “text” link)—before any of those other orders can be placed, via each customers' associated “button-image” link or “text” link on the web page.

When the full customer finally lowers their left hand, Millie the waitress walks over and takes the customer's plate, walks back into the kitchen and puts the plate into the dishwasher. This is analogous to the “onmouseout event” that occurs on a web page when someone moves their cursor away from a “button-image” link or “text” link.

And now that the one plate in the restaurant has been cleaned in the dishwasher (analogous to the “drop-down menu” disappearing from the web page), the restaurant's employees are ready for the next order to be placed by a customer (by a cursor hovering over a “button-image” link or “text” link on the web page...even if it is the same “button-image” link or “text” link that the cursor had just moved away from)—and Millie the waitress is back out in the dining area looking for that customer who might raise their left hand.

If no one raises their left hand, Millie takes a break and waits.

As you can see, only a single plate is needed in Freddie's Spaghetti restaurant for our analogy to work, as only one “button-image” link or “text” link at a time can be hovered-over by a cursor on a web page.

As you can imagine, customers at Freddie's Spaghetti restaurant spend a lot of time talking and drinking, with only one customer being able to eat at a time!

I hope that this Freddie's Spaghetti analogy helps a little in your understanding of how the four components of a Dreamweaver “drop-down menu” work together on a web page.

Now, let's go to Page Two and look in more detail at the HTML code for a single drop-down menu—with one line of plain text—as was used for the “Hover Here” “text” link example at the top of this page.

To Top of Page

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