<! DOCTYPE Html Public "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "Content=" Tex t/html; charset=gb2312 "/> <title> Cloud Habitat Community div+css implementation of sliding door menu effects </title> <style type=" Text/css "> #menu {ma rgin:0; padding:0; Height:26em; Overflow:hidden; Background: #FFFCF2; } #menu li {list-style-type:none; Float:left; Display:block; width:100%; #menu Li a {display:block; Text-decoration:none; Color: #00b; margin:0; width:100%; #menu Li a span {display:none; Color: #453739; Font-family:verdana, Arial, Helvetica, Sans-serif; font-size:12px; padding:10px 0px 5px; #menu Li A.one span {display:block; Height:15em; margin:0 10px; #menu li a:hover {background: #FFFCF2; } #menu li A:hover span {display:block; Height:15em; margin:0 10px; Cursor:pointer; } #menu. h2 {margin:0 5px; padding:0; Color: #933A34; font-size:12px; border:0; Font-family:verdana, Arial, Helvetica, Sans-serif; } #menu. h3 {margin:0 5px; padding:0; font-size:10px; Color: #62583B; Font-family:verdana, Arial, Helvetica, Sans-serif; #menu img {margin:0px 5px 5px; border:1px solid #000; Float:left; }. Curved {width:21em; Curved. B1, curved B2,. Curved B3,. Curved. b4 {font-size:1px; Display:block; Background: #C7BC98; /* Hide Overflow:hidden from Ie5/mac * *///Overflow:hidden; /*//}. Curved. B1, curved B2,. Curved. b3 {height:1px; Curved. B2, curved B3, curved. b4 {background: #FFFCF2; border-left:1px solid #C7BC98; border-right:1px solid #C7BC98; }. Curved. b1 {margin:0 4px; Background: #C7BC98; }. Curved. b2 {margin:0 2px; border-width:0 2px; }. Curved. b3 {margin:0 1px; }. Curved. b4 {height:2px; margin:0; }. Curved. c1 {margin:0 5px; Background: #C7BC98; }. Curved. c2 {margin:0 3px; border-width:0 2px; }. Curved. c3 {Margin:0 2px; }. Curved. c4 {height:2px; margin:0 1px; }. Curved. boxcontent {display:block; Background:transparent; border-left:1px solid #C7BC98; border-right:1px solid #C7BC98; Font-size:0.9em; text-align:justify; </style> </pead> <body> <div class= "Curved" > <b class= "B1 C1" ></b> &L T;b class= "B2 C2" ></b> <b class= "B3 c3" ></b> <b class= "B4 c4" ></b> <div clas s= "Boxcontent" > <ul id= "menu" > <li> <b class= "H2" > cloud-Habitat Community </b> <B CL ass= "H3" >[2007-05-16]</b> <span> cloud-dwelling community jb51. NET, Web design, website production construction, CSS Learning, web standardization </span> </li> <li> <b class= "B1" >&l t;/b> <b class= "B2" ></b> <b class= "B3" ></b> <b class= "B4" ></b> <b class= "H2" > Network programming </b> <b class= "h3" >[2007-05-16]</b> <span> Cloud Habitat community jb51.net, web design, website production construction, CSS Learning, web standardization </span> </li> <li> <b class= "B1" ></b> <b class= "B2" ></b> <b class= "B3" ></b> <b class= "B4" ></b& Gt <b class= "H2" > Script column </b> <b class= "h3" >[2006-06-18]</b> <span> Cloud Habitat Community J B51.net, web design, website production construction, CSS Learning, web standardization </span> </li> <li> <b class= "B1" ;</b> <b class= "B2" ></b> <b class= "B3" ></b> <b class= "B4" ></b> <b Class= "H2" > Web production related Knowledge </b> <b class= "h3" >[2007-05-16]</b> <span> cloud-Habitat Community jb51 . NET, Web design, website production construction, CSS Learning, web standardization </span> </li> <li> <b class= "B1" >&l t;/b> <b class= "B2" ></b> <b class= "B3" ></b> <b class= "B4" ></b> <b class= "H2" > Practical tips </b> <b class= "h3" >[2007-05-16]</b> <span> Cloud Habitat community jb51.net, web design, website production construction, CSS Learning, web standardization </span> </li> </ul> </div> <b C lass= "B4 c4" ></b> <b class= "B3 c3" ></b> <b class= "B2 C2" ></b> <b class= "B1 C1 "></b> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
