Been to Microsoft's website? (Figure 1) If you have been there, then you should admire the navigation bar of the folding menu above this site? ("Oh, or the old cover is strong." "Ah, how can the egg fly ?!") Do you think you can make such an effect? " Come, don't envy, your heart is not as good as action!
The folding menu is actually through the display and hidden of layers to achieve this effect. Let me talk about how to make it now. FOLLOW ME! Turn on Dreamweaver first (Dreamweaver's support is good, it is also a must-have tool for webpage).
The first step: first insert a line, two columns, the method: Click "Insert" on the menu (insert), then select "Table", enter 1 in "Row", in the column (Columns) Enter 2, click "OK". (Figure 2) In order to beautiful, in the property bar of the table, set the width and height to 200px and 30px, and set all the border colors of the table to #FFFFF, then select two cells, attribute column The border color is set to # 6699ff. Enter the "Data Tutorial" and "Related Software" in both cells. And set to the middle alignment in the cell properties column (by way of manner: not only in Dreamweaver can set the form horizontal alignment, but also set the vertical position alignment, and only write code in FrontPage, this is also I am from one of the reasons for FrontPage using Dreamweaver!)
In the second step, a layer is inserted into the "Data Tutorial" unit. Method: Click "Insert" on the menu, then select "Layer". At this time, a layer will appear in the cell. At this time we are not full of position, so come to move it. The movement of the layer is very easy, select the layer, then press the arrow keys on the keyboard to move, and not restricted, huh, huh, simple. Similarly, we can set its size in the properties column of the layer, set the width and height to 100px and 90px, respectively.
Step 3: Insert a three-line, a list of forms in the layer, and the method is the first step. The width and height are set to 100px and 90px, respectively, to fill this layer. Then make the border color as the first step. Enter "Dreamweaver", "FrontPage", "FrontPage" in three cells. And in the properties column is set to intermediate alignment.
