100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > JS+CSS全力打造的一级横向滑动 二级竖向下拉综合菜单

JS+CSS全力打造的一级横向滑动 二级竖向下拉综合菜单

时间:2019-12-24 02:54:47

相关推荐

JS+CSS全力打造的一级横向滑动 二级竖向下拉综合菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>【荐】JS+CSS全力打造的一级横向滑动,二级竖向下拉综合菜单_网页代码站()</title><style type="text/css"> <!--body,ul,ol,li,dl,dt,dd,h1{ margin:0; padding:0; list-style:none;}body { font:12px "Arial","宋体";color:#333;background:#FFF;}a{border:none; text-decoration:none;}#menu { width:980px; margin:30px auto;}#menu dl { padding-left:10px; height:30px;overflow:hidden; }#menu dl dd { float:left; padding-right:5px;}#menu dl dd a {display:block; padding-left:10px; background:url("/images/0110/menu.gif") no-repeat 0 -60px;}#menu dl dd a span { display:block;color:#630;width:50px;height:30px;text-align:center;line-height:34px;font-size:14px; padding-right:10px;background:url("/images/0110/menu.gif") no-repeat right -60px;overflow:hidden;}#menu dl dd a:hover,#menu dl dd.ok a { background-position: 0 -90px;}#menu dl dd a:hover span,#menu dl dd.ok a span { cursor:pointer; font-weight:bold; color:#FFF;background-position: right -90px;}#menu ol {clear:both; height:30px; background:url("/images/0110/menu.gif") repeat-x 0 0;}#menu ol li { float:left;}#menu ol li a { color:#FFF; display:block; width:70px; text-align:center; height:30px; line-height:32px; overflow:hidden;}#menu ol li a:hover,#menu ol li.ok a,#menu ol li.ol a{ font-weight:bold; background:url("/images/0110/menu.gif") no-repeat 0 -30px;}#menu ol li span { width:150px;position:absolute;background-color:#FEFEFE;}#menu ol li span h1 {font:12px "宋体"; float:none; display:block; background-color:#E6E6E6;}#menu ol li span h1 a,#menu ol li.ok span h1 a,#menu ol li.ok span ul a{color:#333;width:148px;text-indent:10px;height:24px;line-height:26px;text-align:left;font-weight:normal;border-top:#FFF 1px solid; border-bottom:#A0A0A0 1px solid; border-right:#A0A0A0 1px solid;background-image:none;}#menu ol li span h1 a:hover,#menu ol li span h1.ok a {color:#930; font-weight:bold; background-image:none; background-color:#D9D9D9;}#menu ol li.ok span ul {width:147px; border:#E6E6E6 1px solid; border-top:none;overflow:hidden;}#menu ol li.ok span ul a {border:none;}#menu ol li.ok span ul a:hover { color:#930; font-weight:bold; text-indent:15px; background-image:none;}.no,.ol span { display:none;}--></style><script language="javascript"><!--//function ShowMenu(obj,n){var dd = obj.parentNode.getElementsByTagName("dd");for(var i=0;i<dd.length;i++){dd[i].className = "";}dd[n].className = "ok";var ol = document.getElementById("menu").getElementsByTagName("ol");for(var i=0;i<ol.length;i++){ol[i].className = "no";}ol[n].className = "";}function ShowSpan(obj,n){var span = obj.parentNode.getElementsByTagName("span");for(var i=0;i<span.length;i++){span[i].className = "no";}span[n].className = "";var li = obj.parentNode.getElementsByTagName("li")li[n].className = "ok";for(var i=0;i<li.length;i++){if(i!=n){li[i].className = "";}li[i].onmouseout = function(){this.className = "ol";}}}function ShowUl(obj,n){var ul = obj.parentNode.getElementsByTagName("ul");var h1 = obj.parentNode.getElementsByTagName("h1");for(var i=0; i<h1.length;i++){h1[i].innerHTML = h1[i].innerHTML.replace("-","+");h1[i].className = "";}if(ul[n].className == "no"){ ul[n].className = "";obj.className = "ok";obj.innerHTML = obj.innerHTML.replace("+","-");}else{ul[n].className = "no";return;}for(var i=0; i<ul.length;i++){if(i!=n){ ul[i].className = "no";}}}//--></script></head><body><div id="menu"><dl><dd class="ok" οnmοuseοver="javascript:ShowMenu(this,0);"><a href="javascript:void(0);"><span>菜单A</span></a></dd><dd οnmοuseοver="javascript:ShowMenu(this,1);"><a href="javascript:void(0);"><span>菜单B</span></a></dd><dd οnmοuseοver="javascript:ShowMenu(this,2);"><a href="javascript:void(0);"><span>菜单C</span></a></dd></dl><ol><li οnmοuseοver="javascript:ShowSpan(this,0);"><a href="javascript:void(0);">菜单A_0</a><span class="no"><h1 class="ok" οnclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_0_0</a></h1><ul><a href="javascript:void(0);">菜单A_0_0_0</a><a href="javascript:void(0);">菜单A_0_0_1</a></ul><h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_0_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单A_0_1_0</a><a href="javascript:void(0);">菜单A_0_1_1</a><a href="javascript:void(0);">菜单A_0_1_2</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,1);"><a href="javascript:void(0);">菜单A_1</a><span class="no"><h1 class="ok" οnclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_1_0</a></h1><ul><a href="javascript:void(0);">菜单A_1_0_0</a><a href="javascript:void(0);">菜单A_1_0_1</a></ul><h1 οnclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_1_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单A_1_1_0</a><a href="javascript:void(0);">菜单A_1_1_1</a><a href="javascript:void(0);">菜单A_1_1_2</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,2);"><a href="javascript:void(0);">菜单A_2</a><span class="no"><h1 class="ok" οnclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_2_0</a></h1><ul><a href="javascript:void(0);">菜单A_2_0_0</a><a href="javascript:void(0);">菜单A_2_0_1</a><a href="javascript:void(0);">菜单A_2_0_2</a></ul><h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_2_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单A_2_1_0</a><a href="javascript:void(0);">菜单A_2_1_1</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,3);"><a href="javascript:void(0);">菜单A_3</a><span class="no"><h1 class="ok" οnclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_3_0</a></h1><ul><a href="javascript:void(0);">菜单A_3_0_0</a><a href="javascript:void(0);">菜单A_3_0_1</a></ul><h1 οnclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_3_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单A_3_1_0</a><a href="javascript:void(0);">菜单A_3_1_1</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,4);"><a href="javascript:void(0);">菜单A_4</a><span class="no"><h1 class="ok" οnclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_4_0</a></h1><ul><a href="javascript:void(0);">菜单A_4_0_0</a><a href="javascript:void(0);">菜单A_4_0_1</a><a href="javascript:void(0);">菜单A_4_0_2</a></ul><h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_4_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单A_4_1_0</a><a href="javascript:void(0);">菜单A_4_1_1</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,5);"><a href="javascript:void(0);">菜单A_5</a><span class="no"><h1 class="ok" οnclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_5_0</a></h1><ul><a href="javascript:void(0);">菜单A_5_0_0</a><a href="javascript:void(0);">菜单A_5_0_1</a><a href="javascript:void(0);">菜单A_5_0_2</a></ul><h1 οnclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_5_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单A_5_1_0</a></ul></span></li></ol><!-- ol 0 End --><ol class="no"><li οnmοuseοver="javascript:ShowSpan(this,0);"><a href="javascript:void(0);">菜单B_0</a><span class="no"><h1 class="ok" οnclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_0_0</a></h1><ul><a href="javascript:void(0);">菜单B_0_0_0</a><a href="javascript:void(0);">菜单B_0_0_1</a></ul><h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_0_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单B_0_1_0</a><a href="javascript:void(0);">菜单B_0_1_1</a><a href="javascript:void(0);">菜单B_0_1_2</a><a href="javascript:void(0);">菜单B_0_1_3</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,1);"><a href="javascript:void(0);">菜单B_1</a><span class="no"><h1 class="ok" οnclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_1_0</a></h1><ul><a href="javascript:void(0);">菜单B_1_0_0</a><a href="javascript:void(0);">菜单B_1_0_1</a></ul><h1 οnclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_1_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单B_1_1_0</a><a href="javascript:void(0);">菜单B_1_1_1</a><a href="javascript:void(0);">菜单B_1_1_2</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,2);"><a href="javascript:void(0);">菜单B_2</a><span class="no"><h1 class="ok" οnclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_2_0</a></h1><ul><a href="javascript:void(0);">菜单B_2_0_0</a><a href="javascript:void(0);">菜单B_2_0_1</a></ul><h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_2_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单B_2_1_0</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,3);"><a href="javascript:void(0);">菜单B_3</a><span class="no"><h1 class="ok" οnclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_3_0</a></h1><ul><a href="javascript:void(0);">菜单B_3_0_0</a><a href="javascript:void(0);">菜单B_3_0_1</a><a href="javascript:void(0);">菜单B_3_0_2</a></ul><h1 οnclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_3_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单B_3_1_0</a><a href="javascript:void(0);">菜单B_3_1_1</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,4);"><a href="javascript:void(0);">菜单B_4</a><span class="no"><h1 class="ok" οnclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_4_0</a></h1><ul><a href="javascript:void(0);">菜单B_4_0_0</a><a href="javascript:void(0);">菜单B_4_0_1</a><a href="javascript:void(0);">菜单B_4_0_2</a><a href="javascript:void(0);">菜单B_4_0_3</a></ul><h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_4_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单B_4_1_0</a><a href="javascript:void(0);">菜单B_4_1_1</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,5);"><a href="javascript:void(0);">菜单B_5</a><span class="no"><h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_5_0</a></h1><ul><a href="javascript:void(0);">菜单B_5_0_0</a><a href="javascript:void(0);">菜单B_5_0_1</a></ul><h1 οnclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_5_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单B_5_1_0</a><a href="javascript:void(0);">菜单B_5_1_1</a></ul></span></li></ol><!-- ol 1 End --><ol class="no"><li οnmοuseοver="javascript:ShowSpan(this,0);"><a href="javascript:void(0);">菜单C_0</a><span class="no"><h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单C_0_0</a></h1><ul><a href="javascript:void(0);">菜单C_0_0_0</a><a href="javascript:void(0);">菜单C_0_0_1</a><a href="javascript:void(0);">菜单C_0_0_2</a></ul><h1 οnclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单C_0_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单C_0_1_0</a><a href="javascript:void(0);">菜单C_0_1_1</a><a href="javascript:void(0);">菜单C_0_1_2</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,1);"><a href="javascript:void(0);">菜单C_1</a><span class="no"><h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单C_1_0</a></h1><ul><a href="javascript:void(0);">菜单C_1_0_0</a><a href="javascript:void(0);">菜单C_1_0_1</a></ul><h1 οnclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单C_1_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单C_1_1_0</a><a href="javascript:void(0);">菜单C_1_1_1</a><a href="javascript:void(0);">菜单C_1_1_2</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,2);"><a href="javascript:void(0);">菜单C_2</a><span class="no"><h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单C_2_0</a></h1><ul><a href="javascript:void(0);">菜单C_2_0_0</a><a href="javascript:void(0);">菜单C_2_0_1</a><a href="javascript:void(0);">菜单C_2_0_3</a></ul><h1 οnclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单C_2_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单C_2_1_0</a><a href="javascript:void(0);">菜单C_2_1_3</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,3);"><a href="javascript:void(0);">菜单C_3</a><span class="no"><h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单C_3_0</a></h1><ul><a href="javascript:void(0);">菜单C_3_0_0</a><a href="javascript:void(0);">菜单C_3_0_1</a><a href="javascript:void(0);">菜单C_3_0_3</a></ul><h1 οnclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单C_3_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单C_3_1_0</a><a href="javascript:void(0);">菜单C_3_1_3</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,4);"><a href="javascript:void(0);">菜单C_4</a><span class="no"><h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单C_4_0</a></h1><ul><a href="javascript:void(0);">菜单C_4_0_0</a><a href="javascript:void(0);">菜单C_4_0_1</a><a href="javascript:void(0);">菜单C_4_0_3</a></ul><h1 οnclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单C_4_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单C_4_1_0</a><a href="javascript:void(0);">菜单C_4_1_1</a><a href="javascript:void(0);">菜单C_4_1_2</a></ul></span></li><li οnmοuseοver="javascript:ShowSpan(this,5);"><a href="javascript:void(0);">菜单A_5</a><span class="no"><h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_5_0</a></h1><ul><a href="javascript:void(0);">菜单A_5_0_0</a><a href="javascript:void(0);">菜单A_5_0_3</a></ul><h1 οnclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_5_1</a></h1><ul class="no"><a href="javascript:void(0);">菜单A_5_1_0</a><a href="javascript:void(0);">菜单A_5_1_3</a></ul></span></li></ol></div><br /><p><a href="">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。