📄 13-10.txt

📁 开发王代码代码
💻 TXT
字号:
<head>
<style>
<!--
  #mainNav{
    position: absolute;
    top:2px;
    height:30px;
    width:800px;
  }
  .mainItem{
	position: absolute;
	top:2px;
	height:27px;
	width:74px;
	padding:10px 0px;
	margin:0px;
	text-align:center;
	font-size:13px;
	background-image: url(pic/tab1.gif);
	background-repeat:no-repeat;
  }
  .subItemNav{
	position: absolute;
	top: 30px;
	width: auto;
    height: auto;
	border: #48956F solid 1px;
	padding: 2px 5px 2px 5px;
	margin: 3px 13px;
	visibility: hidden;
	background-color:#61B38B;
	line-height:1.2em;
  }
  .subItemNav a:link, .subItemNav a:visited {
	font-size: 80%;
	color: #ffffff;
  }
  .subItemNav a:hover{
	color: #cccccc;
  }
-->
</style>
</head>
<body onmousemove="closeAllSubItem(event);">
<div id="headerNav">
  <div id="mainNav">
    <div id="mainItem1" class="mainItem"
             onmouseover="displaySubItem(this);">开发王</div>
	<div id="mainItem2" class="mainItem"
             onmouseover="displaySubItem(this);">最佳拍档</div>
	<div id="mainItem3" class="mainItem"
             onmouseover="displaySubItem(this);">Flash</div>
	<div id="mainItem4" class="mainItem"
             onmouseover="displaySubItem(this);">简体中文</div>
	<div id="mainItem5" class="mainItem"
             onmouseover="displaySubItem(this);">繁体中文</div>
	<div id="mainItem6" class="mainItem"
             onmouseover="displaySubItem(this);">其它语言</div>
  </div>
  <div id="subMenu" class="subItemNav"></div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script type="text/javascript">
<!--
//--------------------[01]-----------------------------------------
//初始化，
//变量totalItems表示共有多少个主菜单项
var totalItems = 6;
var subMenu1="";
subMenu1 += '<a href="#">HTML网页语言和网站开发王</a><br />';
subMenu1 += '<a href="#">CSS网页布局和呈现开发王</a><br />';
subMenu1 += '<a href="#">JavaScript动态网页开发王</a><br />';
subMenu1 += '<a href="#">ASP动态网站开发王</a><br />';
subMenu1 += '<a href="#">ASP.NET（VB）动态网站开发王</a><br />';
subMenu1 += '<a href="#">ASP.NET（C#）动态网站开发王</a><br />';
subMenu1 += '<a href="#">JSP动态网站开发王</a><br />';
subMenu1 += '<a href="#">PHP动态网站开发王</a>';
var subMenu2="";
subMenu2 += '<a href="#">HTML/CSS/JavaScript</a><br />';
subMenu2 += '<a href="#">ASP</a><br />';
subMenu2 += '<a href="#">ASP.NET(VB)</a><br />';
subMenu2 += '<a href="#">ASP.NET(C#)</a><br />';
subMenu2 += '<a href="#">JSP</a><br />';
subMenu2 += '<a href="#">PHP</a>';
var subMenu3="";
//略........................
var subMenu4="";
//略........................
var subMenu5="";
//略........................
var subMenu6="";
//略........................
function init(){ 
  //获取子菜单项div元素，并设置其内容
  var oSubItem = document.getElementById("subMenu");
  oSubItem.style.visibility = "hidden"
  oSubItem.innerHTML = "";
  for (var i=1; i<= totalItems; i++){
    //获取所有主菜单项div元素，并设置其样式，主要就是初始化定位
	var oMainItem = document.getElementById("mainItem"+i);
    oMainItem.style.left = 74*i+"px";
  }
}
init();
//--------------------[02]-----------------------------------------
//鼠标指针移到主菜单项上方，触发该函数
//该函数重新设置主菜单项和子菜单项
function displaySubItem(theobj){
  for (var i=1; i<= totalItems; i++){
	var oMainItem = document.getElementById("mainItem"+i);
	oMainItem.style.backgroundImage = "url(pic/tab1.gif)";
  }
  var oSubItem = document.getElementById("subMenu");
  var mainItemIndex = theobj.getAttribute("id").toString().substring(8);
  oSubItem.style.visibility="visible";
  oSubItem.innerHTML = eval("subMenu"+mainItemIndex);
  oSubItem.style.left = theobj.style.left;
  theobj.style.backgroundImage = "url(pic/tab2.gif)";
}				
//--------------------[03]-----------------------------------------
//鼠标指针移动时，触发该函数
//注意对象变量scopeY用于定义垂直方向上的范围，这里是从5-60
//表示主菜单项和子菜单项的范围
//该函数检查鼠标指针是否超出这个范围，从而重新设置子菜单项
function closeAllSubItem(event){
  var scopeY = {top:5,bot:200};
  window.status=event.clientY;
  if ((event.clientY<scopeY.top)||(event.clientY>scopeY.bot)){
    var oSubItem = document.getElementById("subMenu");
	oSubItem.style.visibility = "hidden";
	oSubItem.innerHTML = "";
  }
}
-->
</script>
</body>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -