Tip: You can modify some of the code before running
Imitation netease Sina website sliding door effect, with DIV+CSS technology to achieve <! 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=" text/html; charset=gb2312 "/> <title></title> <style type=" Text/css "> <!--#header {background-color: # F8f4ef; height:200px; width:400px; margin:0px; padding:0px; border:1px solid #ECE1D5; Font-family: "The song Body"; font-size:12px; #menu {margin:0px; padding:0px list-style-type:none;} #menu li {display:block; width:100px; text-align:center; Float:left; margin:0px; Padding-top:0.2em; padding-right:0px; Padding-bottom:0.2em; padding-left:0px; Cursor:hand; }. sec1 {background-color: #FFFFCC;}. sec2 {background-color: #00CCFF;}. block {display:block;}. Unblock {Display:no NE;} --> </style> </pead> <body> <script language=javascript> function Secboard (n) {for (i=0;i<menu.childnodes.length;i++) menu.childnodes[i].classname= "SEC1"; Menu.childnodes[n].classname= "SEC2"; for (i=0;i<main.childnodes.length;i++) main.childnodes[i].style.display= "None"; main.childnodes[n].style.display= "Block"; } </script> <div id= "header" > <ul id= "menu" > <li onmouseover= "secboard (0)" class= "SEC2" > Latest News </li> <li onmouseover= "Secboard (1)" class= "SEC1" > Latest article </li> <li onmouseover= "Secboard (2)" class= "SEC1" > Latest log </li> <li onmouseover= "Secboard (3)" class= "SEC1" > Forum new post </li> </ul> <!-- Content display Area--> <ul id= "main" > <li class= "block" > First content </li> <li class= "unblock" > Second content </li > <li class= "unblock" > Third content </li> <li class= "unblock" > Fourth content </li> </ul> <!-- Content display Area--> </div> </body> </ptml>
Tip: You can modify some of the code before running
