javascript 无限级下拉导航菜单效果

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<title>
<a href="https://www.111cn.net/cssdiv/css.html" target="_blank">css</a>+js无限级菜单</title> 
<style type="text/css"> 
* { margin:0; padding:0; border:0; } 
body { font:12px/130% verdana, geneva, arial, helvetica, sans-serif, 宋体; } 
li { list-style:none; } 
.clearfix:after { content:" "; display:block; height:0; clear:both; visibility:hidden; } 
.clearfix { display:inline-block; } 
a:link { color:#000; text-decoration:none; } 
a:visited { color:#000; text-decoration:none; } 
a:hover { color:#000; text-decoration:none; } 
.menu {   background:#fff; margin:0 auto; } 
.menusel { float:left;  position:relative;  background:#ddd; line- margin-left: 1px; *margin-left: 0px; 
_margin-left: -1px; } 
.menusel h2 { font-size:12px; } 
.menusel a { display: block; text-align:center;  border:1px solid #a4a4a4;  border-bottom:1px solid #a4a4a4; position:relative; z-index:2; } 
.menusel a:hover { border:1px solid #a4a4a4; border-bottom:1px dashed #eeeeee; position:relative; z-index:2;  } 
.ahover a { border-bottom:1px dashed #eeeeee; background:#eeeeee; } 
.position { position:absolute; z-index:1; } 
.menusel ul {  background:#eee; border:1px solid #a4a4a4; margin-top: -1px; position:relative; z-index:1; display:none; } 
.menusel .block { display:block; } 
.typeul li { border-bottom:1px dashed #a4a4a4;  position:relative; float:left; } 
.typeul li a { border:none;  } 
.typeul li a:hover { border:none; background:#ddd; } 
.typeul { margin-left:0; } 
.typeul ul { left:125px; top:0; position:absolute; } 
.fli { margin-left: -1px; border-left:#eeeeee solid 1px; } 
.menusel .lli { border:none; } 
</style> 
<script type="text/javascript">document.execCommand("BackgroundImageCache", false, true);</script> 
 
 
 
<div class="menu"> 
<div id="menu1" class="menusel"> 
<h2></h2> 
<div class="position"> 
<ul class="clearfix typeul"> 
<li> 
<li>  
<ul> 
<li class="fli"> 
<li class="lli"> 
</ul> 
</li> 
<li> 
<li class="lli"> 
</ul> 
</div> 
 
</div> 
 
<div id="menu2" class="menusel"> 
<h2></h2> 
<div class="position"> 
<ul class="clearfix typeul"> 
<li> 
<li> 
<ul> 
<li class="fli"> 
<li class="lli"> 
<ul> 
<li class="fli"> 
<li class="lli"> </li> 
</ul> 
</li> 
</ul> 
</li> 
<li> 
<li class="lli"> 
</ul> 
</div> 
 
</div> 
 
<div id="menu3" class="menusel"> 
<h2></h2> 
<div class="position"> 
<ul class="clearfix typeul"> 
<li> 
<li> 
<ul> 
<li class="fli"> 
<li class="lli"> 
<ul> 
<li class="fli"> 
<li class="lli"> 
<ul> 
<li class="fli"> 
<li class="lli"> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</li> 
<li> 
<li class="lli"> 
</ul> 
</div> 
 
</div> 
 
</div> 
 
<script type="text/javascript"> 
for(var x = 1; x < 4; x++) 
{ 
var menuid = document.getElementById("menu"+x); 
menuid.num = x; 
type(); 
} 
function type() 
{ 
var menuh2 = menuid.getElementsByTagName("h2"); 
var menuul = menuid.getElementsByTagName("ul"); 
var menuli = menuul[0].getElementsByTagName("li"); 
menuh2[0].onmouseover = show; 
menuh2[0].onmouseout = unshow; 
menuul[0].onmouseover = show; 
menuul[0].onmouseout = unshow; 
function show() 
{ 
menuul[0].className = "clearfix typeul block" 
} 
function unshow() 
{ 
menuul[0].className = "typeul" 
} 
for(var i = 0; i < menuli.length; i++) 
{ 
menuli[i].num = i; 
var liul = menuli[i].getElementsByTagName("ul")[0]; 
if(liul) 
{ 
typeshow() 
} 
} 
function typeshow() 
{ 
menuli[i].onmouseover = showul; 
menuli[i].onmouseout = unshowul; 
} 
function showul() 
{ 
menuli[this.num].getElementsByTagName("ul")[0].className = "block"; 
} 
function unshowul() 
{ 
menuli[this.num].getElementsByTagName("ul")[0].className = ""; 
} 
} 
</script>

提示：您可以先修改部分代码再运行

相关文章

精彩推荐