Author: Poorfish
Dreamweaver is the most commonly used tool for making drop-down menus, with simple method and easy control. It can create menu style as much as possible, and it is a compulsory course for making drop-down menus.
The principle of making drop-down menu with Dreamweaver is simple. It uses the built-in method Show-Hide Layers in the behavior panel, and uses onMouseOver and onMouseOut to trigger the hiding and display of the layer, and the menu that will appear is in the layer.
So, we can make a drop-down menu in four steps. First, we need a navigation bar to place the main menu that first appears in front of the viewer. Then make a drop-down menu that will appear when hidden; Then, the most critical step is to add the effect of hiding and displaying layers in the main menu and the drop-down menu; Finally, we beautify the menu. You can also visit the following address: menu.htm.
I believe you can't wait, so let's start right away!
First, the production of navigation bar
First, do some necessary preliminary work, press CTRL+J to open the page properties window, and the parameter settings are shown in Figure 2. This setting will affect the location of the menu, so please press the icon to set it.
Press CTRL+F2 to open the object panel, click the layer button, hold down the mouse and drag out a layer in the page, then set various parameters in the property panel of the layer, fill in the title in the layer ID box, fill in 8, 15, 480, 15 in the L, T, W and H boxes respectively, and fill in the background color # 00699.
Move the cursor to the layer, click the Table button on the Objects panel, and then insert a table with one row and four columns, as shown.
Hold down the CTRL key and click the four cells of the table, then set their width to 120, and enter text in the first two cells, which is the name of your main menu. You can enter the name you want. I take "Classic Forum" and "Skynet" as examples and add links.
Second, the production of the drop-down menu
Now start making drop-down menus, also using layers.
Insert a layer from the Objects panel into the lower part of the navigation bar we made before, and fill in the parameters as follows: Fill in the menu 1, L, T, W, H boxes, respectively, 8, 34, 120, 80, and fill in the background color # 9966, where the L and T parameters set the distance between this layer and the upper left border of the window.
At this time, we can enter the menu content we want in the layer of menu 1. For the convenience of typesetting, I still use tables as menus here. The drop-down menu of "Classic Forum" will appear on this floor, and fill in the menu link you need. Similarly, make a "Skynet" drop-down menu (Layer menu2).
In this step, it should be noted that the location of the layer where the drop-down menu (menu 1, menu2) is located is very important (determined by two parameters: l and t). Their upper edge should be close to the lower edge of the navigation bar, so as to ensure that the menu can be used normally after we finish the third step later. Because if you stay away from the navigation bar, the menu disappears as soon as the mouse leaves the navigation bar.
Press F2 to open the Layers panel, which lists three layers in the web page. Click on the box in front of menu 1 and menu2, and the close eyes icon will appear. These two layers are hidden. This step is completed because the initial state of the drop-down menu is invisible.
Third, show and hide the added effect.
This step is a key step to turn decay into magic. Please follow me carefully.
This step is divided into two parts: first, add a command to control the display of hidden information in the main menu of navigation bar; Second, add a command to the drop-down menu itself to show hiding.
1. navigation bar section
First, press CTRL and click the first cell in the navigation bar. Now press Shift+F3 to open the Behavior window, click the button, and select "Show-Hide Layer" in the drop-down option (as shown). If this option is not available, select IE 5.0 under Show Events, and then click the button again. Show-Hide Layers appears.
A window will pop up, as shown below. In the named layer box, all layers of the current webpage will be listed, and "Layer" menu 1 will be selected, because we hope that this layer of menu1can respond to the "classic forum". Then click the "Show" button below and confirm.
At this point, you will return to the Behaviors window, and the words shown in the following figure will appear in the window. Click the word "onClick" under Events, and a small downward arrow will appear. Click on it and select onMouseOver from the drop-down options. The function of this step is to change the status of the drop-down menu menu 1 to Show when the mouse moves to the first cell.
The next step is to hide the drop-down menu menu2 when the mouse moves to the second cell.
Click the button again, select "Show-Hide Layers" in the drop-down option, and select "Layers" menu 1 in the pop-up window, because we want this layer of menu 1 to respond to the "classic forum". Then click the "Hide" button below and confirm.
Return to the Behaviors window, click the down arrow, and select onMouseOut from the drop-down options.
2. Drop-down menu section
By clicking the edge of a layer or clicking the menu 1 in the Layers panel, first select the layer menu 1, and then add commands to show and hide yourself in the Behaviors window in the same way as the navigation bar. The effect of this is that when the mouse moves out of the layer menu 1, the layer menu 1 will be hidden automatically. The status of the last layer menu 1 is as shown in the figure.
3. Repeat the above two parts, and add commands to show and hide layers for the second main menu "Tianji Net" and Layer Menu 2 of the navigation bar.
Fourth, the beautification of the drop-down menu.
At this point, the function and effect of the drop-down menu have been realized. Now press F 12 to see it. But you must also find that the menu is a bit ugly, the text is not fine enough, the default link color of menu options is not good-looking, and the menu has no border. Let's beautify it a little.
1. Defines the menu font style.
Press Shift+F 1 1 to open the CSS Styles panel, and then click the button below the panel.
Select TD Tag in the tag box of the "New Style" window that pops up, select the second Redefine HTML Tag for Type, and select This Document Only for define, as shown in the figure.
The settings window will pop up. Anything else, just select 12 in the size box on the right, and the unit is pixels.
2. Define menu link style
In the Styles panel, click the button below the panel. In the pop-up window, select the third item using CSS selector as the type, and select the a:hover tag in the tag box. Select this document for definition only, as shown in the figure.
Click OK. In the pop-up window, fill in the color #ff9933, and select None for decoration. Click OK.
Go back to the Styles panel, click the button at the bottom of the panel, and in the pop-up window, select the third item "Use CSS Selector" as the Type, select the a:link tag in the Tag box, and select "This document is for definition only".
Click OK. In the pop-up window, fill in #ffffff as the color, select None as decoration, and click OK.
Return to the Styles panel, click the button below the panel, in the pop-up window, select the third item "Use CSS Selector" as the Type, select the a:visited tag in the Tag box, and select "This document is for definition only".
Click OK. In the pop-up window, fill in #ffffff as the color, select None as decoration, and click OK.
3. Define menu border style
In the style panel, click the button at the bottom of the panel, and in the pop-up window, select td tag in the tag box, select the second Redefine HTML tag in the type, and select this document in the definition, as shown in the figure.
Pop up the setting window, select the border from the list on the left, enter the width of the right four sides as 1, set the color to black #000000, and select solid color as the style.
At this point, we succeeded. Use your web page quickly.