“滑动门技术”仿淘宝网站的导航标签效果

这种是叫做“滑动门技术”。
不过，这种叫法有点夸大的嫌疑。因为本来就是很简单的一个小技巧而已，算不上什么特别的技术。

说白了，滑动门技术就是：叠加2个背景。
再详细点就是，给<a></a>设置一个左背景，然后在a里面增加一个右浮动的<span>，给它设置一个右背景。这样就可以用a的伪类hover来实现鼠标放上去，菜单背景的替换效果了。

<!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=gb2312" /> <title>无标题文档</title> <style type="text/css">  </style> <script language="javascript"> function switchTag(tag,content) { // alert(tag); // alert(content); for(i=1; i <6; i++) { if ("tag"+i==tag) { document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i; document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i; }else{ document.getElementById("tag"+i).getElementsByTagName("a")[0].className=""; document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className=""; } if ("content"+i==content) { document.getElementById(content).className=""; }else{ document.getElementById("content"+i).className="hidecontent"; } document.getElementById("content").className=content; } } </script> </head> <body> <div id="container"> <div id="title"> <ul> <li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li> <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li> <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li> <li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li> <li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li> </ul> </div> <div id="content" class="content1"> <div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div> <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div> <div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵</div> <div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担</div> <div id="content5" class="hidecontent">5、这是使用到的两个图片： <table width="58%" border="1" cellspacing="2" cellpadding="0"> <tr> <td width="70%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td> <td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td> </tr> </table> </div> </div> </div> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>test</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <STYLE type=text/css>BODY { FONT-SIZE: 14px; COLOR: #000; FONT-FAMILY: 宋体 } TD { FONT-SIZE: 14px; COLOR: #000; FONT-FAMILY: 宋体 } SELECT { FONT-SIZE: 12px } INPUT { FONT-SIZE: 12px } A:link { COLOR: #3d362b } A:visited { COLOR: #3d362b } A:hover { COLOR: #f60 } BODY #search { CLEAR: both; WIDTH: 540px; HEIGHT: 50px } BODY #search #left { FLOAT: left } BODY #search #searchleft { PADDING-LEFT: 30px; FLOAT: left; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left } BODY #search #searchleft1 { PADDING-LEFT: 30px; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left } FORM { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } BODY #newsearch { WIDTH: 540px; HEIGHT: 30px } BODY #newsearchtop { WIDTH: 540px; HEIGHT: 25px; TEXT-ALIGN: right } BODY #newsearchtop LI { FONT-SIZE: 12px; FLOAT: left } .newsearchinsidew { BORDER-TOP: #cccccc 1px solid; MARGIN-TOP: 2px; BORDER-LEFT: #ccc 1px solid; WIDTH: 70px; CURSOR: hand; LINE-HEIGHT: 21px; BORDER-BOTTOM: #cc3300 1px solid; HEIGHT: 23px; TEXT-ALIGN: center; TEXT-DECORATION: underline} .newsearchinsider { BORDER-RIGHT: #cc3300 1px solid; BORDER-TOP: #cc3300 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #cc3300 1px solid; WIDTH: 70px; COLOR: #ffffff; PADDING-TOP: 5px; HEIGHT: 25px; BACKGROUND-COLOR: #ff7300; TEXT-ALIGN: center} .newsearchinsider A:visited { COLOR: #ffffff; TEXT-DECORATION: none } .newsearchinsidew A:hover { background-color:#CCCCCC;WIDTH: 69px; TEXT-ALIGN: center } BODY #newsearchbottom { BORDER-RIGHT: #cc3300 1px solid; BORDER-LEFT: #cc3300 1px solid; BORDER-BOTTOM: #cc3300 1px solid; POSITION: relative; HEIGHT: 50px; BACKGROUND-COLOR: #ff7300 } BODY #newsearchbottom #e1 { Z-INDEX: 0; LEFT: 0px; VISIBILITY: visible; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px} BODY #newsearchbottom #e2 { Z-INDEX: 0; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px} BODY #newsearchbottom #e3 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px} BODY #newsearchbottom #e4 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px} BODY #newsearchbottom #e5 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px} BODY #newsearchbottom #e6 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px} BODY #newsearchbottom #e7 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px} UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none} </STYLE> <SCRIPT> function doClick(o){ o.className="newsearchinsider"; var j; var id; var e; for(var i=1;i<=7;i++){ id ="v"+i; j = document.getElementById(id); e = document.getElementById("e"+i); if(id != o.id){ j.className="newsearchinsidew"; e.style.visibility = "hidden"; }else{ e.style.visibility = "visible"; } } var id = o.id+""; var dd=id.substring(1,2); var curForm = document.getElementById("FormSearch"+dd); var inputv ; for(var i=1;i<=7;i++){ var otherForm = document.getElementById("FormSearch"+i); } } function doOut(o){ } </SCRIPT> </HEAD> <BODY> <br><br> <DIV id=search> <DIV id=newsearch> <DIV id=newsearchtop> <UL> <LI><DIV class=newsearchinsider id=v1 onClick="javascript:doClick(this)"><A href="#">供应信息</A></DIV></LI> <LI><DIV class=newsearchinsidew id=v2 onClick="javascript:doClick(this)"><A href="#">求购信息</A></DIV></LI> <LI><DIV class=newsearchinsidew id=v3 onMouseOver="javascript:doClick(this)"><A href="#">产品目录</A></DIV></LI> <LI><DIV class=newsearchinsidew id=v4 onMouseOver="javascript:doClick(this)"><A href="#">公司库</A></DIV></LI> <LI><DIV class=newsearchinsidew id=v5 onMouseOver="javascript:doClick(this)"><A href="#">商业资讯</A></DIV></LI> <LI><DIV class=newsearchinsidew id=v6 onMouseOver="javascript:doClick(this)"><A href="#">商人论坛</A></DIV></LI> <LI><DIV class=newsearchinsidew id=v7 onMouseOver="javascript:doClick(this)"><A href="#">拍卖信息</A></DIV></LI> </UL> </DIV> <DIV id=newsearchbottom> <DIV id=e1><DIV id=left><DIV id=searchleft1>搜索供应信息</DIV></DIV></DIV> <DIV id=e2><DIV id=left><DIV id=searchleft1>请输入产品名关键字</DIV></DIV></DIV> <DIV id=e3><DIV id=left><DIV id=searchleft1>请输入产品名关键字</DIV></DIV></DIV> <DIV id=e4><DIV id=left><DIV id=searchleft1>请输入产品名或公司名关键字</DIV></DIV></DIV> <DIV id=e5><DIV id=left><DIV id=searchleft1>请输入关键字</DIV></DIV></DIV> <DIV id=e6><DIV id=left><DIV id=searchleft1>请输入关键字</DIV></DIV></DIV> <DIV id=e7><DIV id=left><DIV id=searchleft1>请输入拍卖关键字</DIV></DIV></DIV></DIV></DIV> </DIV><DIV></DIV> </BODY></HTML>

没有相关文章

没有评论

“滑动门技术”仿淘宝网站的导航标签效果

文章TOP15