现在这种导航菜单效果好像很流行哦，今天又有一个朋友问我会不会做这种效果。借此机会，制作了该教程，希望对朋友们能有所帮助。
该效果制作使用了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" onmouseover="javascript:doClick(this)"><a href="/">首 页</a></span> </li> <li><span class="nav_link" id="nav2" onmouseover="javascript:doClick(this)"><a href="/Webmaster/Index.html">站长在线</a></span> </li> <li><span class="nav_link" id="nav3" onmouseover="javascript:doClick(this)"><a href="/Webbiz/Index.html">网站运营</a></span> </li> <li><span class="nav_link" id="nav4" onmouseover="javascript:doClick(this)"><a href="/Union/Index.html">联盟资讯</a></span> </li> <li><span class="nav_link" id="nav5" onmouseover="javascript:doClick(this)"><a href="/News/Index.html">新闻资讯</a></span> </li> <li><span class="nav_link" id="nav6" onmouseover="javascript:doClick(this)"><a href="/Design/Index.html">设计在线</a></span> </li> <li><span class="nav_link" id="nav7" onmouseover="javascript:doClick(this)"><a href="/Program/Index.html">网络编程</a></span> </li> <li><span class="nav_link" id="nav8" onmouseover="javascript:doClick(this)"><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> |
以下是代码片段：
/*基本样式*/
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;
}
以下是代码片段：
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";
}
}
}
您也可以直接下载完整代码包：滑动菜单效果代码
技术支持，永远止境
中共有相关主题 篇