导航
首页
站内首页
网罗天下
网页前端
软件使用
站内首页
>
网页前端
>
JS
> 正文
横二级润滑 竖二级折叠菜单...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://pic1.xuehuaimg.com/proxy/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>横二级润滑 竖二级折叠菜单 01</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("https://pic1.xuehuaimg.com/proxy/https://pic1.xuehuaimg.com/proxy/https://pic1.xuehuaimg.com/proxy/http://img2.pict.com/a4/96/5b/3194483/0/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("https://pic1.xuehuaimg.com/proxy/https://pic1.xuehuaimg.com/proxy/https://pic1.xuehuaimg.com/proxy/http://img2.pict.com/a4/96/5b/3194483/0/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("https://pic1.xuehuaimg.com/proxy/https://pic1.xuehuaimg.com/proxy/https://pic1.xuehuaimg.com/proxy/http://img2.pict.com/a4/96/5b/3194483/0/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("https://pic1.xuehuaimg.com/proxy/https://pic1.xuehuaimg.com/proxy/https://pic1.xuehuaimg.com/proxy/http://img2.pict.com/a4/96/5b/3194483/0/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" onmouseover="javascript:ShowMenu(this,0);"><a href="javascript:void(0);"><span>菜单 A</span></a></dd> <dd onmouseover="javascript:ShowMenu(this,1);"><a href="javascript:void(0);"><span>菜单B</span></a></dd> <dd onmouseover="javascript:ShowMenu(this,2);"><a href="javascript:void(0);"><span>菜单C</span></a></dd> </dl> <ol> <li onmouseover="javascript:ShowSpan(this,0);"><a href="javascript:void(0);">菜单A_0</a> <span class="no"> <h1 class="ok" onclick="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> <a href="javascript:void(0);">菜单A_0_0_2</a> <a href="javascript:void(0);">菜单A_0_0_3</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> <a href="javascript:void(0);">菜单A_0_1_3</a> </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,1);"><a href="javascript:void(0);">菜单A_1</a> <span class="no"> <h1 class="ok" onclick="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> <a href="javascript:void(0);">菜单A_1_0_2</a> <a href="javascript:void(0);">菜单A_1_0_3</a> </ul> <h1 onclick="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> <a href="javascript:void(0);">菜单A_1_1_3</a> </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,2);"><a href="javascript:void(0);">菜单A_2</a> <span class="no"> <h1 class="ok" onclick="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> <a href="javascript:void(0);">菜单A_2_0_3</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> <a href="javascript:void(0);">菜单A_2_1_2</a> <a href="javascript:void(0);">菜单A_2_1_3</a> </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,3);"><a href="javascript:void(0);">菜单A_3</a> <span class="no"> <h1 class="ok" onclick="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> <a href="javascript:void(0);">菜单A_3_0_2</a> <a href="javascript:void(0);">菜单A_3_0_3</a> </ul> <h1 onclick="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> <a href="javascript:void(0);">菜单A_3_1_2</a> <a href="javascript:void(0);">菜单A_3_1_3</a> </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,4);"><a href="javascript:void(0);">菜单A_4</a> <span class="no"> <h1 class="ok" onclick="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> <a href="javascript:void(0);">菜单A_4_0_3</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> <a href="javascript:void(0);">菜单A_4_1_2</a> <a href="javascript:void(0);">菜单A_4_1_3</a> </ul> </span> </li> <li onmouseover="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_1</a> <a href="javascript:void(0);">菜单A_5_0_2</a> <a href="javascript:void(0);">菜单A_5_0_3</a> </ul> <h1 onclick="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_1</a> <a href="javascript:void(0);">菜单A_5_1_2</a> <a href="javascript:void(0);">菜单A_5_1_3</a> </ul> </span> </li> </ol> <!-- ol 0 End --> <ol class="no"> <li onmouseover="javascript:ShowSpan(this,0);"><a href="javascript:void(0);">菜单B_0</a> <span class="no"> <h1 class="ok" onclick="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> <a href="javascript:void(0);">菜单B_0_0_2</a> <a href="javascript:void(0);">菜单B_0_0_3</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 onmouseover="javascript:ShowSpan(this,1);"><a href="javascript:void(0);">菜单B_1</a> <span class="no"> <h1 class="ok" onclick="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> <a href="javascript:void(0);">菜单B_1_0_2</a> <a href="javascript:void(0);">菜单B_1_0_3</a> </ul> <h1 onclick="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> <a href="javascript:void(0);">菜单B_1_1_3</a> </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,2);"><a href="javascript:void(0);">菜单B_2</a> <span class="no"> <h1 class="ok" onclick="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> <a href="javascript:void(0);">菜单B_2_0_2</a> <a href="javascript:void(0);">菜单B_2_0_3</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> <a href="javascript:void(0);">菜单B_2_1_1</a> <a href="javascript:void(0);">菜单B_2_1_2</a> <a href="javascript:void(0);">菜单B_2_1_3</a> </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,3);"><a href="javascript:void(0);">菜单B_3</a> <span class="no"> <h1 class="ok" onclick="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> <a href="javascript:void(0);">菜单B_3_0_3</a> </ul> <h1 onclick="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> <a href="javascript:void(0);">菜单B_3_1_2</a> <a href="javascript:void(0);">菜单B_3_1_3</a> </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,4);"><a href="javascript:void(0);">菜单B_4</a> <span class="no"> <h1 class="ok" onclick="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> <a href="javascript:void(0);">菜单B_4_1_2</a> <a href="javascript:void(0);">菜单B_4_1_3</a> </ul> </span> </li> <li onmouseover="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> <a href="javascript:void(0);">菜单B_5_0_2</a> <a href="javascript:void(0);">菜单B_5_0_3</a> </ul> <h1 onclick="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> <a href="javascript:void(0);">菜单B_5_1_2</a> <a href="javascript:void(0);">菜单B_5_1_3</a> </ul> </span> </li> </ol> <!-- ol 1 End --> <ol class="no"> <li onmouseover="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> <a href="javascript:void(0);">菜单C_0_0_3</a> </ul> <h1 onclick="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> <a href="javascript:void(0);">菜单C_0_1_3</a> </ul> </span> </li> <li onmouseover="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> <a href="javascript:void(0);">菜单C_1_0_2</a> <a href="javascript:void(0);">菜单C_1_0_3</a> </ul> <h1 onclick="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> <a href="javascript:void(0);">菜单C_1_1_3</a> </ul> </span> </li> <li onmouseover="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_2</a> <a href="javascript:void(0);">菜单C_2_0_3</a> </ul> <h1 onclick="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_1</a> <a href="javascript:void(0);">菜单C_2_1_2</a> <a href="javascript:void(0);">菜单C_2_1_3</a> </ul> </span> </li> <li onmouseover="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_2</a> <a href="javascript:void(0);">菜单C_3_0_3</a> </ul> <h1 onclick="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_1</a> <a href="javascript:void(0);">菜单C_3_1_2</a> <a href="javascript:void(0);">菜单C_3_1_3</a> </ul> </span> </li> <li onmouseover="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_2</a> <a href="javascript:void(0);">菜单C_4_0_3</a> </ul> <h1 onclick="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> <a href="javascript:void(0);">菜单C_4_1_3</a> </ul> </span> </li> <li onmouseover="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_1</a> <a href="javascript:void(0);">菜单A_5_0_2</a> <a href="javascript:void(0);">菜单A_5_0_3</a> </ul> <h1 onclick="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_1</a> <a href="javascript:void(0);">菜单A_5_1_2</a> <a href="javascript:void(0);">菜单A_5_1_3</a> </ul> </span> </li> </ol> </div> </body> </html>
提示:可以修改后运行.
<<
效果很好的标签切换
弹出框效果
>>
查看所有评论
昵称
评论内容
相关文章
在线留言
© 2021
i0561搜索
.All rights reserved.
v3.24
作者:
Netton
浏览:
发布时间:
10/03/28
i0561搜索.All rights reserved. v3.24