WEB开发网资讯源码教程软件素材CMS中心工具社区
开发学院网页设计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";
　}
 }
}

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

　  技术支持，永远止境

Tags：滑动 导航 菜单

编辑录入：coldstar　[复制链接] [打 印]
[]
  • 好
  • 好的评价　如果觉得好，就请您
      0%(0)
  • 差
  • 差的评价　如果觉得差，就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读