{In previous HTML, the positions of elements could only be arranged sequentially, and it was difficult for us to accurately locate and control some elements in the web page. CSS2? Cascading Style Sheet Level 2, the Layout? attribute of Cascading Style Sheet Version 2 appears and gets With the widespread support of browsers, we can not only achieve the above purpose statically, but also predict based on mouse, keyboard, time, etc. Defined external events dynamically change the layout. The "active layer" in the very popular web pages is an image application of it. What we are going to talk about here is how to use these attributes combined with some DHTML objects to implement a drop-down menu similar to the Windows window in the web page (as shown in the figure) ). Please see the following code and detailed instructions.
<?--The following part should be inserted after the <head> of the code-->
<style><?--
/? These are some CSS styles. Among them, "btnTD" is the style class that "raises" the button before it is pressed: the border is set to a solid line with a width of 1 pixel, where the left and upper borders are light in color (white here), and the lower right border is set to a solid line with a width of 1 pixel. The border is dark (dark gray). If an HTML element (such as a cell) with a gray background uses this style, it will look very much like a "protruding" button; "btnDTD" means that the button is "concave" when it is pressed. " style. ?／
． BTNTD? BORDER -Left? 1 SOLID #FFFFFF? BORDER -RIGHT? 1 SOLID # 808080? BORDER -TOP? 1 Solid #FFFFFFF
? 808080
?? BTNDTD? BORDER -Left? 1 SOLID # 808080? BORDER -RIGHT? 1 SOLID #FFFFFF?
BORDER -TOP? 1 SOLID # 808080
?#FFFFFFF ?? TD? FONT -FMILY? Songti? Fon -siｚe ? 9pt ?
---> ＞
＜?--
//Global variable to determine which button is pressed
var intBlnClk=0?
//Mouse passes, leaves, and clicks to change the cell CSS Style
function mOvrOut?objSrc??
var argv?argc?blnAc tive?strColor?strBgColor?strClass?strClassD? strCursor?
argv=mOvrOut. Arguments?argc=argv. length?
/?Do not set the current object as "active" by default?/
blnActive=?argc>1?﹖ eva?argv[1]??false?
/?The default style of the current object when the mouse passes is "protruding button shape"?/
strClass=?argc>2 && arg v［2］?＝′′?﹖ argv[2]?'btnTD'?
/?The current object is "concave button-shaped" by default when the mouse is clicked?/
strClassD=?argc>3 && argv［3 ]?=′′?﹖ argv[3]?′ｂｔＤＴＤ′?
/? Set the foreground color of the current object to white, the background color to blue, and the mouse style to hand shape? /
ｓｔＣｏｏ＝′#ffffff′?str BgColor=′#000080′?strCursor= 'hand'?
/? IE4 and higher versions only support these JavaScript dynamic changes to CSS styles? /
if? document. all??
//Set the mouse style of the current object to the parameter passed value
objSrc. style. cursor=strCursor?
//If the mouse enters the current object range
if??objSrc. contents?event. fromElement???
/? Set as active style? /
if?blnActive?? objSrc. bgColor=strBgColor?objSrc. style. color=strColor? ?
/?When the current object does not need to be set as the active style, if the original style is "protruding button shape", set it to "concave button shape", and vice versa?/
else objSrc. className=?intBlnClk?=0?﹖ ｓｒＣａｓＤ?ｔｔＣａａｓ? ?
//The mouse leaves the current object area
else if??objSrc. contents?event. toElement???
// Set these styles to the default value
objSrc. bgColor=′′?objSrc. style. color=′′?objSrc. ｃｌａｓＮｍｍｅｅｅｅｅｅ
/
? General function for showing/hiding layers. Use objNS, objIE, strStu as parameters, where objNS and objIE are the "layers" of Netscape and IE respectively. "Object, strStu is the state of the layer. Due to space limitations, please see the instructions at the end of this article. ?/
function showHidLayers????
/? Call the above function to show/hide the layer passed by the parameter, which is to simplify the code. Detailed functions are not given here. ?/
function showLayer?intCurrent???
//--></script> ＜/head＞
Element．style．color＝＝′′? showLayer?1?′hide′ ?″>
<?-- The function of the above body part is to hide all "menus" that should be hidden when the mouse does not press any button. The following are two layers defined with CSS layout. The initial state of the layer named "menu" is: the absolute position on the screen is (12?12), visible, the layer z-index attribute is 100; "menu1" To be invisible. -->
<div id="menu" style="position?absolute?visi bility? visible?left?12px?top?12px? z-index? 100″><tab ｌｌｏｄｅｅｅｅｅｅｅｅ Ｇ 2 ″ BGCOLOR = ″ # C0C0C0 ″ BORDERCOLOR = ″ # C0C0C0 ″ ＞ ＞ ＞ ＞ ＞ ＞ ＞ ｎ ｎ ｎ ″ ″ ″ ″ ″ ″ ″ ″ ″ ″ ″ ″ UT?
This? ? SHOWLAYER? 1? ″> Tianji.com < / TD> < / TR ＞ < / Table ＞ < / DIV>
<DIV ID =″
Menu1 ″ ″ ″ position? ABSOLUTE? ? Hidden? Left? 11px? TOP? 34PX ? ｚ ｅ ｅ ｅ ＞ ＞ ＞ <Table Boder = ″ ″ ″ ″ ｃ ｃ ″????????????????????????????
TR ＞ <TD ONMOUSEOVER = ″ Movrout? This? TRUE ?″ onMouseOut=″mOvrOut?this?″ width=″100%″nowrap onC lick="ｗindow.location=′http?／／ｗｗ.pcwclub.com／′? ｓｗｗＬａｅｒ1?′ｉｉｅｅｅ″＞Computer News Readers Club＜/td＞＜/tr＞
＜/table＞＜/div＞
Due to space limitations, some functions cannot be given and explained in detail. If you need the complete code, please visit the following link: http?//ctsighｈ t. topcool. net/documents/menu. html.