模块滑动下拉效果代码,JS代码库,德仔网

代码语言

代码分类

【JS】模块滑动下拉效果

作者:zhaminly / 发布于2013/10/24/ 389


	<!DOCTYPE html>
	<html>
	<head>
	 <meta charset="UTF-8">
	 <title></title>
	 <style type="text/css">
	 * { margin:0; padding:0; }
	 ul { list-style:none; }
	 #nav { width:500px; height:35px; margin:0 auto; font-size:13px; }
	 #nav li { float:left; width:120px; height:35px; line-height:35px; background:#000; text-align:center; }
	 #nav li a { color:#fff; text-decoration:none; display:block; }
	 #nav li a:hover { background:#444; }
	 #nav li ul { display:none; }
	 #nav li.navHover a { background:#444; }
	 #nav li.navHover ul { display:block; }
	 </style>
	</head>
	<body>
	
	
	 <ul id="nav">
	 <li><a href="#">网站首页</a></li>
	 <li><a href="#">关于我们</a>
	 <ul>
	 <li><a href="#">公司简介</a></li>
	 <li><a href="#">公司文化</a></li>
	 <li><a href="#">联系我们</a></li>
	 </ul>
	 </li>
	 <li><a href="#">产品展示</a>
	 <ul>
	 <li><a href="#">产品一</a></li>
	 <li><a href="#">产品二</a></li>
	 <li><a href="#">产品三</a></li>
	 </ul>
	 </li>
	 </ul>
	
	 <script>
	 function navigation()
	 {
	 var nav = document.getElementById("nav");
	 var li = nav.getElementsByTagName("li");
	 for(var i=0; i<li.length; i++)
	 {
	 li[i].onmouseover = function() { this.className = "navHover"; }
	 li[i].onmouseout = function() { this.className = ""; }
	 }
	 }
	 window.onload = function()
	 {
	 navigation();
	 }
	 </script>
	</body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　滑动下拉　

同语言下

可能有用的

zhaminly贡献的其它代码(1)

.模块滑动下拉效果