横向导航二级菜单

原创 2007年09月18日 19:59:00
改编
鼠标指向显示二级菜单,可以横向居中显示

<!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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

横向二级导航菜单(html+css+js)

/*基本信息*/ body { margin: 0; padding: 0; background: #FFFFFF; } /*导航*/ #navigation { f...
  • u011845833
  • u011845833
  • 2014年05月16日 17:22
  • 2376

横向二级下拉菜单

横向二级下拉菜单 *{ margin:0; padding:0; } body { ...
  • cyl101816
  • cyl101816
  • 2017年02月23日 15:16
  • 653

div+css 纵向导航菜单及二级菜单弹出

1) 纵向导航菜单 body { font-family: Verdana;font-size: 12px; line-height: 1.5; } a { color: #000;text-...
  • janefir
  • janefir
  • 2013年11月26日 11:58
  • 2699

jquery顶部固定二级导航菜单

body{ font-family: "宋体"; font-size: 14px; color: #666666; background:#f2f2f2 url(images/bg.gif) ...
  • chunxiaqiudong5
  • chunxiaqiudong5
  • 2016年11月05日 15:08
  • 595

JS+CSS全力打造的一级横向滑动,二级竖向下拉综合菜单

【荐】JS+CSS全力打造的一级横向滑动,二级竖向下拉综合菜单_网页代码站(www.webdm.cn) ...
  • GoodShot
  • GoodShot
  • 2012年08月30日 18:54
  • 3363

Android中实现二级菜单

公司项目里的需求,商城的左下角,要求有分类的Menu。 看图: 1.当点击一级分类,修改二级菜单里面的内容。 2.同时一级菜单里的背景变为右边有白色三角的背景。 3.当点击...
  • u013352090
  • u013352090
  • 2014年03月10日 18:27
  • 2555

DIV+CSS实现的横向二级菜单

 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">Horizontal D...
  • MPU
  • MPU
  • 2007年11月22日 12:45
  • 2258

模仿京东商城首页多级导航菜单

京东商城导航菜单 *{ padding: 0; margin:0; font-family: "microsoft yahei"; font-size: 14px; } ...
  • sinat_36146776
  • sinat_36146776
  • 2016年09月17日 20:37
  • 623

asp.net二级菜单导航 实例

.aspx代码如下: $(document).ready(function () { $("a.m0").mouse...
  • yayun0516
  • yayun0516
  • 2014年12月08日 22:07
  • 2516

Android两级导航菜单栏的实现--FragmentTabHost嵌套FragmentTabHost

开发APP,有时候一层Tab导航菜单栏并不能满足业务需求,这时候就需要二级Tab导航菜单栏了。接下来的两篇博客实现的都是这种效果,只是采用的方式不同而已。         本篇实现的类似Insta...
  • yalinfendou
  • yalinfendou
  • 2015年03月29日 13:37
  • 2363
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:横向导航二级菜单
举报原因:
原因补充:

(最多只允许输入30个字)