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.
make a pull-down menu with DreamweaverThe principle is simple, it utilizes the built-in method of the Behaviors (behavior) panel show-hidelayers (hidden-Display layer) method, and onmouseover (mouse to move) and onmouseout (mouse away) to trigger the layer of hiding and display, and the menu that will appear is 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! 1
first, the production of navigation bar
First do some necessary upfront work, press CTRL+J, open pageproperties (Page properties) window, parameter settings such as Figure two, this setting on the location of the menu will have an effect, so please figure set.
Press CTRL+F2 to open the Objects panel, click on the Layer button in the page after holding down the mouse to drag out a layer, and then in the Layer Properties (property) panel set the parameters, Layerid box into 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.
2
Hold down the CTRL key to the four cells in the table, then set their width to 120, and enter the text in the first two cells, which is your main menu single-name, you can enter the name you want, I use classic forums and Tenkine for 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 fill in: Layerid box fill in the Menu1,l, T, W, h boxes are filled in 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 Drop-down menu for the Classic forum, filling in the menus you need. The same way, 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. 3
1. The navigation bar section first presses the CTRL key to click the first cell in the navigation bar, now presses SHIFT+F3 to open the Behaviors window, the Point button, selects in the Drop-down option Show-hidelayers (as pictured). If the option does not have this item, then select Showevents for IE 5.0, click the button again, this time show-hide layers will appear.
A window will pop up, as shown below. The Named layers box will list all the layers of the current page, select Layermenu1, 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 onclick under events, there will be a small downward arrow, click on 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-hidelayers in the dropdown option, select Layer menu1 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. 4
2. The Drop-down menu section first selects 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 style press Shift+f11 to open the CSSStyle (style) panel, click the button under the Panel in the pop-up NewStyle window of the tag box selected TD tag, type Select the second redefinehtml tag,define Select this Documentonly, as pictured.
At this point, the pop-up Settings window, regardless of other, only in the right-hand size box, select 12, the unit is pixels.
5
2. Define menu link style in the Style panel, click on the button below the panel, in the pop-up window, type the third item Usecssselector,tag box selected A:hover label, define Select 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 selection of the third item Usecssselector,tag box selected A:link label, define Select this Document only.
Return to the Style panel, click on the button below the panel, in the pop-up window, type Select the third item Usecssselector,tag box selected a:visited label, define select Thisdocumentonly. 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, the tag box selected TD tag, type Select the second item redefinehtml Tag,define Select this documentonly, 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.
