The drop-down menu is one of the most common effects on the Internet. It is a more detailed menu with a mouse. It has a more detailed menu, which not only saves the space on the web version, which makes the webline layout simple and orderly, and a novel Aesthetic drop-down menu is a lot of color to your web. Making a drop-down menu is a variety of ways, this column will introduce you to four common production methods, so that you can build your own drop-down menu.
■ Make a drop-down menu with Dreamweaver Dreamweaver is the most commonly used tool for making a drop-down menu, simple and freedom, and can maximize to build a menu style to make a compulsory course for making the next menu. The principle of making a drop-down menu with Dreamweaver is very simple. It uses the built-in method show-hide layer method in the Behaviors panel, and uses onmouseover (mouse to) and onmouseout (mouse removal) To trigger the hidden and display of the layer, and the menu to appear is in the layer. So we can make a drop-down menu divided into four steps. First we need a navigation bar, which is used to place the main menu in front of the viewer; then make the drop-down menu that will appear to start hidden; then For the most critical step, add the effect of hidden and display layers for the main menu and drop-down options; Finally, we make menu beautification modifications. In the end, the effect is as shown in the figure, you can also access the following address: Menu.htm
I believe that you have been waiting, let us start now!
First, the production of navigation strips
First make some necessary pre-work, press CTRL J, open the Page Properties window, the parameter settings are shown in Figure 2, which will have an impact on the location of the menu, so please set it as shown.
Press CTRL F2 to open the Objects panel, click on the layer button and press and hold the mouse in the page and do not drag a layer, then set each parameter in the Properties panel, the Layer ID box fills in Title, L, T, W, the h box is filled in 8, 15, 480, 15, background colors filled in # 006699, as shown.
Move the cursor to the layer, click the Table button on the Objects panel, insert a list of four columns, set as shown.
Press and hold the CTRL button and do not place the four cells of the form, then set their width 120, and enter the text in the first two cells, it is your main menu name, you can press the name you want. I use the "Classic Forum" and "Tianji Net" as an example, and add a link.
Second, the production of pull-down menu
Now start making a menu that will drop, the same layer is used. Insert a layer from the Objects panel to the front of our navigation bar, each parameter fill in: the layer ID box is filled in Menu1, L, T, W, and the h box is filled in 8, 34, 120, 80, respectively. Background colors filled in # 999966, where L and T two parameters are setting this layer distance window and the distance of the upper frame, must not be filld, otherwise, the menu will be misalign, and will affect the usability.
At this time, we can enter the menu content we want in Menu1 this layer. For the convenience of the typography, I will use the form to make a menu at this time. This layer will appear as the drop-down menu of the Classic Forum, fill in the menu link you want. The same method, and then do a drop-down menu (layer menu2) for the "Tianji Net". This step is to pay attention to the location of the layers (MENU1, MENU2) where the pull-down menu is located is very important (determined by the two parameters of L and T). Their upper line should close to the lower side of the navigation bar, so that after the third step is completed later, the menu can be used normally. Because if you stay away from the navigation bar, the mouse leaves the navigation bar and the menu disappears. Press F2 to open the Layer panel, which lists the three layers in the web page, point menu1 and menu2, and a closed eye icon, these two layers are hidden. Operation This step is because the initial state of the drop-down menu is invisible.
Third, the addition of display and hidden results
This step is a key step in determination into magic, and everyone will do it carefully. This step is divided into two parts: First, add control display hidden commands to the main menu in the navigation bar; second, add a hidden command to the drop-down order itself.
1. The navigation section first pressing the Ctrl key to click on the first cell in the navigation bar, and press SHIFT F3 to open the Behaviors window, click the button to select "Show-Hide Layers" in the drop-down option (Figure). If there is no such item in the option, select the IE 5.0 under the SHOW Events for, the button will appear. "Show-Hide Layers" will appear.
A window will pop up, as shown below. The current web page is listed in the Named Layers box, select "Layer" Menu1 ", because we want Menu1 to respond to the Classic Forum. Then click on the "Show" button below, OK.
At this time, it will return to the Behaviors window, and the words appear as shown below, click on the text "onclick" under Events, there will be a downmouseover, click on it, and select OnMouseover in the drop-down option. The role of this step is to achieve the state of the drop-down menu MENU1 when the mouse is moved to the first cell.
The next step is to make the drop-down selection MENU2 becomes hidden when the mouse is moved to the second cell. Point again, select "Show-Hide Layers" in the drop-down option, select "Layer" Menu1 "in the pop-up window, because we want Menu1 to respond to the" Classic Forum ". Then click on the "hide" button below, OK.
Go back to the Behaviors window, click the down-down small arrow, check the onmouseout in the drop-down option.
2. The drop-down menu section first selects the middle layer MENU1, the method is to click the edge of the layer or click Menu1 in the Layer panel to add display and hidden commands in the Behaviors window with the same method with the navigation section section. The effect of this is that when the mouse is moved, the layer MENU1 is automatically hidden. The status of the last layer MENU1 is shown in the figure.
3. Repeat the above two parts, add the display, hidden layer commands for the second main menu of the navigation bar and the layer MENU2.
Fourth, the beautification modification of the drop down menu
Here, the functional effect of the drop-down menu is already implemented, you can see it now. However, you must also find that the menu is a bit ugly, the word is not fine enough, the default chain of the menu option is not good, the menu has no border, let us come a little more. 1. Define menu font styles Press SHIFT F11 to open the CSS Style panel, click on the button below the panel to select the TD tag in the Tag box of the "New style" window, Type selection, the second REDEFINE HTML TAG, Define Select this document ONLY, as shown. At this point, the setting window is popped, regardless of other, only 12 in the Size box on the right, and the unit is PIXELS.
2. Define the menu link style in the style panel, click the button below the panel, in the pop-up window, Type selection A: Hover tab in the tag box, Define Select this Document Only, as shown.
After clicking OK, in the pop-up window, Color Fill # ff9933, Decoration Select None, point OK.
Return to the Style Panel, click the button under the panel, in the pop-up window, Type searches the third USE CSS Selector, Tag box to select a: Link tab, define Select this Document Only. After clicking OK, in the pop-up window, Color Fill # ffffff, Decoration None, point OK.
Also returned to the style panel, click the button below the panel, in the pop-up window, TYPE selection A: Visited tab in the Tag box, define, choose this Document Only. After clicking OK, in the pop-up window, Color Fill # ffffff, Decoration None, point OK.
3. Define the menu Border pattern in the style panel, click the button below the panel, select the TD tag in the pop-up window, Type selection second REDEFINE HTML TAG, Define Select this Document Only, as shown.
The set window is popped, and the Border is selected in the left list, and the four edge width on the right is 1, the color is set to black # 000000, and Style is selected as a Solid.
At this point, we will succeed. Use it to get on your page.
