The drop-down menu is one of the most common effects on the Internet. Just click or move the mouse over, and a more detailed menu will appear. It not only saves space on the web page layout, makes the web page layout concise and orderly, but also is a novel The beautiful drop-down menu adds a lot of color to your web page.
There are many ways to make drop-down menus. This column will introduce you to four commonly used methods, allowing you to create your own drop-down menu as you like.
■ Use Dreamweaver to create drop-down menus
??Dreamweaver is the most commonly used tool for making drop-down menus. It has a simple method and free control. It can create menu styles to the maximum extent. It is a required course for making drop-down menus.
??The principle of using Dreamweaver to create a drop-down menu is very simple. It uses the built-in Show-Hide Layers method in the Behaviors panel, and uses onMouseOver (mouse moves to) and onMouseOut (mouse moves away) to trigger the hiding and showing of the layer, and the menu that will appear is in the layer.
??Therefore, we can create a drop-down menu in four steps. First, we need a navigation bar, which is used to place the main menu that first appears in front of the viewer; then we create the drop-down menu that will appear after being hidden; and then , the most critical step is to add the effect of hiding and showing layers to the main menu and drop-down menu; finally, we beautify the menu. The final effect you see is as shown in the figure. You can also visit the following address: menu.htm
??I believe you can’t wait any longer, so let’s get started right away!
1. Production of navigation bar
First, do some necessary preliminary work. Press CTRL+J to open the Page Properties window. The parameter settings are as shown in Figure 2. This setting will have an impact on the position of the menu, so please set it as shown in the picture.
Press CTRL+F2 to open the Objects panel and click the layer button
Finally, hold down the mouse and drag out a layer on the page, and then set the parameters in the Properties panel of the layer. Fill in the Layer ID box with title, and fill in the L, T, W, and H boxes with 8, 15, and 15 respectively. 480, 15, fill in the background color with #006699, as shown in the picture.
Move the cursor inside the layer and click the table button on the Objects panel
, insert a table with one row and four columns, and set it up as shown in the figure.
Hold down the CTRL key and click on 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 used "Classic Forum" and "Tianji.com" as examples and added links.
2. Creation of drop-down menu
Now start making the menu that will appear as a drop-down, also using layers.
Insert a layer from the Objects panel again below the navigation bar we made earlier. Fill in the parameters as follows: fill in the Layer ID box with menu1, fill in the L, T, W, and H boxes with 8, 34, 120, and 80 respectively. Fill in the background color with #999966. The two parameters L and T are to set the distance between this layer and the left and upper borders of the window. They must not be filled in incorrectly, otherwise the menu will be misplaced and the usability after completion will be affected.
At this time, we can enter the menu content we want in the menu1 layer. For the convenience of layout, I still use tables to make menus here. This layer will appear as a drop-down menu for "Classic Forum", fill in the menu links you need. In the same way, make a drop-down menu (layer menu2) for "Tianji.com".
What should be noted in this step is that the position of the layer (menu1, menu2) where the drop-down menu is located is very important (determined by the 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 complete the third step. Because if you stay away from the navigation bar, the menu will disappear as soon as the mouse leaves the navigation bar.
Press F2 to open the LAYER panel, which lists the three layers in the web page. Click the space in front of menu1 and menu2, and the closed eye icon will appear, and these two layers will be hidden. This step is done because the initial state of the drop-down menu is invisible.
3. Adding show and hide effects
This step is a crucial step in turning decay into magic. Please follow me carefully.
This step is divided into two parts: first, add a command to control the display and hiding of the main menu in the navigation bar; second, add a command to control the display and hiding of the drop-down menu itself.
1. In the navigation bar section, first press and hold the CTRL key and click on the first cell in the navigation bar. Now press Shift+F3 to open the Behaviors window and click
button and select "Show-Hide Layers" in the drop-down option (as shown in the picture). If there is no such item in the options, select IE 5.0 under Show Events For, click the button again, and "Show-Hide Layers" will appear.
A window will pop up, as shown below. In the Named Layers box, all the layers of the current web page will be listed. Select "layer "menu1" " because we want the menu1 layer to respond to the "Classic Forum". Then click the "show" button below and OK.
At this time, you will return to the Behaviors window, and the words as shown below will appear in the window. Click the text "onClick" under Events, and a small downward arrow will appear. Click it and select onMouseOver in the drop-down option. The purpose of this step is to change the status of the drop-down menu menu1 to Show when the mouse moves to the first cell.
The next step is to make the drop-down menu menu2 hidden when the mouse moves to the second cell.
Order again button, select "Show-Hide Layers" in the drop-down option, and select "layer "menu1" " in the pop-up window, because we want the menu1 layer to respond to "Classic Forum". Then click the "hide" button below and OK.
Return to the Behaviors window, click the small downward arrow, and select onMouseOut in the drop-down option.
2. In the drop-down menu part, first select the layer menu1 by clicking on the edge of the layer or clicking menu1 in the LAYER panel. Use the same method as the navigation bar part to add commands to show and hide itself in the Behaviors window. The effect of this is that when the mouse moves out of layer menu1, layer menu1 is automatically hidden. The status of the last layer menu1 is as shown in the figure.
3． Repeat the above two parts and add show and hide layer commands for the second main menu "Tianji.com" and layer menu2 of the navigation bar.
4. Beautification and modification of drop-down menus
At this point, the functional effect of the drop-down menu has been implemented, and you can see it now by pressing F12. However, you must also find that the menu is a bit ugly, the fonts are not fine enough, the default link color of the menu options is not good-looking, and the menu has no borders, so let us give it a little beauty.
1. Define the menu font style. Press Shift+F11 to open the CSS Style panel and click below the panel.
button
Select the td tag in the Tag box of the pop-up "New Style" window, select the second item Redefine HTML Tag for Type, and select This Document Only for Define, as shown in the figure.
At this time, the setting window pops up. Regardless of other things, just select 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, select the third item Use CSS Selector for Type, select the a:hover tag in the Tag box, and select This Document Only for Define, as shown in the figure.
After clicking OK, in the pop-up window, fill in #ff9933 for Color, select none for Decoration, and click OK.
Return to the style panel and click below the panel button, in the pop-up window, select the third item Use CSS Selector for Type, select the a:link tag in the Tag box, and select This Document Only for Define.
After clicking OK, in the pop-up window, fill in #ffffff for Color, select none for Decoration, and click OK.
Return to the style panel and click below the panel button, in the pop-up window, select the third item Use CSS Selector for Type, select the a:visited tag in the Tag box, and select This Document Only for Define.
After clicking OK, in the pop-up window, fill in #ffffff for Color, select none for Decoration, and click OK.
3． Define the menu border style in the style panel, click the button below the panel, in the pop-up window, select the td tag in the Tag box, select the second item Redefine HTML Tag for Type, and select This Document Only for Define, as shown in the figure.
The settings window pops up, select Border in the list on the left, enter the width of the four sides on the right as 1, set the color to black #000000, and select solid as the Style.
At this point, we have succeeded. Use it on your web page now.