Dropdown menu Full introduction of the Dreamweaver article

dreamweaver| Menu | introduction | Pull down Drop-down menu is one of the most common on the Internet, with the mouse gently or move past, there will be a more detailed menu, it not only saves the page layout on the space, so that the Web page layouts concise and orderly, and a new beautiful Drop-down menu, But also for your Web page to add a lot of color.
There are a variety of ways to make pull-down menus, and this installment will introduce you to four common ways to make your own pull-down menus.

Make a pull-down menu with Dreamweaver

dreamweaver is the most commonly used tool to make Drop-down menu, the method is simple, the control is free, can make the menu style as best as possible, it is a required course of making the menu.
The principle of making a pull-down menu with Dreamweaver is simple, using the built-in method of the Behaviors (behavior) panel show-hide the Layers (hidden-Display layer) method, With onmouseover (mouse move) and onmouseout (mouse away) to trigger the layer of hiding and display, and the menu will appear in the layer.
So, we can make the Pull-down menu in four steps, first we need a navigation bar, it is used to place the main menu that appears first in front of the viewer, then to create the Drop-down menu that will appear when it is hidden, and then, for the most critical step, add the hidden and displayed layers to the main menu and Drop-down menu; We do the beautification of the menu. You can also access the following address, as shown in the resulting effect:menu.htm

I believe you have to wait, then let's start right away!

First, the production of navigation bar

First do some necessary upfront work, press CTRL+J, open Page Properties (page property) window, parameter settings such as Figure two, this setting on the location of the menu will have an impact, so please figure set.

Press CTRL+F2 to open the Objects panel, click on the Layer button in the page and hold the mouse to drag out a layer, and then in the Layer Properties (property) panel set the parameters, Layer ID box fill in the Title,l, T, W, h boxes are filled in 8, 15, 480, 15, the background color fill in the #006699, as shown.

Move the cursor to the layer, click the Table button on the objects panel and insert a row of four columns, set as shown.

Hold down the CTRL key to the four cells in the table, then set their width to 120, and enter text in the first two cells, which is your main course single-name, you can enter the name you want, I use "Classic forum" and "Tenkine" as an example, and add links.

Second, the production of Pull-down menu

Now start making the menu that will be pulled down, and use the layers to make the same.
Again from the objects panel to insert a layer to the front of our good navigation bar below, the parameters are filled in: Layer ID box fill in the Menu1,l, T, W, h boxes fill 8, 34, 120, 80, the background color fill in # 999966, where the L and T two parameters are set this layer distance from the window to the left and the top border, must not fill the wrong, otherwise the menu will be misplaced, will also affect the availability after completion.

At this point, we can enter the menu content we want in the MENU1 layer. For the sake of typesetting, I still use a table to do the menu. This layer will appear as a "Classic forum" drop-down menu, filling in the menus you need. The same method, and then for "Tenkine" also make a drop-down menu (layer menu2).

The point to note in this step is that the location of the drop down menu (menu1, menu2) is very important (determined by the L and T two parameters). Their top line should be close to the bottom of the navigation bar, so that the menu will work properly after we complete the third step. 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 Layer (layer) panel, which lists three layers of the Web page, menu1 and MENU2 in front of a lattice, with closed eye icon, the two layers will be hidden. This step is done because the initial state of the Drop-down menu is not visible.

Third, show and hide effects of the addition

This step is a key step to the magic of decay, everyone carefully with me to do.
This step is divided into two parts: First, the main menu in the navigation bar to add control to show hidden commands; second, add hidden commands to the Drop-down menu itself.

1. Navigation Bar Section
First press the CTRL key to click the first cell in the navigation bar, now press SHIFT+F3 to open the Behaviors window, click the button, in the Drop-down option to select the "Show-hide Layers" (figure). If the option does not have this item, select Show event for IE 5.0, and then click the button again, at which point "Show-hide Layers" will appear.

A window will pop up, as shown below. The Named layers box lists all the layers of the current page and selects "Layer" menu1 "because we want to menu1 this layer to the" Classic Forum "response. Then click the "Show" button below, OK.

At this time will return to the Behaviors window, the window appears as shown in the following figure, click the text under the events "OnClick", will appear a downward small arrow, click it, in the Drop-down option to select the onmouseover. This step is to implement when the mouse is moved to the first cell, the Drop-down menu menu1 status to display (show).

The next step is to have the drop down menu menu2 when the mouse is moved to the second cell, and then the hidden state is added.
Then click the button, select "Show-hide Layers" in the dropdown, and select "Layer" in the pop-up window, because we want to menu1 this layer to the "Classic Forum" response. Then click the "Hide" button below, OK.

Go back to the Behaviors window and click on the small arrow below to select onmouseout in the dropdown option.

2. Drop down Menu Section
First select the layer menu1, by clicking on the edge of the layer or clicking on the menu1 in the layer panel, adding a command for it to display and hide itself in the Behaviors window in the same way as the navigation bar section. The effect is that when the mouse moves out of the layer menu1, the layer menu1 is automatically hidden. The state of the last layer menu1 as shown in the figure.

3. Repeat the above two sections to add a display, Hidden layer command for the second main menu "Tenkine" and layer menu2 of the navigation bar.

Four, the drop down menu beautification adornment

Here, the function effect of the Drop-down menu has been realized, you can now press F12 to see. But you must also find that the menu is a bit ugly, the word is not fine, menu options, the default link color is not good-looking, the menu does not have a border, then let us slightly for it to beauty.
1. Define Menu Font Styles
Press SHIFT+F11 to open the CSS style (style) panel and click on the button below the panel

In the pop-up "New Style" window in the Tag box, select the TD tag, type Select the second redefine HTML Tag,define Select this Document only, as shown.

At this point, the pop-up Settings window, regardless of other, only in the right-hand size box, select 12, the unit is pixels.

2. Define menu Link Styles
In the Style panel, click the button under the Panel, in the pop-up window, type the third use CSS selector,tag box to select the A:hover label, define selected this Document only, as shown.

Click OK in the pop-up window, color fill #ff9933,decoration Select None, click OK.

Return to the Style panel, click on the button below the panel, in the pop-up window, type Select the third Use CSS selector,tag box selected A:link label, define selected this Document.
Click OK in the pop-up window, color fill #ffffff,decoration Select None, click OK.

Return to the Style panel, click on the button below the panel, in the pop-up window, type Select the third Use CSS selector,tag box selected a:visited label, define Select this Document.
Click OK in the pop-up window, color fill #ffffff,decoration Select None, click OK.

3. Define menu Border Style
In the Style panel, click on the button below the panel, in the pop-up window, tag box selected TD tag, type Select the second redefine HTML Tag,define Select this Document only, as shown.

Pop-up Settings window, in the list on the left, select border, the right four edge width is entered into 1, the color is set to black #000000,style selected as solid.

By this we will be successful. Quickly use your Web page to go up.