开发学院网页设计 DivCss 滑动导航菜单制作：鼠标滑过显示相应的二级菜单阅读

滑动导航菜单制作：鼠标滑过显示相应的二级菜单

　2007-11-17 17:34:02　来源：WEB开发网　　　

核心提示： 现在这种导航菜单效果好像很流行哦，今天又有一个朋友问我会不会做这种效果，滑动导航菜单制作：鼠标滑过显示相应的二级菜单，借此机会，制作了该教程，使用JS实现滑动，最终效果演示：点击查看滑动菜单效果相关代码如下：主代码index.html以下是代码片段：<!DOCTYPE html PUBLIC

　现在这种导航菜单效果好像很流行哦，今天又有一个朋友问我会不会做这种效果。借此机会，制作了该教程，希望对朋友们能有所帮助。

　该效果制作使用了DIV+CSS，使用JS实现滑动。

　最终效果演示：点击查看滑动菜单效果

　相关代码如下：

　主代码index.html

以下是代码片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml(标准化越来越近了)ns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS滑动菜单演示 - WEB开发网</title>
<link href="/css/index.css" type="text/css" rel="stylesheet" />
<script src="/js/index.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<div id="header">
<div class="nav_main">
　　　　<ul>
　　　　　　<li><span class="nav_current" id="nav1" ><a href="/">首页</a></span> </li>
　　　　　　<li><span class="nav_link" id="nav2" ><a href="/Webmaster/Index.html">站长在线</a></span> </li>
　　　　　　<li><span class="nav_link" id="nav3" ><a href="/Webbiz/Index.html">网站运营</a></span> </li>
　　　　　　<li><span class="nav_link" id="nav4" ><a href="/Union/Index.html">联盟资讯</a></span> </li>
　　　　　　<li><span class="nav_link" id="nav5" ><a href="/News/Index.html">新闻资讯</a></span> </li>
　　　　　　<li><span class="nav_link" id="nav6" ><a href="/Design/Index.html">设计在线</a></span> </li>
　　　　　　<li><span class="nav_link" id="nav7" ><a href="/Program/Index.html">网络编程</a></span> </li>
　　　　　　<li><span class="nav_link" id="nav8" ><a href="/Server/Index.html">服务器</a></span> </li>
　　　　</ul>
</div>
<div class="sub_box_de" id="sub1">
　<ul>
　 <li><strong>滑动二级默认显示：</strong>指定首页时显示内容，也是默认显示的导航内容</li>
　</ul>
</div>
<div class="sub_box" id="sub2">
　<ul>
　 <li><a href="/Webmaster/RecSite/Index.html">好站推荐</a>　| </li>
　　　　　　<li><a href="/Webmaster/Gather/Index.html">站长聚会</a>　| </li>
　　　　　　<li><a href="/Webmaster/Visit/Index.html">站长访谈</a>　| </li>
　　　　　　<li><a href="/Webmaster/Club/Index.html">站长茶馆</a>　| </li>
　　　　　　<li><a href="/Webmaster/Topsite/Index.html">网站排行</a> </li>
　　　　</ul>
</div>
<div class="sub_box" id="sub3">
　　　　<ul>
　　　　　　<li><a href="/Webbiz/Exp/Index.html">建站经验</a>　| </li>
　　　　　　<li><a href="/Webbiz/BizPlan/Index.html">策划盈利</a>　| </li>
　　　　　　<li><a href="/Webbiz/Seo/Index.html">搜索优化</a>　| </li>
　　　　　　<li><a href="/Webbiz/Promot/Index.html">网站推广</a>　| </li>
　　　　　　<li><a href="/Webbiz/Free/Index.html">免费资源</a> </li>
　　　　</ul>
</div>
<div class="sub_box" id="sub4">
　　　　<ul>
　　　　　　<li><a href="/Union/News/Index.html">联盟新闻</a>　| </li>
　　　　　　<li><a href="/Union/Intro/Index.html">联盟介绍</a>　| </li>
　　　　　　<li><a href="/Union/Comment/Index.html">联盟点评</a>　| </li>
　　　　　　<li><a href="/Union/Skill/Index.html">网赚技巧</a> </li>
　　　　</ul>
</div>
<div class="sub_box" id="sub5">
　　　　<ul>
　　　　　　<li><a href="/News/It/Index.html">业界动态</a>　| </li>
　　　　　　<li><a href="/News/Invest/Index.html">收购融资</a>　| </li>
　　　　　　<li><a href="/News/Portals/Index.html">门户动态</a>　| </li>
　　　　　　<li><a href="/News/Search/Index.html">搜索引擎</a>　| </li>
　　　　　　<li><a href="/News/Game/Index.html">网络游戏</a>　| </li>
　　　　　　<li><a href="/News/Biz/Index.html">电子商务</a>　| </li>
　　　　　　<li><a href="/News/Media/Index.html">广告传媒</a>　| </li>
　　　　　　<li><a href="/News/Soft/Index.html">厂商开发</a> </li>
　　　　</ul>
</div>
<div class="sub_box" id="sub6">
　　　　<ul>
　　　　　　<li><a href="/Design/Coolsite/Index.html">酷站推荐</a>　| </li>
　　　　　　<li><a href="/Design/Pages/Index.html">网页设计</a>　| </li>
　　　　　　<li><a href="/Design/Rules/Index.html">WEB标准</a>　| </li>
　　　　　　<li><a href="/Design/Video/Index.html">视频处理</a>　| </li>
　　　　　　<li><a href="/Design/Activity/Index.html">设计活动</a> </li>
　　　　</ul>
</div>
<div class="sub_box" id="sub7">
　　　　<ul>
　　　　　　<li><a href="/Program/Asp/Index.html">Asp编程</a>　| </li>
　　　　　　<li><a href="/Program/Php/Index.html">Php编程</a>　| </li>
　　　　　　<li><a href="/Program/.Net/Index.html">.Net编程</a>　| </li>
　　　　　　<li><a href="/Program/xml(标准化越来越近了)/Index.html">xml(标准化越来越近了)编程</a>　| </li>
　　　　　　<li><a href="/Program/Access/Index.html">Access</a>　| </li>
　　　　　　<li><a href="/Program/mssql(WINDOWS平台上强大的数据库平台)/Index.html">mssql(WINDOWS平台上强大的数据库平台)</a>　| </li>
　　　　　　<li><a href="/Program/MySQL(和PHP搭配之最佳组合)/Index.html">MySQL(和PHP搭配之最佳组合)</a> </li>
　　　　</ul>
</div>
<div class="sub_box" id="sub8">
　　　　<ul>
　　　　　　<li><a href="/Server/Web/Index.html">Web服务器</a>　| </li>
　　　　　　<li><a href="/Server/Ftp/Index.html">Ftp服务器</a>　| </li>
　　　　　　<li><a href="/Server/Mail/Index.html">Mail服务器</a>　| </li>
　　　　　　<li><a href="/Server/Dns/Index.html">Dns服务器</a>　| </li>
　　　　　　<li><a href="/Server/Win/Index.html">Win服务器</a>　| </li>
　　　　　　<li><a href="/Server/Linux/Index.html">Linux服务器</a>　| </li>
　　　　　　<li><a href="/Server/Safe/Index.html">安全防护</a> </li>
　　　　</ul>
</div>
</div>
<div id="content">
<div id="footer">
<ul><li>© 2007 <a href="http://www.cncms.com.cn" title="WEB开发网">Web Park</a></li></ul>
</div>
</div>
</body>
</html>

