The main menu of many applications has this effect, which is usually dark. Once you move the mouse over the menu, it becomes brighter immediately. When the mouse is not on the menu, it is flat, once you move the mouse over the menu, the menu bar is changed to three-dimensional immediately, enhancing the menu effect. Do you also want to make the navigation menu in the webpage produce this fascinating effect? See the following menu.
The mouse is not on the menu
Move the mouse over the menu
The above menu effects are created in the following way: the CSS attributes can be dynamically changed. We first define two sets of CSS, one is the CSS with the mouse not on the menu, another group is the CSS that the mouse uses on the menu. You can call different css in the onmouseover and onmouseout events to achieve the effect of this example. The specific production method is described as follows:
1. Create a 1*4 table, enter the menu name in the table, and set the link;
2. To make the menu produce a three-dimensional effect, you only need to set the top and left borders of the menu to white, and the right and bottom borders to black. Press F7 in dreamweaver3 (or click the icon in the Quick Start column like the "Gossip figure") to bring up the CSS panel, select "NONE", and then click the edit icon in the lower part of the panel, in the displayed "Edit style sheet" dialog box, press "new" and select "make custom style (class)" in the pop-up "New Style" dialog box, enter ". menustyle1 (that is, to give a name to the class to be defined, note that the previous small point should not be missed), Press OK, and the "style definition for menustyle1" dialog box will pop up immediately, then we began to define the CSS "style1. Select "border" in the selection window on the left, define (also select) On the right panel, and select "solid (solid line)" in the "style" attribute )"; enter "1" in "TOP", and then define the color of "TOP" and "Left" as "# ffffff" (white ), the color of "bottom" and "right" is defined as "#000000" (black ). At this point, "menustyle1" has been fully defined. Press OK to return. In the "Edit style sheet" dialog box, press the "done" button to end. We use the same method to define a "menustyle2" CSS. We use the same method when moving the mouse away, but when defining the border line color, set the color of the four border lines to the same color as the menu background. By the way, setting the border line width to "0" can also achieve similar results, but the whole page needs to be shaken, the effect is not good.
3. To ensure that the entire menu bar is usually dark and the mouse is bright, set two CSS Alpha filters, menustyle3 and menustyle4, setting CSS filters in Dreamweaver is the same as setting general CSS filters (For details, refer to the "CSS Filter Application Tips" topic), but there are many parameters for the "Alpha" filter, in fact, only one of the parameters can be used here. I will provide the CSS code here, which can be directly added between <Style type = "text/CSS"> "〉
<〈! --
. Menustyle1 {border: solid; border-width: 1px 1px 1px; border-color: # ffffff #000000 #000000 # ffffff}
. Menustyle2 {border: solid; border-width: 1px; border-color: # ccccff ;}
. Menustyle3 {filter: alpha (opacity = 60 )}
. Menustyle4 {filter: alpha (opacity = 100 )}
.
--> --〉
</Style> 〉
4. When CSS is ready, load it to the appropriate place. In the source code, find the "TD" where the first menu item is located, and add the following code: onmouseover = "this. classname = 'menustyle1' "onmouseout =" this. classname = 'menustyle2' "class =" menustyle2 ". This line of code uses the format defined by menustyle1 when you move the cursor over this menu, when you move the mouse away, use the format defined by menustyle2. The class = "menustyle2" is used when neither of the current two events occurs, this ensures the consistency of menus. This line of code is also added to other menu items. In this way, menu items can be converted from a three-dimensional plane to a plane as the mouse moves. 5. Add the following code to the table MARK: onmouseover = "this. classname = 'menustyle4' "onmouseout =" this. classname = 'menustyle3' "class =" menustyle3 ", the role of this line of code is similar to the above, but here it changes transparency, and visually produces a mutual effect of light and shade.
At this point, the production is complete. Press F12 to see the effect! The CSS code automatically generated by dreamweaver3 is a little more. If you are familiar with CSS, you can directly write it. Instead of using Dreamweaver, you can also directly add the code to the corresponding position. The purpose of this example is to propose a method. The key lies in flexible application and many special effects can be made. For example, if the menu item is changed from text to image, the effects will be quite different; by changing the border line color, you can obtain the concave effect when you move the mouse over the menu item like the Dreamweaver main menu.
