js滑动门代码制作js滑动门导航鼠标滑过滑动门效果

js滑动门代码制作js滑动门导航鼠标滑过滑动门效果

1. HTML代码

<script type="text/javascript">
function setContentTab(name, curr, n) {
    for (i = 1; i <= n; i++) {
        var menu = document.getElementById(name + i);
        var cont = document.getElementById("con_" + name + "_" + i);
        menu.className = i == curr ? "current" : "";
        if (i == curr) {
            cont.style.display = "block";
        } else {
            cont.style.display = "none";
        }
    }
}
</script> 
<div id="menu_out">
	<div id="menu_in">
		<div id="menu">
			<ul id="nav">
				<li><a href="https://www.51qianduan.com/">51前端</a></li>
				<li class="menu_line"></li>
				<li><a href="https://www.51qianduan.com/">51前端</a></li>
				<li class="menu_line"></li>
				<li><a href="https://www.51qianduan.com/">51前端</a></li>
				<li class="menu_line"></li>
				<li><a href="https://www.51qianduan.com/">51前端</a></li>
				<li class="menu_line"></li>
				<li><a href="https://www.51qianduan.com/">51前端</a></li>
				<li class="menu_line"></li>
				<li><a href="https://www.51qianduan.com/">51前端</a></li>				
			</ul><!--nav end-->
			<div id="menu_con">
				<div id="con_one_1" style="display:block">
					<ul>
						<li>jsfoot 网页特效主要有jquery 特效 js特效 flash特效 div+css教程 html5教程</li>
					</ul>
				</div> 
				<div id="con_one_2" style="display:none">
					<ul>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
					</ul>
				</div>
				<div id="con_one_3" style="display:none">
					<ul>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
					</ul>
				</div>
				<div id="con_one_4" style="display:none">
					<ul>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
					</ul>
				</div>
				<div id="con_one_5" style="display:none">
					<ul>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
					</ul>
				</div>
				<div id="con_one_6" style="display:none">
					<ul>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
						<li class="menu_line2"></li>
						<li><a href="https://www.51qianduan.com/">51前端</a></li>
					</ul>
				</div>
			</div><!--menu_con end-->
		</div><!--menu end-->
	</div>
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到