<!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" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta name="author" content="RainoXu" />
<title></title>
</head>
<body>
<style type ="text/css">
/* <![CDATA[ */
body{
padding:0;
margin:0;
text-align:center;
}
#nav{
padding:0;
margin:0 auto;
width:900px;
height:29px;
list-style:none;
position:relative;
}
#nav li{
float:left;
text-align:center;
padding-left:4px;
/*IE6中讨厌的bug,在IE7和FireFox中不设宽度能自动适应内部元素的宽度,IE6不行=.=!!*/
+width:72px;
}
#nav li.highlight{
background:url("http://www.rainoina.com/raino/UserFiles/image/douban_nav/nav_bg_l.jpg") no-repeat left top;
}
#nav span a{
text-decoration:none;
font:14px tahoma;
display:block;
padding-right:9px;
padding-left:5px;
height:29px;
line-height:29px;
}
#nav li.highlight a{
background:url("http://www.rainoina.com/raino/UserFiles/image/douban_nav/nav_bg_r.jpg") no-repeat right top;
}
.subNav{
padding:0;
list-style:none;
width:900px;
height:30px;
background:#EEF9EB;
border-top:#DCF5D5;
display:none;
position:absolute;
left:0;
+left:-40px;
}
.highlight .subNav{
display:block;
}
.subNav li{
height:30px;
line-height:30px;
}
.subNav a{
text-decoration:none;
font:12px tahoma;
}
/* ]]> */
</style>
<ul id="nav">
<li>
<span><a href="###">菜单一</a></span>
<ul class="subNav">
<li><a href="###">1子菜单一</a></li>
<li><a href="###">子菜单二</a></li>
<li><a href="###">子菜单三</a></li>
<li><a href="###">子菜单四</a></li>
</ul>
</li>
<li>
<span><a href="###">菜单二</a></span>
<ul class="subNav">
<li><a href="###">2子菜单一</a></li>
<li><a href="###">子菜单二</a></li>
<li><a href="###">子菜单三</a></li>
<li><a href="###">子菜单四</a></li>
</ul>
</li>
<li>
<span><a href="###">菜单三</a></span>
<ul class="subNav">
<li><a href="###">3子菜单一</a></li>
<li><a href="###">子菜单二</a></li>
<li><a href="###">子菜单三</a></li>
<li><a href="###">子菜单四</a></li>
</ul>
</li>
<li>
<span><a href="###">菜单四</a></span>
<ul class="subNav">
<li><a href="###">4子菜单一</a></li>
<li><a href="###">子菜单二</a></li>
<li><a href="###">子菜单三</a></li>
<li><a href="###">子菜单四</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
//<![CDATA[
//定义一个控制NAV的类
function navSwap(navId){
this.obj=document.getElementById(navId);
this.subElement=[];
//把#navId的LI子节点(仅仅是子节点,不包括孙子节点)推入栈中
for (var i=0;i<this.obj.childNodes.length;i++){
if (this.obj.childNodes[i].nodeType==1){
this.subElement.push(this.obj.childNodes[i]);
}
}
if (this.subElement.length>0){
//首先将第一个标签选项高亮
this.subElement[0].className="highlight";
for (var i=0;i<this.subElement.length;i++){
//得到各个<span/>中的<a/>节点
var tagNode=this.subElement[i].getElementsByTagName("span")[0].getElementsByTagName("a")[0];
//绑定事件
tagNode.onmouseover=function(){
//得到#navId下的所有li,这里得到的也有来自subNav下的li,但这不影响后面的操作
var allSubTag=document.getElementById(navId).getElementsByTagName("li");
//找到class="highlight"的li,取消它的高亮,一旦找到就跳出循环
for (var j=0;j<allSubTag.length ;j++){
if (allSubTag[j].className=="highlight"){
allSubTag[j].className="";
break;
}
}
//这里的this指向的是onmouseover时触发者<span/>中的<a/>标签,而不是类的内部成员。
this.parentNode.parentNode.className="highlight";
}
}
}
}
//生成一个控制的对象
new navSwap("nav");
//]]>
</script>
</body>
</html>
分享到:
相关推荐
js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js 菜单js ...
js菜单,菜单,菜单样式 js菜单,菜单,菜单样式
div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单
s数型菜单 js+xml菜单 js+table菜单 js+div菜单 js菜单
javascript菜单。。。。。。纯学习目的
资源名:asp.net动态js菜单源码(动态菜单+静态菜单+数据库文件) 资源类型:程序源代码 源码说明: 1.Default.aspx页面是框架,需要静态菜单显示或是动态菜单显示,设置起始页。Login页面或LoginStatic页面。 2.运行 ...
仿淘宝商城左侧JS菜单 CSS js 网站开发 WEB开发
利用javascript写的十几个菜单,老外就是强
兼容FF和IE Js右键菜单,js菜单,漂亮的Js右键导航,好用的Js右键菜单
树型菜单,一个静态菜单demo.javascript控制菜单的显示/隐藏 ,希望给新手们一个引导
Js菜单生成工具(DIV CSS菜单在线生成器),包括生成一些圆角的菜单,十分方便,用起来也十分方便。用它生成的菜单无论是在功能或是外观方面都很不错,而且兼容各大浏览器,生成的菜单你可直接复制代码文件就可使用...
javascript 菜单特效
JavaScript 菜单!树形菜单,仿QQ菜单,折叠式菜单! 都能够运行,非常好!
js菜单 鼠标经过折叠/滑动菜单 js特效
js菜单 动态显示和关闭 js菜单 动态显示和关闭 js菜单 动态显示和关闭
一个很不错的Js菜单生成工具 生成由Js和Css组成的菜单。非常不错
js菜单模板
无限级分类js菜单 数据库无限级分类菜单和JS的结合使用
JS菜单js menu01.htmlJS菜单js menu01.htmlJS菜单js menu01.htmlJS菜单js menu01.htmlJS菜单js menu01.html
一级菜单 使用javascript+css完成的菜单