<HTML><Head><title>Index</title><Linktype= "Text/css"rel= "stylesheet"href= "Css/middle-left.css" /><Scriptlanguage= "JavaScript"src= "Js/middle-left.js"></Script></Head><Body><Divclass= "Maindiv" State= "0"><Divclass= "TopItem"Classout= "TopItem"Classover= "Topitemover"OnMouseOver= "Init (this);" >Website Home</Div><Divclass= "Dropmenu" > <Divclass= "submenu" State= "0"> <spanclass= "Subitem"Classout= "Subitem"Classover= "Subitemover"><ahref= "http://www.cnblogs.com/cdlinux/">Home 1</a></span><BR> <spanclass= "Subitem"Classout= "Subitem"Classover= "Subitemover"><ahref= "http://www.cnblogs.com/cdlinux/">Home 2</a></span><BR> <spanclass= "Subitem"Classout= "Subitem"Classover= "Subitemover"><ahref= "http://www.cnblogs.com/cdlinux/">Home 3</a></span><BR> <spanclass= "Subitem"Classout= "Subitem"Classover= "Subitemover"><ahref= "http://www.cnblogs.com/cdlinux/">Home 4</a></span><BR> <spanclass= "Subitem"Classout= "Subitem"Classover= "Subitemover"><ahref= "http://www.cnblogs.com/cdlinux/">Home 5</a></span><BR> </Div></Div></Div><!--done, the back is just repeating -</Body></HTML>
JS file code
varTimer_slide =NULL;varobj_slide;varObj_view;varPix_slide = 10;//This is the amount of slide/delay_slidevarNew_pix_val;varDelay_slide = 30;//This is the time between the slidevarDiv_height = 22;//value irrelevantvarSub_menu_num =0;varRe_init_obj =NULL;varBmenu = document.getElementById ("Curmenu");varMaindiv,subdivdocument.write (' <div id= ' Tempcontainer "class=" Maindiv "style=" Visibility:hidden; Position:absolute "></div>")functionInit (objdiv) {if(Timer_slide = =NULL) {Sub_menu_num= 0; Maindiv=Objdiv.parentnode; SubDiv= Maindiv.getelementsbytagname ("DIV"). Item (0); Subdiv.onclick=Setslide; Obj_slide= Maindiv.getelementsbytagname ("DIV"). Item (1) Obj_view= Obj_slide.getelementsbytagname ("DIV"). Item (0); document.getElementById ("Tempcontainer"). Innerhtml=maindiv.getelementsbytagname ("DIV"). Item (2). InnerHTML//DD added CodeDiv_height=document.getelementbyid ("Tempcontainer"). offsetheight//DD added Code for(i=0;i<obj_view.childnodes.length;i++) { if(OBJ_VIEW.childNodes.item (i). TagName = = "SPAN") {Sub_menu_num++; OBJ_VIEW.childNodes.item (i). onmouseover=Changestyle; OBJ_VIEW.childNodes.item (i). onmouseout=Changestyle; }} new_pix_val= parseint (Maindiv.getattribute ("state")); }}functionsetslide () {if(Window. Timer_slide) clearinterval (timer_slide)//DD added Code if(Timer_slide = =NULL&& This. parentnode = =maindiv) Timer_slide= SetInterval (' Runslide () ', Delay_slide); Else{re_init_obj= This; SetTimeout (' Reinit () ', 200); }}functionreinit (obj) {Init (re_init_obj); Timer_slide= SetInterval (' Runslide () ', Delay_slide); Re_init_obj=NULL;}functionrunslide () {if(Obj_view.getattribute ("state") = = 0) {New_pix_val+=Pix_slide; OBJ_SLIDE.style.height=New_pix_val; if(New_pix_val >= div_height)//DD Modified Code{clearinterval (timer_slide); Timer_slide=NULL; OBJ_VIEW.style.display= ' inline '; Obj_view.setattribute ("State", "1") Maindiv.setattribute ("State", New_pix_val); } } Else{OBJ_VIEW.style.display= ' None '; New_pix_val-=Pix_slide; if(New_pix_val > 0) OBJ_SLIDE.style.height =New_pix_val; if(New_pix_val <= 0) {New_pix_val= 0; OBJ_SLIDE.style.height=new_pix_val clearinterval (timer_slide); Timer_slide=NULL; Obj_view.setattribute ("State", "0") Maindiv.setattribute ("State", New_pix_val); } }}functionChangestyle () {if( This. ClassName = = This. getattribute ("Classout")) This. ClassName = This. getattribute ("Classover"); Else This. ClassName = This. getattribute ("Classout");}
CS Code
. Maindiv{width:160px;}. TopItem{width:160px;Height:22px;cursor:Pointer;background:#467BF2;text-decoration:None;Color: White;Font-weight:Bold;font-family:"GOTHIC";}. Dropmenu{background:#D9D9D9;Border-top:1px solid #467BF2;Border-left:1px solid #92B1F8;Border-right:1px solid #92B1F8;Border-bottom:1px solid #92B1F8;}. Submenu{Display:None;}. Subitem{Padding-left:5px;cursor:Pointer;Font-weight:Bold;text-decoration:None;Color:Black;}. Subitem a{text-decoration:None;Color:Black;}. Subitemover{cursor:Pointer;Color:Blue;text-decoration:Underline;Font-weight:Bold;Padding-left:5px;}. Subitemover a{Color:Blue;}. Drop{Border-left:1px solid Black;Border-right:1px solid Black;}
Implement click menu Popup submenu on the left side of the frame