　 CSS文件 index.css

以下是代码片段：
/*基本样式*/
body{
font-size: 12px;
background: #ffffff;
color: #101010;
font-family: "宋体";
}
body, div, ul, li, span, a{
margin: 0;
padding: 0;
border: 0;
}
ul, li{
list-style:none;
}
a{
color:#333333; text-decoration:none;
}
a:link{
color:#333333; text-decoration:none;
}
a:visited{
color:#333333; text-decoration:none;
}
a:hover{
color:#BC2931;
}
#content{
width:960px; margin:auto;
}
#header{
}
#header ul,
#header ul li{
display:inline;
}
.nav_main{
margin-bottom:5px;
width:100%;
text-align:center;
border-bottom:2px solid #F30;
}
.nav_main ul li{
float: left;
}
.nav_current{
background:#FCEBA5;
display: block;
float: left;
font-size: 14px;
font-weight: bold;
height: 21px;
padding-top: 8px;
text-decoration: none;
width: 92px;
}
.nav_link{
background:#CAE5FF;
display: block;
float: left;
font-size: 14px;
font-weight: bold;
height: 21px;
padding-top: 8px;
text-decoration: none;
width: 92px;
}
.sub_box_de{
float:left;
}
.sub_box{
float:left;
display:none;
}
#footer{
margin-top:66px;
text-align:center;
}

　 JS代码 index.js

以下是代码片段：
function isMatch(str1,str2){
var index = str1.indexOf(str2);
if(index==-1) return false;
return true;
}
function ResumeError(){
return true;
}
window.onerror = ResumeError;
function doClick(o){
o.className="nav_current";
var j;
var id;
var e;
for(var i=1;i<=8;i++){
　id ="nav"+i;
　j = document.getElementById(id);
　e = document.getElementById("sub"+i);
　if(id != o.id){
　 j.className="nav_link";
　 e.style.display = "none";
　}else{
　 e.style.display = "block";
　}
}
}

　您也可以直接下载完整代码包：滑动菜单效果代码

　技术支持，永远止境