下午朋友说要一个导航,类似于豆瓣的，但又希望是能动态切换的~~于是就帮他做了一个~效果如下：
提示：运行时需要载入jQuery库文件：
http://www.rainoina.com/raino/userfiles/File/jsClass/jquery.js
用到的两张图片
1、nav_bg_l.jpg
2、nav_bg_r.jpg
<!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" />
<script type="text/javascript" src="http://www.rainoina.com/raino/userfiles/File/jsClass/jquery.js"></script>
<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;
+width:72px; //IE6中讨厌的bug，在IE7和FireFox中不设宽度能自动适应内部元素的宽度，IE6不行=.=!!
}
#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=$("#"+navId);
$($("#"+navId).children("li")[0]).addClass("highlight");
$("#"+navId+">li>span>a").mouseover(function(){
$($("#"+navId).children("li")).removeClass("highlight");
$(this).parent().parent().addClass("highlight");
});
}
//生成一个控制的对象
new navSwap("nav");
//]]>
</script>
</body>
</html>