DHTML emulation Menu

dhtml| Menu

{In the previous HTML, the position of the elements can only be arranged sequentially, and it is difficult to pinpoint and control some of the elements in the page. Css2cascading style sheet Level 2, the layout layout properties of the second edition of the cascading style sheet and the wide support of the browser, we can not only achieve these goals statically, but also can be based on the mouse, keyboard, Time and other predefined external events dynamically change the layout. The current very popular web page "activity layer" is its use of an image, we are here to talk about how to use these attributes combined with some DHTML objects in the Web page to implement similar Windows window Drop-down menu (as shown in the picture). Please look at the following code and detailed instructions.

<--The following sections should be inserted after the code's -->

/ This is some CSS style. Where ″btntd″ is the style class "raised" before the button is pressed: The border is set to a solid line with a width of 1 pixels, where the left and top border colors are light-colored (here is white), the bottom right border is dark (dark gray), and if the background is gray for HTML elements (such as cells) that use this style, It's very much like a "bulge" button; "Btndtd" is the style of "sunken" when the button is pressed. /

． Btntdborder-left1 Solid #ffffffborder-right1 Solid #808080

Border-top1 Solid #ffffffborder-bottom1 Solid #808080

． Btndtdborder-left1 Solid #808080border-right1 Solid #ffffff

Border-top1 Solid #808080border-bottom1 Solid #ffffff

Tdfont-family Song Body font-size9pt

-->

Global variable that determines which button is pressed

var Intblnclk=0

Mouse over, away, click to change the cell CSS style function

function Movroutobjsrc

var Argvargcblnactivestrcolorstrbgcolorstrclassstrclassdstrcursor

Argv=movrout. ARGUMENTSARGC=ARGV. Length

/ the current object is not set to active by default /

Blnactive=argc>1?evalargv[1]false

/ The default mouse passes the current object's style to "extrude button shape" /

Strclass=argc>2 && Argv[2]=′′?argv[2]′btntd′

/ the default mouse click when the current object is "sunken button-shaped" /

Strclassd=argc>3 && Argv[3]=′′?argv[3]′btndtd′

/ the foreground color of the active object is white, the background color is blue, and the mouse style is hand-shaped /

Strcolor=′#ffffff′strbgcolor=′#000080′strcursor=′hand′

/IE4 and its later versions support these JavaScript dynamic changes to CSS styles /

Ifdocument. All

To place the current object's mouse style as a parameter pass value

Objsrc. Style. Cursor=strcursor

If the mouse enters the current object range

Ifobjsrc. Containsevent. Fromelement

/ set to Active style /

Ifblnactiveobjsrc. Bgcolor=strbgcolorobjsrc. Style. Color=strcolor

/ when the current object does not need to be placed as an active style, if the original style is "protruding button", it is set to "sunken button shape" and vice versa /

Else Objsrc. Classname=intblnclk=0?strclassdstrclass

Mouse leaves the current object area

Else Ifobjsrc. Containsevent. Toelement

Set these styles as default values

Objsrc. Bgcolor=′′objsrc. Style. Color=′′objsrc. Classname=′′



/ shows/hides the common functions of the layer. Using objNS, objIE, strstu as parameters, where objNS and objIE are the "layer" objects of Netscape and IE, strstu the state of the layer. Because of the space limit, please check the tail of this article. /

function Shohidlayers

/ calls the above function to show/hide the layer passed by the parameter, so as to simplify the code. The detailed function is not given here. /

function Showlayerintcurrent

-->

The function of the body part above <--is to hide all "menus" that should be hidden when the mouse does not press any buttons. Here are two layers defined with CSS layout, the initial state of the layer named "menu" is: the absolute position on the screen (1212), visual, layer Z-index attribute is, "menu1" is not visible. -->

Tenkine

Computer Newspaper Reader Club

Due to space limitations, some functions can not be detailed and explained, if you need complete code, please visit the following link: http//ctsight. Topcool. Net/documents/menu. HTML.