JS CSS滑动门菜单特效

 首页 > 网页特效 > 层和布局 > JS CSS滑动门菜单特效

JS CSS滑动门菜单特效

 2018-07-02  296  收藏  0 赞一个  0 真差劲  0 去评论

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" lang="zh_CN" xml:lang="zh_CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var $=function(a,b){
	var ID = document.getElementById(a);
	var OBJ= (b)?ID.getElementsByTagName(b):ID;
	return OBJ
}
var n=0;
var tab = function(MENU,BODY){
	var l = MENU.length;
	for(var i=0;i<l;i++){
		MENU[i].onmouseover=function(a){
			return function(){
				MENU[n].className="label"
				BODY[n].style.display = "none";
				MENU[a].className="label label-selected";
				BODY[a].style.display = "block";
				n=a;
			}
		}(i);
	}
}
</script>
<style>
body{font-family: "微软雅黑","SimSun","宋体","Arial Narrow";}
#header,#main,#footer{width: 1050px;background: #F1F9D9;margin: 5px auto;}
#header{height: 50px;}
#main{height: auto;}
#footer{height: 50px;}
#menu{height: 36px;padding: 2px 0 0 0;}
li{list-style: none;cursor: pointer;}
.category{margin: 0;height: 35px;border-bottom: 1px solid #b5e2f3;text-align: center;}
.label{border: 1px solid #b5e2f3;float: left;width: 100px;height: 25px;margin: 0 3px;background: #F1FEF3;padding: 9px 0 0 0;outline: 0;-moz-border-radius: 5px 5px 0 0;}
.label-selected{background: #FFF;border-bottom: 1px solid #FFF;}
#linksContent{margin-top: -1;height: 600px;padding: 10px;border: 1px solid #b5e2f3;border-top: 0;background: #FFF;}
.link{float: left;width: 180px;display: block;margin: 10px 0;}
</style>
<title>myLinks</title>	
</head>
<body>
	<div id="container">
        <div id="header"></div>
        <div id="main">
        	<div id="menu">
            	<ul class="category">
                	<li class="label label-selected">在线学习</li>
                    <li class="label">运动休闲</li>
                    <li class="label">编程社区</li>
                    <li class="label">文化娱乐</li>
                    <li class="label">休息项目</li>
                    <li class="label">人际往来</li>
                </ul>
            </div>
            <div id="linksContent">
            	<div class="category-1" style="display:block;">
                    <ul>
                        <li class="link"><span>html学习</span></li>
                        <li class="link"><span>编译原理</span></li>
                        <li class="link"><span>人工智能</span></li>
                        <li class="link"><span>算法设计</span></li>
                    </ul>
                </div>
                <div class="category-2" style="display:none;">
                	<ul>
                        <li class="link"><span>开车</span></li>
                        <li class="link"><span>郊游</span></li>
                        <li class="link"><span>音乐</span></li>
                    </ul>
                </div>
                <div class="category-2" style="display:none;">
                	<ul>
                        <li class="link"><span>MSDN</span></li>
                        <li class="link"><span>编译原理</span></li>
                        <li class="link"><span>科幻电影</span></li>
                        <li class="link"><span>技术文档</span></li>
                    </ul>
                </div>
                <div class="category-2" style="display:none;">
                	<ul>
                    	<li class="link"><span>java学习</span></li>
                        <li class="link"><span>html学习</span></li>
                        <li class="link"><span>编译原理</span></li>
                        <li class="link"><span>人工智能</span></li>
                        <li class="link"><span>算法设计</span></li>
                    </ul>
                </div>
                <div class="category-2" style="display:none;">
                	<ul>
                        <li class="link"><span>html学习</span></li>
                        <li class="link"><span>编译原理</span></li>
                        <li class="link"><span>人工智能</span></li>
                    </ul>
                </div>
                <div class="category-2" style="display:none;">
                	<ul>
                    	<li class="link"><span>java学习</span></li>
                        <li class="link"><span>html学习</span></li>
                        <li class="link"><span>算法设计</span></li>
                    </ul>
                </div>        
            </div>
        </div>
        <div id="footer"></div>
    </div>
<script>
	tab($("menu","li"),$("linksContent","div"));
</script>


<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>♥尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

风格简单的一个JS CSS滑动门特效代码，当鼠标滑过菜单的时候，二级菜单自动切换，鼠标不需要点击，滑动门效果是个比较流行的网页菜单效果，在网上经常可看到这种菜单的身影。本菜单在火狐、IE8、Chrome下测试通过，代码兼容性还可以，自己用的化再美化一下风格。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行