带链接跳转的下拉菜单代码，Js+Css模拟完成

发布时间：2018-08-21 19:20:55 所属栏目：政策来源：站长网

导读：带链接跳转的下拉菜单代码，Js+Css模拟完成，Selcet下拉框是用CSS调用图片实现的，具体效果大家自己看下边的演示吧，文字无法表达那么清楚，您说呢？示例： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DT

　　带链接跳转的下拉菜单代码，Js+Css模拟完成，Selcet下拉框是用CSS调用图片实现的，具体效果大家自己看下边的演示吧，文字无法表达那么清楚，您说呢？

　　示例：

<!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> <script language="javascript" type="text/javascript"> var flag = true; function show_select(input,btn,option,value){ var inputobj=document.getElementById(input); var btnobj=document.getElementById(btn); var optionobj=document.getElementById(option); var valueobj=document.getElementById(value); function chk() { if (flag) { document.getElementById(option).style.display = 'none'; } } // 50flag optionobj.onmouseout = function() { setTimeout(chk, 50); } optionobj.style.display=optionobj.style.display==""?"none":""; for (var j=0;j<optionobj.childNodes.length;j++){ // optionobj.focus(); optionobj.childNodes[j].onmouseover=function (){ this.className="qty_items_over"; // flag flag = false; }; optionobj.childNodes[j].onmouseout=function (){ this.className="qty_items_out"; // flag flag = true; }; optionobj.childNodes[j].onclick=function () { inputobj.innerHTML=this.innerHTML; valueobj.value=this.innerHTML; optionobj.style.display="none"; a = this.getElementsByTagName('a')[0]; h = a.href; window.location.href =h; }; } }; </script> <style type="text/css"> body{ font-size:12px; font:12px Arial, Helvetica, sans-serif; } .pro_select{ width:174px; height:22px; float:left; margin:0 10px; } #pro_qty,#a1,#a2,#a3{ float:left; height:22px; width:148px; padding-left:4px; line-height:24px; background:url(/uploads/allimg/1106/index_134.gif) no-repeat; } #pro_qty_but,#b1,#b2,#b3{ float:left; width:22px; cursor:pointer; } #qty_items,#c1,#c2,#c3{ clear:left; width:150px; border-right:1px solid #959595; border-bottom:1px solid #959595; border-left:1px solid #959595; position:absolute; z-index:80; } .qty_items_out { background-color:#FFFFFF; padding-left:2px; cursor:pointer; line-height:18PX; z-index:1; } .qty_items_over{ background-color:#CCCCCC; padding-left:2px; cursor:pointer; line-height:18PX; } .clear{ clear:left;} a{text-decoration:none; color: #000;} </style> <title>Js模拟下拉跳转菜单</title> </head> <body > <div style="width:866px;height:28px;background:url(/uploads/allimg/1106/indexs_13_1426_05.gif) no-repeat;margin:0 auto;padding:7px 0 0 120px;"> <div class="pro_select "> <div id="pro_qty">请选择类别</div> <div class="id" onclick="show_select('pro_qty','pro_qty_but','qty_items','qty')"> <img src="/uploads/allimg/1106/index_134_02.gif" style="cursor:pointer;margin-left:-22px;" /> </div> <div class="clear"></div> <div id="qty_items" style="display:none"> <div class='qty_items_out'><a href="http://www.sina.com">sina</a></div> <div class='qty_items_out'><a href="">codefans</a></div> <div class='qty_items_out'><a href="http://www.sohu.com">sohu</a></div> <div class='qty_items_out'><a href="http://www.baidu.com">baidu</a></div> </div> </div> <div class="pro_select"> <div id="a1">请选择类别</div> <div id="b1" onclick="show_select('a1','b1','c1','d1')"> <img src="/uploads/allimg/1106/index_134_02.gif" style="cursor:pointer;margin-left:-22px;" /> </div> <div class="clear"></div> <div id="c1" style="display:none"> <div class='qty_items_out'><a href="http://www.baidu.com">baidu</a></div> <div class='qty_items_out'><a href="http://www.sina.com">sina</a></div> <div class='qty_items_out'><a href="">codefans</a></div> </div> </div> <div class="pro_select"> <div id="a2">请选择类别</div> <div id="b2" onclick="show_select('a2','b2','c2','d2')"> <img src="/uploads/allimg/1106/index_134_02.gif" style="cursor:pointer;margin-left:-22px;" /> </div> <div class="clear"></div> <div id="c2" style="display:none"> <div class='qty_items_out'><a href="http://www.sohu.com">sohu</a></div> <div class='qty_items_out'><a href="http://www.baidu.com">baidu</a></div> </div> </div> <div class="pro_select"> <div id="a3">请选择类别</div> <div id="b3" onclick="show_select('a3','b3','c3','d3')"> <img src="/uploads/allimg/1106/index_134_02.gif" style="cursor:pointer;margin-left:-22px;" /> </div> <div class="clear"></div> <div id="c3" style="display:none"> <div class='qty_items_out'><a href="http://www.tianya.com">tianya</a></div> <div class='qty_items_out'><a href="http://www.sohu.com">sohu</a></div> <div class='qty_items_out'><a href="http://www.baidu.com">baidu</a></div> </div> </div> <form id="form1" name="form1" method="post" action=""> <input name="qty" type="hidden" id="qty" value="1" /> <input name="qty" type="hidden" id="d1" value="1" /> <input name="qty" type="hidden" id="d2" value="1" /> <input name="qty" type="hidden" id="d3" value="1" /> </form> </div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：三明站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!