一个简洁的js+css滑动导航菜单滑动切换特效，可自己选择鼠标经过切换或点击切换，根据自己的需求修改即可。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>实用js+css滑动门导航菜单切换特效_武鸣人</title>
<style type="text/css">
*{margin:0;padding:0;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul{list-style:none;}
.menu_wuming_ren{background:#333;float:left;padding-top:2px;width:100%;}
.menu_wuming_ren li{float:left;}
.menu_wuming_ren li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;}
.menu_wuming_ren .this_wuming a {background:#fff;color:#000;}
.sub_wuming{clear:both;border:2px solid #000;border-top:none;background:#fff;}
.sub_wuming ul{display:none;padding:15px;line-height:180%;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<ul class="menu_wuming_ren">
<li class="this_wuming"><a href="javascript:void(0)">武鸣人一号菜单</a></li>
<li><a href="javascript:void(0)">武鸣人二号菜单</a></li>
<li><a href="javascript:void(0)">武鸣人三号菜单</a></li>
<li><a href="javascript:void(0)">武鸣人四号菜单</a></li>
</ul>
<div class="sub_wuming">
<ul style="display:block;">
<li><a href="https://www.wuming.ren">武鸣人子菜单1</a></li>
<li><a href="https://www.wuming.ren">武鸣人子菜单2</a></li>
<li><a href="https://www.wuming.ren">武鸣人子菜单3</a></li>
<li><a href="https://www.wuming.ren">武鸣人子菜单4</a></li>
</ul>
<ul>
<li><a href="https://www.wuming.ren">武鸣人子菜单一</a></li>
<li><a href="https://www.wuming.ren">武鸣人子菜单二</a></li>
<li><a href="https://www.wuming.ren">武鸣人子菜单三</a></li>
<li><a href="https://www.wuming.ren">武鸣人子菜单四</a></li>
</ul>
<ul>
<li><a href="https://www.wuming.ren">武鸣人子菜单一</a></li>
<li><a href="https://www.wuming.ren">武鸣人子菜单二</a></li>
<li><a href="https://www.wuming.ren">武鸣人子菜单三</a></li>
<li><a href="https://www.wuming.ren">武鸣人子菜单四</a></li>
</ul>
<ul>
<li><a href="https://www.wuming.ren">武鸣人子菜单一</a></li>
<li><a href="https://www.wuming.ren">武鸣人子菜单二</a></li>
<li><a href="https://www.wuming.ren">武鸣人子菜单三</a></li>
<li><a href="https://www.wuming.ren">武鸣人子菜单四</a></li>
</ul>
</div>
<script>
function $_class(name){
var elements = document.getElementsByTagName("*");
for(s=0;s<elements.length;s++){
if(elements[s].className==name){
return elements[s];
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//tab effects
var tabList = $_class("menu_wuming_ren").getElementsByTagName("li")
tabCon = $_class("sub_wuming").getElementsByTagName("ul");
for(i=0;i<tabList.length;i++){
(function(){
var t = i;
tabList[t].onmouseover = function(){
for(o=0;o<tabCon.length;o++){
tabCon[o].style.display = "none";
tabList[o].className = "";
if(t==o){
this.className = "this_wuming";
tabCon[o].style.display = "block";
}
}
}
})()
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处