<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> CSS + JS pop-up DIV layer </title> <Script type = "text/javascript"> Var w = 0; Var h = 0; Var mout; Function emotion (){ Var oMenu = document. getElementById ("menu "); If (w <= 50 ){ OMenu. style. display = "block "; FnLarge (); } Else { FnSmall (); } } Function fnLarge (){ Var oMenu = document. getElementById ("menu "); If (w <200 ){ W + = 50; H + = 25; OMenu. style. width = w + "px "; OMenu. style. height = h + "px "; Window. setTimeout ("fnLarge ()", 10 ); } } Function fnSmall (){ Var oMenu = document. getElementById ("menu "); If (w> 0 ){ W-= 50; H-= 25; OMenu. style. width = w + "px "; OMenu. style. height = h + "px "; Window. setTimeout ("fnSmall ()", 5 ); } Else { OMenu. style. display = "none "; } } </Script> <Style type = "text/css"> Body { Text-align: center; } P { Cursor: pointer; Margin: 0; Padding: 0; Font-size: 24px; Display: inline; } Div a: link, div a: visited { Color: #666; Text-decoration: none; } Div a: hover { Color: # FF6600; Text-decoration: underline; } Div { Border: 2px solid #666; Background: # fff; Margin: 5px auto; Overflow: hidden; Display: none; Padding: 5px 10px; } Ul, li { Margin: 0; Padding: 0; } Li { List-style: none; Width: 70px; } Li. title { Font-weight: bold; } </Style> </Head> <Body> <P onclick = "emotion ();"> click this line of text! </P> <Div id = "menu" Onmouseout = "javascript: mout = setTimeout ('fnsmall () ', 2111 );" OnMouseOver = "javascript: clearTimeout (mout);"> <Table border = "0" cellspacing = "0" cellpadding = "0"> <Tr> <Td width = "80" valign = "top" align = "left"> <Ul> <Li class = "title"> ASP </li> <Li> <a href = "#" onclick = "fnSmall ();"> News </a> </li> <Li> <a href = "#" onclick = "fnSmall ();"> Forum </a> </li> <Li> <a href = "#" onclick = "fnSmall ();"> CMS </a> </li> <Li> </li> </Ul> </td> <Td width = "80" valign = "top" align = "left"> <Ul> <Li class = "title"> PHP </li> <Li> <a href = "#" onclick = "fnSmall ();"> Article </a> </li> <Li> <a href = "#" onclick = "fnSmall ();"> chat </a> </li> <Li> <a href = "#" onclick = "fnSmall ();"> plug-in </a> </li> <Li> <a href = "#" onclick = "fnSmall ();"> enterprise </a> </li> </Ul> </Td> <Td width = "80" valign = "top" align = "left"> <Ul> <Li class = "title"> JSP </li> <Li> <a href = "#" onclick = "fnSmall ();"> AJAX </a> </li> <Li> <a href = "#" onclick = "fnSmall ();"> JQUERY </a> </li> <Li> <a href = "#" onclick = "fnSmall ();"> MYSQL </a> </li> <Li> <a href = "#" onclick = "fnSmall ();"> JAVA </a> </li> </Ul> </Td> </Tr> </Table> </Div> </Body> </Html> |