sammyfun
- 浏览: 1163531 次
- 性别:
- 来自: 西安
-
文章分类
最新评论
-
jpsb：
感谢！
JS 跳出iframe框架 -
isaiahzhong：
这些初学者都很头疼的问题，直接去官网上面， ...
Ext.EventManager -
shanjing：
修改CAS服务器，当Session过期时，调用方法，执行重定向 ...
cas
<!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">
<!--
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("/jscss/demoimg/201003/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("/jscss/demoimg/201003/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("/jscss/demoimg/201003/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("/jscss/demoimg/201003/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>
</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 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>
</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>
</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>
</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 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>
</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>
</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>
</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 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>
</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>
</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>
</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>
</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>
</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>
</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 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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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_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_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_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_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_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>
</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_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_3</a>
</ul>
</span>
</li>
</ol>
</div>
</body>
</html>
<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">
<!--
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("/jscss/demoimg/201003/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("/jscss/demoimg/201003/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("/jscss/demoimg/201003/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("/jscss/demoimg/201003/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>
</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 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>
</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>
</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>
</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 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>
</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>
</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>
</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 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>
</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>
</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>
</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>
</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>
</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>
</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 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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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_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_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_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_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_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>
</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_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_3</a>
</ul>
</span>
</li>
</ol>
</div>
</body>
</html>
分享到：
发表评论
相关推荐
"横向下拉菜单"是一种创新的交互设计，它打破了传统的垂直下拉菜单模式，为用户提供了独特的操作体验。这种设计常见于网页、应用程序或者桌面软件中，尤其是在空间有限但选项较多的情况下，能有效地节省屏幕空间并...
本文将深入探讨五款利用CSS实现的横向下拉菜单导航条设计，它们不仅美观，而且具有实用性，能够提升用户体验。 1. **扁平化设计导航条** 扁平化设计是现代网页设计的趋势，其简洁、清晰的风格深受用户喜爱。通过...
在网页设计中，横向下拉菜单是一种常见的交互元素，它能有效地组织和展示大量链接，同时保持页面的整洁。本文将深入探讨四种不同类型的横向下拉菜单，它们都是基于CSS和JavaScript实现的，旨在提供美观且全面的用户...
在网页设计中，二级横向下拉菜单是常见的导航元素，它能够帮助用户更有效地浏览网站结构。这个项目是基于jQuery库实现的，jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理和动画制作等任务。 jQuery库的...
本文将深入探讨“漂亮的CSS横向下拉菜单导航条”这一主题，分享五款精心设计的下拉菜单导航条实例，旨在提升用户体验和网站的整体美观度。 首先，CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或...
css和javascript编写的 横向下拉菜单，有益于学习网页制作
符合web标准的二级横向下拉菜单
在网页设计中，横向下拉菜单是一种常见的交互元素，它能有效地组织和展示网站的层级结构，提升用户体验。本文将详细讲解如何使用CSS和JavaScript来创建一个经典的横向下拉菜单，以及HTML的基础结构。 首先，我们...
本教程将探讨如何使用CSS和JavaScript技术创建一个超酷的黑灰色二级横向下拉导航菜单，该菜单具备动画效果，为用户提供更加流畅和交互性强的浏览体验。 首先，我们来看CSS在构建这个菜单中的作用。CSS（层叠样式表...
"多级横向下拉菜单"是这种交互设计的一种扩展，它允许用户通过横向滑动来浏览和选择多层次的选项。在这个场景中，我们将深入探讨如何实现一个类似于美团网客户端的简单多级横向下拉框，并分析其背后的代码结构。 ...
仿蓝色理想TAB横向下拉菜单效果! 很值得下载看看!资源免费,大家分享!!
本资源“jquery横向下拉三级菜单效果”提供了一种高效的解决方案，利用jQuery库实现了一个流畅、美观的横向下拉三级菜单。下面我们将详细探讨这一技术实现及其应用。 jQuery是一个轻量级、功能丰富的JavaScript库，...
本文将深入探讨5款极具吸引力且功能丰富的CSS横向下拉菜单导航条的设计和实现方法，旨在提升用户体验并为网站增添视觉魅力。 1. **基础CSS下拉菜单** CSS下拉菜单的基本原理是利用`display`属性的切换来实现隐藏与...
"jQuery横向下拉导航菜单"就是这样一个利用jQuery实现的高效导航方案。 首先，jQuery的事件处理机制是其核心之一。在这款菜单中，`mouseover` 和 `mouseout` 事件被用来检测用户鼠标是否悬停在主菜单上。当鼠标进入...
而jQuery横向下拉导航菜单则是这种交互式菜单的一种常见实现方式，尤其在响应式设计中非常流行。本教程将深入探讨如何使用jQuery和CSS创建一个功能完备、视觉效果良好的横向下拉导航菜单。 首先，jQuery是一个轻量...
"支持多级的JS横向下拉导航菜单类"是一个专门用于创建这种功能的JavaScript代码库，它允许开发者构建高效且具有多级结构的下拉菜单，提升用户体验。在网页布局日益复杂的情况下，这种类的使用变得越来越普遍。 首先...
WEB2.0时代的到来，使得网站设计更加注重用户体验和交互性，CSS横向下拉菜单导航条便是这一趋势的典型体现。下面我们将详细探讨这五款WEB2.0漂亮的CSS横向下拉菜单导航条的设计原理、实现方法以及它们各自的特色。 ...
在这个主题中，我们将深入探讨如何利用 `DIV+CSS` 创建纵向横向下拉菜单以及如何用 `JavaScript` 实现图片文字的横向滚动。 首先，我们来关注 `DIV+CSS` 纵向横向下拉菜单。`DIV` 是HTML中的一个布局容器元素，通过...