JS HTML经典框架

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>&nbsp;&nbsp;<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>

效果图：

猜你喜欢