switch.html
<!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></title> <style type="text/css"> *{ margin:0; padding:0;} </style> </head> <script language="javascript"> function $id(id){ return document.getElementById(id); } window.onload = function(){ var count=0; $id("menu_switch").onclick = function(){ var frame_page = top.document.getElementById("frame_page"); var menu_switch =$id("menu_switch"); if(count%2==0){ frame_page.cols = "0,10,*"; menu_switch.style.backgroundImage='url(images/frame_show.gif)'; menu_switch.title='点击打开管理界面菜单'; }else{ frame_page.cols = "153,10,*"; menu_switch.style.backgroundImage='url(images/frame_hide.gif)'; menu_switch.title='点击隐藏管理界面菜单'; } count++; } } </script> </head> <body> <div style="height:800px; padding-top:260px; width:100px; cursor:pointer; background:url(images/frame_switch_Bj.gif) repeat-y;"> <div id="menu_switch" style="background:url(images/frame_hide.gif) no-repeat; width:10px; height:86px;" title="点击隐藏管理界面菜单"></div> </div> </div> </body> </html>
menu.html
<!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></title> <link rel="stylesheet" href="style/basic.css" type="text/css" /> <link rel="stylesheet" href="style/menu.css" type="text/css" /> <script language="javascript"> /*共用*/ function $id(id){ return document.getElementById(id); } window.onload = function(){ var count_menu1=0; $id("menu1").onclick = function(){ var menu1=$id("menu1"); var menu1_hover=$id("menu1_hover"); if(count_menu1%2==0){ menu1_hover.style.display="block"; menu1.style.backgroundImage="url(images/buttom.jpg)"; menu1.style.backgroundRepeat="no-repeat"; menu1.style.color="#b6241f"; }else{ menu1_hover.style.display="none"; menu1.style.backgroundImage="url(images/buttom_hover.jpg)"; menu1.style.backgroundRepeat="no-repeat"; menu1.style.color="#fff"; } count_menu1++; } var count_menu2=0; $id("menu2").onclick = function(){ var menu2=$id("menu2"); var menu2_hover=$id("menu2_hover"); if(count_menu2%2==0){ menu2_hover.style.display="block"; menu2.style.backgroundImage="url(images/buttom.jpg)"; menu2.style.backgroundRepeat="no-repeat"; menu2.style.color="#b6241f"; }else{ menu2_hover.style.display="none"; menu2.style.backgroundImage="url(images/buttom_hover.jpg)"; menu2.style.backgroundRepeat="no-repeat"; menu2.style.color="#fff"; } count_menu2++; } var count_menu3=0; $id("menu3").onclick = function(){ var menu3=$id("menu3"); var menu3_hover=$id("menu3_hover"); if(count_menu3%2==0){ menu3_hover.style.display="block"; menu3.style.backgroundImage="url(images/buttom.jpg)"; menu3.style.backgroundRepeat="no-repeat"; menu3.style.color="#b6241f"; }else{ menu3_hover.style.display="none"; menu3.style.backgroundImage="url(images/buttom_hover.jpg)"; menu3.style.backgroundRepeat="no-repeat"; menu3.style.color="#fff"; } count_menu3++; } var count_menu4=0; $id("menu4").onclick = function(){ var menu4=$id("menu4"); var menu4_hover=$id("menu4_hover"); if(count_menu4%2==0){ menu4_hover.style.display="block"; menu4.style.backgroundImage="url(images/buttom.jpg)"; menu4.style.backgroundRepeat="no-repeat"; menu4.style.color="#b6241f"; }else{ menu4_hover.style.display="none"; menu4.style.backgroundImage="url(images/buttom_hover.jpg)"; menu4.style.backgroundRepeat="no-repeat"; menu4.style.color="#fff"; } count_menu4++; } rand_img(); } var rand1 = 0; var useRand = 0; var images = new Array; images[1] = "box01.png"; images[2] = "box02.png"; images[3] = "box03.png"; images[4] = "box04.png"; function rand_img(){ var rand_img = $id("rand_img"); rand_img.style.backgroundImage="url(images/box01.png)"; var imgnum = images.length - 1; do { var randnum = Math.random(); rand1 = Math.round((imgnum - 1) * randnum) + 1; } while (rand1 == useRand); useRand = rand1; rand_img.style.backgroundImage = "url(images/"+images[useRand]+")"; } </script> </head> <body> <div class="menu"> <div class="box" id="rand_img"> <h2>后台管理系统</h2> <em><img src="../face/50/face.png" wmenuth="50" height="50" /></em> <p>管理员:chaoyi</p> <p><a href="###">打开首页</a> <a href="###">注销</a></p> </div> <h3><a id="menu1">用户管理</a></h3> <ul id="menu1_hover" style="display:none;"> <li><a href="userList.html" target="main">用户管理</a></li> <li><a href="userNews.html" target="main">新增管理员</a></li> <li><a href="userList.html" target="main">用户管理</a></li> <li><a href="userNews.html" target="main">新增管理员</a></li> <li><a href="userList.html" target="main">用户管理</a></li> <li><a href="userNews.html" target="main">新增管理员</a></li> </ul> <h3><a id="menu2">商品信息</a></h3> <ul id="menu2_hover" style="display:none;"> <li><a href="classUpdate.html" target="main">分类管理</a></li> <li><a href="classNews.html" target="main">创建分类</a></li> <li><a href="gooodsList.html" target="main">商品管理</a></li> <li><a href="gooodsNews.html" target="main">新增商品</a></li> </ul> <h3><a id="menu3">订单管理</a></h3> <ul id="menu3_hover" style="display:none;"> <li><a href="orderList.html" target="main">订单管理</a></li> </ul> <h3><a id="menu4">评论管理</a></h3> <ul id="menu4_hover"style="display:none;"> <li><a href="commentList.html" target="main">订单管理</a></li> </ul> </div> </body> </html>
效果图: