仿淘宝拼音菜单
css样式部分
View Code
1 <style type="text/css"> 2 *{ margin:0;padding:0;} 3 body{ font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center;} 4 #warpper{ position:absolute; left:100px; top:100px;} 5 h5{ float:left;} 6 a{ text-decoration:underline; cursor:pointer; font-weight:bold;} 7 dl{ height:18px; line-height:18px; background:#f7f7f7; padding:0 10px;} 8 dt,.normal{ float:left; padding:0 10px; border-right:1px solid #ccc; text-decoration:none; width:auto; cursor:pointer;} 9 dt.over{ position:relative;border:1px solid #86e5f0; padding:0 10px 15px 10px; border-bottom:1px solid #caf1f1; margin:-1px 0 0 -1px; z-index:1000; color:#ff6026; text-decoration:underline; background:#caf1f1; height:22px; } 10 li{ float:left; list-style-type:none; margin:5px 10px; width:120px;} 11 dl dd{ position:absolute; width:500px; left:0;top:37px!important; border:1px solid #86e5f0; background:#caf1f1; filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#cccccc); padding:10px 0;} 12 .block{ display:block;} 13 .none{ display:none;} 14 </style>
js部分代码
View Code
1 <script language="javascript"> 2 function $(str){ return document.getElementById(str);} 3 function $$(str){ return document.getElementsByTagName(str);} 4 var timer; 5 function changeMenu(thisObj,num){ 6 if(thisObj.className=="over") return false; 7 hids(thisObj); 8 thisObj.className="over"; 9 $("c"+(num+1)).className="block"; 10 11 $("c"+(num+1)).onmouseover=function(){clearTimeout(timer);} 12 $("c"+(num+1)).onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},500)} 13 thisObj.onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},3000)} 14 15 } 16 function hids(thisObj){ 17 clearTimeout(timer); 18 var tabObj=thisObj.parentNode.getAttribute("id"); 19 var obj_dt=$(tabObj).getElementsByTagName("dt"); 20 for(var i=0;i<obj_dt.length;i++){ 21 obj_dt[i].className="normal"; 22 $("c"+(i+1)).className="none"; 23 } 24 } 25 </script>
body部分代码
View Code
<body> <dl id="warpper"> <h5>拼音检索：</h5> <dt onmouseover="changeMenu(this,0);">a</dt> <dd id="c1" class="none"> <ul> <li><a herf="http://www.alixixi.com">阿里西西</a></li> <li><a herf="#">AEE/爱意</a></li> <li><a herf="#">AF</a></li> <li><a herf="#">AF棒球帽</a></li> <li><a herf="#">Agatha</a></li> <li><a herf="#">Albion/奥尔滨</a></li> <li><a herf="#">AMD</a></li> <li><a herf="#">Andox</a></li> <li><a herf="#">Artini</a></li> <li><a herf="#">爱普生</a></li> </ul> </dd> <dt onmouseover="changeMenu(this,1);">b</dt> <dd id="c2" class="none"> <ul> <li><a herf="http://www.alixixi.cn">网页模板</a></li> <li><a herf="http://js.alixixi.com">特效代码</a></li> <li><a herf="http://down.alixixi.com">源码下载</a></li> <li><a herf="http://mb.alixixi.com">网页模板</a></li> </ul> </dd> <dt onmouseover="changeMenu(this,2);">c[ch]</dt> <dd id="c3" class="none"> <ul> <li><a herf="#">fasfs</a></li> <li><a herf="#">fsdfsd</a></li> <li><a herf="#">fdsfas</a></li> </ul> </dd> <dt onmouseover="changeMenu(this,3);">d</dt> <dd id="c4" class="none"> <ul> <li><a herf="#">fasfs</a></li> <li><a herf="#">fsdfsd</a></li> <li><a herf="#">fdsfas</a></li> <li><a herf="#">fasdffsd</a></li> </ul> </dd> <dt onmouseover="changeMenu(this,4);">e</dt> <dd id="c5" class="none"> <ul> <li><a herf="#">fasfs</a></li> <li><a herf="#">fsdfsd</a></li> <li><a herf="#">fdsfas</a></li> <li><a herf="#">fasdffsd</a></li> <li><a herf="#">fasdfsaf</a></li> </ul> </dd> <dt onmouseover="changeMenu(this,5);">f</dt> <dd id="c6" class="none"> <ul> <li><a herf="http://www.alixixi.cn">网页模板</a></li> <li><a herf="http://js.alixixi.com">特效代码</a></li> <li><a herf="http://down.alixixi.com">源码下载</a></li> <li><a herf="http://mb.alixixi.com">网页模板</a></li> <li><a herf="#">Fancl</a></li> <li><a herf="#">Fancl</a></li> <li><a herf="#">Fancl</a></li> <li><a herf="#">Fancl</a></li> <li><a herf="#">Fancl</a></li> <li><a herf="#">Fancl</a></li> <li><a herf="#">Fancl</a></li> <li><a herf="#">Fancl</a></li> <li><a herf="#">Fancl</a></li> <li><a herf="#">Fancl</a></li> </ul> </dd> </dl> </body>
