横向导航二级菜单

来源:互联网 发布:用java输出等腰三角形 编辑:程序博客网 时间:2024/04/27 02:36
改编
鼠标指向显示二级菜单,可以横向居中显示

<!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=gb2312" />
<title>无标题文档</title>
<script language="Javascript" type="text/Javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==truewith (navigator)
  
{
    
if ((appName=="Netscape")&&(parseInt(appVersion)==4))
    
{
      document.MM_pgW
=innerWidth;
      document.MM_pgH
=innerHeight;
      onresize
=MM_reloadPage;
    }

  }

  
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}

MM_reloadPage(
true);

function MM_findObj(n, d) //v4.01
  var p,i,x;
  
if (!d) d = document;
  
if ((p=n.indexOf("?")) > 0 && parent.frames.length )
  
{
    d 
= parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
  }

  
if (!(x=d[n]) && d.all) x=d.all[n]; for ( i=0!&& i<d.forms.length; i++) x = d.forms[i][n];
  
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  
if(!&& d.getElementById) x=d.getElementById(n);
  
return x;
}

function MM_setTextOfLayer(objName,x,newText) //v4.01
  if ((obj=MM_findObj(objName))!=nullwith (obj)
    
if (document.layers)
    
{
      document.write( unescape(newText) );
      document.close();
    }

    
else innerHTML = unescape(newText);
}

function SetLayerText(oldLayer, newLayer) {
  
if ((objOld=MM_findObj(oldLayer))==null)
  
{
    
//alert("no older layer: " + olderLayer);
    return false;
  }

  
if ((objNew=MM_findObj(newLayer))!=null)
  
{
    objOld.innerHTML 
= unescape(objNew.innerHTML);
  }

  
else
  
{
    
//alert("no new layer " + newLayer);
    return false;
  }

}

//-->
</script>
<style type="text/css">
<!--
body 
{
text-align
:center;
font
: 12px "宋体", serif;
}

#nav 
{
background
:#eee;
width
:770px;
margin
:0 auto;
position
:relative;
line-height
:2em;
height
:2em;
}

#mainNav 
{
margin
:0 auto;
width
:720px;
}

#mainNav li 
{
list-style
:none;
display
:inline;
float
:left;
width
:90px;
}

.hiddenLayer 
{
position
: absolute;
z-index
: auto;
visibility
: hidden;
width
: 700px;
top
:2em;
}

-->
</style>
</head>

<body onload="SetLayerText('layerNav', 'layerDefault')">
<div id="nav" onclick="SetLayerText('layerNav', 'layerDefault');MM_setTextOfLayer('layerNav2','','')">
  
<div id="brief" class="hiddenLayer">
    
<href="news_show.php?id=1" target="_blank">学校简介</a> | <href="news_show.php?id=2" target="_blank">历史沿革</a> | <href="news_show.php?id=3" target="_blank">历任领导</a> | <href="news_show.php?id=4" target="_blank">现任领导</a>
  
</div>
  
<div id="institution" class="hiddenLayer">
    
<href="html/institution_party.htm" target="_blank">党群机构</a> | <href="html/institution_admin.htm" target="_blank">行政机构</a> | <href="html/institution_college.htm" target="_blank">院系设置</a>
  
</div>
  
<div id="categories" class="hiddenLayer">
    
<href="news_show.php?id=3909" target="_blank">重点学科</a> | <href="news_show.php?id=3875" target="_blank">重点实验室</a> | <href="news_show.php?id=3908" target="_blank">工程技术中心</a> | <href="news_show.php?id=11884" target="_blank">人文社科研究基地</a> | <href="news_show.php?id=11883" target="_blank">强化建设</a>
  
</div>
  
<div id="education" class="hiddenLayer">
    
<href="news_show.php?id=9" target="_blank">本专科教育</a> | <href="news_show.php?id=10" target="_blank">研究生教育</a> | <href="http://www.sdkdcj.net.cn/cjcj/" target="_blank">成人教育</a> | <href="news_show.php?id=12" target="_blank">重点学科</a> | <href="http://zs.sdkd.net.cn/" target="_blank">本专科招生</a> | <href="http://career.sdkd.net.cn/" target="_blank">学生就业</a>
  
</div>
  
<div id="job" class="hiddenLayer">
    
<href="news_show.php?id=11166" target="_blank">泰山学者招聘</a> | <title="" href="news_show.php?id=6315" target=_blank>引进优秀人才政策</a> | <title="" href="news_show.php?id=6316" target=_blank>研究生招聘</a> | <href="news_show.php?id=11186" target="_blank">辅导员招聘</a>
  
</div>
  
<div id="research" class="hiddenLayer">
    
<href="news_show.php?id=15" target="_blank">科研概况</a> | <href="news_show.php?id=18" target="_blank">科研优势</a> | <href="news_show.php?id=17" target="_blank">科研项目</a> | <href="news_show.php?id=11885" target="_blank">科研成果</a> | <href="news_show.php?id=11880" target="_blank">科研奖励</a>
  
</div>
  
<div id="cooperation" class="hiddenLayer"></div>
  
<div id="LayerDefault" style="position:absolute; z-index:100;" class="hiddenLayer"></div>
  
<div id="teacher" class="hiddenLayer">
    
<href="news_show.php?id=23" target="_blank">院士风采</a> | <href="news_show.php?id=3910" target="_blank">泰山学者</a> | <href="news_show.php?id=24" target="_blank">教师风采</a> | <href="news_show.php?id=25" target="_blank">博士生导师</a><href="html/teacher_doctor.htm" target="_blank"></a>
  
</div>
  
<div id="zhaosheng" class="hiddenLayer">
    
<href="http://zs.sdkd.net.cn/" target="_blank">本专科招生</a> | <href="http://yjsy.sdkd.net.cn/" target="_blank">研究生招生</a> | <href="http://www.sdkdcj.net.cn/cjcj/zsxx/Index.asp" target="_blank">成人招生</a></div>
  
<div id="xiaoqu" class="hiddenLayer">
    
<href="http://ta.sdust.edu.cn/" target="_blank">泰安校区</a> | <href="http://www.ustsd.edu.cn/" target="_blank">济南校区</a>
  
</div>
  
<ul id="mainNav">
    
<li><href="javascript:;" onmouseover="SetLayerText('layerNav', 'brief')">学校概况</a></li>
    
<li><href="news_main.php?partid=60" target="_blank" onmouseover="MM_setTextOfLayer('layerNav','','')">校园风光</a></li>
    
<li><href="news_show.php?id=7" target="_blank" onmouseover="SetLayerText('layerNav', 'institution')">机构设置</a></li>
    
<li><href="javascript:;" onmouseover="SetLayerText('layerNav','categories')">学科建设</a></li>
    
<li><href="javascript:;" onmouseover="SetLayerText('layerNav', 'research')">科学研究</a></li>
    
<li><href="javascript:;" onmouseover="SetLayerText('layerNav', 'teacher')">师资队伍</a></li>
    
<li><href="javascript:;" onmouseover="SetLayerText('layerNav', 'education')">人才培养</a></li>
    
<li><href="http://www.sdkd.net.cn/news_main.php?partid=10" onmouseover="SetLayerText('layerNav', 'job')">人才招聘</a></li>
  
</ul>
</div>
<div id="layerNav"></div>
<div id="layerNav2"></div>
</body>
</html>
原创粉丝点击