<!--Author http://blog.csdn.net/eagleking012 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Demo System
</title>
<link href="css/header.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="jquery/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery/popup_layer.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".mainNav a").mouseover(function(){
$(".mainNav a").attr("class","");
$("#"+this.id).attr("class","actived");
var currentMenuNo = parseInt(this.id.substring(1));
$(".secondNav").show();
$(".secondNav div").each(function(){
$(this).hide();
$("#subNav"+currentMenuNo).show();
});
window.setTimeout(hideToolBar,10000);
});
var sysB = $("#headTitle");
var offset = sysB.offset();
//左侧菜单时使用
new PopupLayer({trigger:"#n-9",eventType:"mouseover",popupBlk:"#blk1",closeBtn:"#close1",offsets:{x:offset.left-10,y:offset.top},useFx:true});
$("#n2").trigger("mouseover");
});
function hideToolBar(){
$(".secondNav").slideUp('slow');
tType = 1;
//switchMenuTool();
}
function hideThirdBar(){
$("a[level]").each(function(){
$(this).hide();
});
}
function showThirdMenu(parentId){
for(i=0;i<document.getElementsByName(parentId).length;i++){
$("#"+document.getElementsByName(parentId)[i].id).each(function(){
$(this).show();
});
}
//window.setTimeout(hideThirdBar,10000);
}
var tType = 1;
function switchMenuTool(){
if(tType == '1'){
$("#leftBar").hide();
$("#menuTool").hide(500);
$("#mainFrame").attr("class","mainFramCssMax");
$("#rightBar").show();
tType = 2;
}else{
$("#rightBar").hide();
$("#menuTool").show(300);
$("#mainFrame").attr("class","mainFramCssMin");
$("#leftBar").show();
tType = 1;
}
}
var lastMenuId = '';
var lastNum = 0;
function showSecondMenu(menuId,num){
$(".secMenu").each(function(){
$(this).hide();
});
$(".thirdMenu").each(function(){
$(this).hide();
});
for(i=0;i<num;i++){
$("#"+menuId+"-"+i).show();
}
if(lastMenuId != '' && (num+lastNum)<10){
for(i=0;i<lastNum;i++){
$("#"+lastMenuId+"-"+i).show();
}
}
lastMenuId = menuId;
lastNum = num;
}
function showThirdMenu(menuId,num){
$(".thirdMenu").each(function(){
$(this).hide();
});
for(i=0;i<num;i++){
$("#"+menuId+"-"+i).show();
}
}
</script>
</head>
<body>
<div class="header">
<div class="padder">
<div class="nav">
<div class="navLaftBg">
<div class="navRightBg">
<!-- 左侧菜单时打开 -->
<div id=headTitle>
<DIV style="DISPLAY: none" id=blk1 class=blk>
<DIV class=sList id=close1>
<UL>
<LI><A href="#" onclick='switchRole("1", "Management Subsystem")'>Management Subsystem</A> </LI>
<LI><A href="#" onclick='switchRole("3", "User Subsystem")'>User Subsystem</A> </LI>
<LI><A href="#" onclick='switchRole("8", "Device Subsystem")'>Device Subsystem</A> </LI>
<LI><A href="#" onclick='switchRole("20", "Task Subsystem")'>Task Subsystem</A> </LI>
<LI><A href="#" onclick='switchRole("21", "Msg Subsystem")'>Msg Subsystem</A> </LI>
</UL>
</DIV>
</DIV>
<a href="#" onclick="javascript:document.location='jumpToMain.do?cmd=selectSystem';" id="n-9">Switch System</a>
<a href="#" id="n-7" onclick="doLogout();"> LogOff </a><!--注 销 -->
<a href="#" id="n-6" onclick="doLogoff();"> LogOut </a><!-- 安全退出 -->
</div>
<div id=hederTimag><img src="css/title.png" height="28px" width="500px"/> </div>
<div class="mainNav" style="display: none"><!-- 左侧菜单时以下隐藏 -->
<a href="#" onclick="hideToolBar();" id="n-3">Switch System</a>
<a href="#" id="n-1" onclick="doLogout();"> LogOff </a><!--注 销 -->
<a href="#" id="n-2" onclick="doLogoff();"> LogOut </a><!-- 安全退出 -->
</div>
</div>
</div>
</div>
<div class="secondNav" style="display: none">
<div id="subNav1" style="display: none;padding-left:50px;">
<a href="javascript:void(0);" onclick='javascript:modifyPasswd();' class="actived">
Change Password
</a>
<a href="javascript:void(0);" onclick='javascript:openWindow("personalInfo.do?actionRelatMenuId=104",680, 450, "users");' class="actived">
Edit Profile
</a>
</div>
<div id="subNav-3" style="display:none;padding-left:300px;">
<a href="#" onclick='switchRole("1", "Management Subsystem")' class="actived">Management Subsystem</a>
<a href="#" onclick='switchRole("3", "User Subsystem")' class="actived">User Subsystem</a>
<a href="#" onclick='switchRole("8", "Device Subsystem")' class="actived">Device Subsystem</a>
<a href="#" onclick='switchRole("20", "Task Subsystem")' class="actived">Task Subsystem</a>
<a href="#" onclick='switchRole("21", "Msg Subsystem")' class="actived">Msg Subsystem</a>
</div>
<div id="subNav-1" style="display:none;padding-left:300px;">
<a href="#" onclick="doLogout();" class="actived"><!-- 退出当前用户,并转到登录页面！ -->Exit the current user, and then move on to login page!</a>
</div>
<div id="subNav-2" style="display:none;padding-left:350px;">
<a href="#" onclick="doLogoff();" class="actived"><!-- 退出当前用户,并关闭页面！ -->Exit the current user, and shut down the page!</a>
</div>
</div>
</div>
</div>
<div id=toolAndContent onclick="switchMenuTool(); event.cancelBubble = true;">
<div id=menuTool>
<div id=menuSystem>
</div>
<div class="mainMenu" id="m1" onclick="showSecondMenu('m1',2);event.cancelBubble = true;"><!-- 一级菜单 -->
Personal Settings
</div>
<div class="secMenu" id="m1-0"><!-- 二级菜单 -->
<a href="#" onclick='javascript:modifyPasswd();event.cancelBubble = true;'> Change Password</a>
</div>
<div class="secMenu" id="m1-1"><!-- 二级菜单 -->
<a href="#" onclick='javascript:openWindow("personalInfo.do?actionRelatMenuId=104",680, 450, "users");event.cancelBubble = true;'> Edit Profile</a>
</div>
</div>
<div id="middleTool" onclick="switchMenuTool(); event.cancelBubble = true;">
<img id=leftBar src="css/pic23.gif" width="9" height="90" alt="向左打开" border="0" />
<img id=rightBar src="css/pic24.gif" width="9" height="90" alt="向右打开" border="0" style="display:none" />
</div>
<div id="contentDiv" onclick="switchMenuTool(); event.cancelBubble = true ;">
<iframe id=mainFrame name="mainFrame" src="http://www.baidu.com" class="mainFramCssMin"></iframe>
</div>
</div>
</body>
</html>
DIV CSS iframe 实现的主页布局
4星 · 超过85%的资源 需积分: 50 85 浏览量
2011-09-22
22:41:17
上传
评论 6
收藏 49KB ZIP 举报 
Div&左侧菜单栏.zip （14个子文件） 
css 
bg_sprites.gif 4KB
header.css 6KB header_bg.gif 185B icons.gif 4KB bg_toolbar.gif 873B main.css 757B title.gif 142B vertical.gif 646B pic24.gif 312B pic23.gif 308B
title.png 870B main.htm 7KB jquery popup_layer.js 6KB jquery-1.5.2.min.js 84KB
- 1
- 2
- 3
- 4
- 5
- 6
前往页