css| menu Many of the application's main menus have this effect, usually dark, once the mouse moved to the menu, immediately brighter; the mouse is not on the menu is flat, once the mouse moved to the menu, the menu bar immediately into three-dimensional, thereby enhancing the effect of the menu. Do you also want to make the navigation menu in the Web page have this fascinating effect?
The above menu effect of the production of ideas is this: the use of CSS properties can dynamically change the characteristics, we first define two sets of CSS, a group of the mouse is not on the menu CSS, the other group is the mouse on the menu with CSS. The results of this example can be achieved by calling different CSS separately in the onmouseover and onmouseout events. Here are the specific ways to make:
1, first make a 1*4 table, fill in the Table menu name and set a good link;
2, in order to make the menu to produce stereo effect, in fact, as long as the menu of the top and left border set to white, the right and the bottom of the box line set to black, can produce stereo effect. Press F7 in 3 (or click the "Gossip map" icon in the Quick Launch bar), bring up the CSS panel, select None, click the Edit icon in the lower part of the panel, press the "new" button on the pop-up "Edit Style Sheet" dialog box, and in the "New Style" pop-up When you select Make custom Style in the dialog box, type ". Menustyle1" in the "Name" box below (that is, give a name to the class you want to define, note that the small point in front is not missing), press OK, and immediately eject "Style Definition for Menustyle1 dialog box, you begin to define the "Style1" of CSS. Select "Border" in the selection window on the left. Define (also select) on the right panel, select solid in the style attribute, enter "1" in "Top", and then define the color of "top" "left" as "#FFFFFF" (white), " The color of Bottom "right" is defined as "#000000" (black). To this end, "Menustyle1" has been fully defined, press OK to return, and press the Done button on the Edit Style Sheet dialog box. We use the same method to define a "Menustyle2" CSS, when the mouse is moved, the same method is defined, only when defining the border line color, the four border line color to the same color as the menu background. Here by the way, directly to the border line width set to "0", but also to achieve a similar effect, but the whole page to shake a bit, the effect is not good.
3, in order to achieve the entire menu bar in the usually dark color, the mouse on the top is a bright color effect, to set two CSS Alpha filter, Menustyle3 and Menustyle4, CSS filters are set in Dreamweaver the same way as normal CSS settings (see the "CSS Filter" topic), but the "alpha" filter has more parameters, in fact here as long as one of the parameters on the line, I am here to give the CSS code, directly added to the 〈head〉 and 〈/head〉 is fine between the two. Once the CSS is all set up, you can see this code between 〈head〉 and 〈/head〉:
〈style type= "Text/css"
〈!--
. menustyle1 {border:solid border-width:1px 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, CSS is done, the following start loading to the appropriate place to go. In the source code we find the "〈td〉" where the first menu item is located, adding a line of code: class= "Menustyle2", which is used when the mouse is on the menu, using the Menustyle1 defined format, When the mouse is moved to use the Menustyle2-defined format, the class= "Menustyle2" in the back is used when the previous two events do not occur, still use the menustyle2 format, thus ensuring the consistency of the menu. This line of code is also added to other menu items. This way, the menu item can be changed from stereo to plane with the mouse moving.
5, add a line of code in the 〈table〉 tag of the table: class= "Menustyle3", this line of code is similar to the above, but here is the change of transparency, from the visual to create a degree of light and shade to convert the effect of each other.
To this end, the production is finished, press F12 to see the effect bar! With Dreamweaver3 automatically generated CSS code a little more, if familiar with the CSS, can be directly written, not with Dreamweaver users, you can add the code directly in the appropriate position. The purpose of this case is to attract put forward a method of thinking, the key is flexible application, can make a lot of special effects, such as the menu items from text to image, the effect will be very different; change the color of the border line to get the same as the Dreamweaver main menu, when the mouse is on the menu item, Produces a concave effect.
