简单仿淘宝的一个不错的滑动门

2024-09-05 12:20:07

字体：大中小

来源：转载

供稿：网友

简单仿淘宝的一个滑动门，个人感觉真的挺不错，以前有过一款和这个差不多。在滑动门里你可以再次布局你的网页，可以做成一个功能超强大的导航，原示例是一个拼音索引程序，改成菜单也是可以的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>简单仿淘宝的一个不错的滑动门</title><style type="text/css">body{font-size:12px;position:relative;font-family:Verdana, Geneva, sans-serif;}a{color:blue;}ul{margin:0;padding:0;list-style:none;}#navigation{height:26px;}#navigation li{float:left;}#navigation li.show .content{display:block;}#navigation li a,#navigation li span{display:inline-block;border:solid 1px #fff;border-bottom:none;height:26px;padding:0 6px;line-height:20px;overflow:hidden}#navigation li a:hover,#navigation li.show a.index{background:#DBF3FE;border-color:#0a0;position:relative;top:0px;z-index:2;}#container{position:relative;width:800px;margin:50px;}#navigation li .content{position:absolute;left:0;top:26px;background:#DBF3FE;border:solid 1px #0a0;width:760px;padding:20px;display:none;}#navigation li .content ul li{margin-right:10px;float:none;display:inline;}#navigation li .content ul li a{border:none;}#navigation li .content ul li{width:120px;}#navigation li .content ul li h3{clear:both;text-align:left;}</style></head><body><div id="container">	<ul id="navigation">		<li><span>整站导航：</span></li>		<li>			A			<div class="content">				<h3>百度有啊</h3>				<ul>					<li>百度有啊</li>					<li>致富小康</li>				</ul>				<h3>源码下载</h3>				<ul>					<li>黄河泰山</li>					<li>池鱼之殃</li>					<li>百度有啊</li>				</ul>			</div>		</li>		<li>			B			<div class="content">				<h3>网页特效</h3>				<ul>					<li>网页特效</li>					<li>百度搜索</li>					<li>百度MP3</li>				</ul>				<h3>精品代码</h3>				<ul>					<li>代码索引</li>					<li>百度搜索</li>				</ul>			</div>		</li>		<li>C<div class="content">C</div></li>		<li>D<div class="content">D</div></li>		<li>E<div class="content">E</div></li>		<li>F<div class="content">F</div></li>		<li>G<div class="content">G</div></li>		<li>H<div class="content">H</div></li>		<li>I<div class="content">I</div></li>		<li>J<div class="content">J</div></li>		<li>K<div class="content">K</div></li>		<li>L<div class="content">L</div></li>		<li>M<div class="content">M</div></li>	</ul></div></body></html><script type="text/javascript">function showAjaxContent(){	var obj=document.getElementById("navigation");	var liObj=obj.getElementsByTagName("li");	var length=liObj.length;	var currentLiObj;	for(var i=0;i<length;i++){		currentLiObj=liObj[i];		if(currentLiObj.parentNode!=obj){continue;}		//然后循环添加事件		currentLiObj.onmouseover=function(){			if(this.className.indexOf("show")<0){				this.className+=" show";			}			clearStyle(this);		}				currentLiObj.onmouseout=function(){			this.className=this.className.replace("show","");			clearStyle(this);		}	}	function clearStyle(obj){		for(var i=0;i<length;i++){			currentLiObj=liObj[i];			if(obj!=currentLiObj){				currentLiObj.className=currentLiObj.className.replace("show","");			}		}	}}showAjaxContent();</script>

上一篇：最简Table选项卡

下一篇：真正的JavaScript伸展收缩型菜单