Made a div+css menu, compatible with Firefox, share to everyone, we study together
<! 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>div+css+js tree menu, refresh </title> <meta name=" description "content=" http:// Www.livepo.com "> <style type=" text/css "> <!--*{margin:0;padding:0;border:0;} Body {font-family:arial, XXFarEastFont-Arial, serif; font-size:12px; } #nav {width:180px; line-height:24px; List-style-type:none; Text-align:left; /* Defines the entire UL menu row height and background color/}/*================== directory ===================*/#nav a {width:160px; Display:block; padding-left:20px; /*width (must), otherwise the following Li will be deformed/} #nav li {background: #CCC;/* First-level directory background Color * * Border-bottom: #FFF 1px solid;/* a white edge below * * Float:left; /*float:left, this should not be set, but because in Firefox can not display the inherited nav normal width, limit the breadth, Li automatic downward extension * *} #nav li a:hover{background: #CC0000; /* Level of directory onmouseover display background color/} #nav a:link {color: #666; text-decoration:none; } #nav a:visited {color: #666; text-decoration:none; } #nav a:hover {color: #FFF; text-decoration:none;font-weight:bold; /*================== Level Two directory ===================*/#nav Li ul {list-style:none; Text-align:left; #nav Li ul li{background: #EBEBEB/* Level two directory background color/} #nav li ul a{padding-left:20px; width:160px; /* Padding-left The text in level two directory moves to the right, but the width must be reset = (total width-padding-left)///* Below is the link style of level two directory * * #nav li ul a:link {color: #666; Text-decoration:none; #nav Li ul a:visited {color: #666; text-decoration:none; #nav Li ul a:hover {color: #F3F3F3; Text-decoration:none; Font-weight:normal; Background: #CC0000; /* Level two onmouseover font color, background color/}/*==============================*/#nav li:hover ul {left:auto; } #nav li.sfhover ul {left:auto; } #content {clear:left; } #nav ul.collapsed {display:none; }--> #PARENT {width:300px; padding-left:20px; </style> </pead> <body> <div id= "PARENT" > <ul id= "nav" > <li> My Site <ul Id= "ChildMenu1" class= "collapsed" > <li>[url]www.netany.net[/url]</li> <LI>[URL]WWW.NETANY.N et[/url]</li> <li>[url]www.netany.net[/url]</li> </ul> </li> <li> my Account <ul id= "ChildMenu2" class= "collapsed" > Payment </li> <li> Online payment </li> <li> registered remittance </li > <li> Online found </li> <li> history account </li> </ul> </li> <li> Web Admin < UL id= "CHILDMENU3" class= "collapsed" > <li> login </li> Management </li> <li> Management </li> <li> Management </li> </ul> </li> <li> website Management <ul id= "ChildMenu4" class= "collapsed" > <li> Login </li> Management </li> <li> management </li> <li> Management </li> </ul> < /li> </ul> </div> <div > </br></br> work need to have a menu, share to everyone, everybody study </br></br> <p> Please support:[url]http://www.netany.net[/url]</p> </div> </body> </ptml> <script type= text/javascript><!--var lastleftid = ""; function Menufix () {var obj = document.getElementById ("Nav"). getElementsByTagName ("Li"); for (var i=0; i<obj.length; i++) {obj[i].onmouseover=function () {this.classname+= (This.classnam E.length>0? "": "") + "Sfhover"; } obj[i].onmousedown=function () {this.classname+= (this.classname.length>0?) "": "") + "Sfhover"; } obj[i].onmouseup=function () {this.classname+= (this.classname.length>0?) "": "") + "Sfhover"; } obj[i].onmouseout=function () { This.classname=this.classname.replace (New RegExp (? | ^), "sfhover\\b"); }} function Domenu (emid) {var obj = document.getElementById (emid); Obj.classname = (obj.className.toLowerCase () = = "Expanded"? Collapsed ":" expanded "); if ((lastleftid!= ") && (Emid!=lastleftid))//Close the previous menu {document.getElementById (lastleftid). classn Ame = "collapsed"; } Lastleftid = Emid; function Getmenuid () {var menuid= ""; var _paramstr = new String (window.location.href); var _sharppos = _paramstr.indexof ("#"); if (_sharppos >= 0 && _sharppos < _paramstr.length-1) {_paramstr = _paramstr.substring (_sha Rppos + 1, _paramstr.length); else {_paramstr = ""; } if (_paramstr.length > 0) {var _paramarr = _paramstr.split ("&"); if (_paramarr.length>0) {var _paramkeyval = _paramaRr[0].split ("="); if (_paramkeyval.length>0) {menuid = _paramkeyval[1]; }/* if (_paramarr.length>0) {var _arr = new Array (_paramarr.length ); ///Take all # behind, the menu only needs to be used to//for (var i = 0; i < _paramarr.length; i++) { var _paramkeyval = _paramarr[i].split (' = '); if (_paramkeyval.length>0) {_arr[_paramkeyval[0]] = _paramkeyval[1]; }/* IF (menuid!= "") {Domenu (MENUID)}} getmenuid (); * These two function order should pay attention to, otherwise in Firefox getmenuid () not effect menufix (); --></script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
