“Hover Here” is a “text-link” drop-down menu with a single line of plain text.
In the case of the “Hover Here” drop-down menu above, the code-line used was:
Therefore, the text “Spaghetti” appears on the drop-down menu.
true,0,true,true); first_menu.addMenuItem("Spaghetti"); writeMenus(); } // ]]> </script>
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>
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.
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.