如何实现伸缩的两级菜单

来源：互联网发布：医药通软件下载编辑：程序博客网时间：2024/04/29 22:23

在讲解之前，我还是先把运行结果附加上去吧，这样达到有图有真相的效果。

这是前后效果图

前台html框架：

<!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=utf-8" /><meta name="author" content="王天巧" /><meta name="description" content="此网站是实现伸缩的两级菜单" /><meta name="keywords" content="伸缩,两级菜单 " /><title>无标题文档</title><link type="text/css" href="style.css" mce_href="style.css" rel="stylesheet" /><mce:script language="javascript" src="javascript.js" mce_src="javascript.js"></mce:script> </head><body><div id="navigator"> <ul id="listUL"> <li> <a href="#" mce_href="#">Home</a></li> <li><a href="#" mce_href="#">News</a> <ul class="myHide"> <li><a href="#" mce_href="#"> Lastest News</a></li> <li><a href="#" mce_href="#">All News </a></li> <li><a href="#" mce_href="#">Foreign News </a></li> </ul> </li> <li><a href="#" mce_href="#">Sports</a> <ul class="myHide"> <li><a href="#" mce_href="#">Football</a></li> <li><a href="#" mce_href="#">Basketball</a></li> <li><a href="#" mce_href="#">Tennins</a></li> </ul> </li> <li><a href="#" mce_href="#">Weather</a> <ul class="myHide"> <li><a href="#" mce_href="#">Today's Weather</a></li> <li><a href="#" mce_href="#">Yesterday's Weather</a></li> <li><a href="#" mce_href="#">ForeCast</a></li> </ul> </li> <li><a href="#" mce_href="#">Contact Me</a></li> </ul></div></body> </html>

css文件-style.css

@charset "utf-8";/* CSS Document */#navigator{ margin:0px; width:200px;}#navigator>ul{list-style:none; /* 不显示项目符号*/}#navigator>ul>li{border-bottom:3px solid #33C; /* 添加下划线*/}#navigator>ul>li>a{display:block; /*区块显示*/padding:5px 5px 5px 0px;text-decoration:none; border-left:12px solid #711515;/*左边的粗红边*/border-right:1px solid #711515;}#navigator>ul>li>a:link,#navigator>ul>li>a:visited{background-color:#c11136;color:#ffffff;}#navigator>ul>li>a:hover{background-color:#990020;color:#ffff00;}/*子菜单的css样式*/#navigator ul li ul{list-style:none;margin:0px;padding:0px;}#navigator ul li ul li{ border:1px solid #ed9f9f;}#navigator ul li ul li a{display:block;background-color: #FC0;text-decoration:none;border-left:28px solid #a71f1f;border-right:1px solid #a71f1f;}#navigator ul li ul li a:link,#navigator ul li ul li a:visited{background-color:#e85070;color:#ffffff;}#navigator ul li ul li a:hover{ background-color:#c2425d; color:#ffff00;}#navigator ul li ul.myHide{display:none;}#navigator ul li ul.myShow{ display:block;}

javascript 文件 JavaScript.js

// JavaScript Documentwindow.onload=function(){ var oUI = document.getElementById("listUL"); var aLi = oUI.childNodes;//子元素 var oA; for(var i = 0; i< aLi.length; i++) { if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length) { oA = aLi[i].firstChild; //找到超链接； oA.onclick = change; //动态添加单击函数； } } }function change(){//通过父元素li，找到兄弟元素ulvar oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];//CSS交替更换来实现显、隐if(oSecondDiv.className=="myHide") oSecondDiv.className = "myShow"; else oSecondDiv.className = "myHide";}

通过以上三个文件就可以实现伸缩的两级菜单了。

对两级菜单实现横向排列。效果图如下：

实现上图可通过更改css文件中的一个部分

#navigator>ul>li{
float:left;
border-bottom:3px solid #33C; /* 添加下划线*/
padding:5px;
}

这样就实现了。

待解决，鼠标移到菜单上面自动伸缩。

得到解决：如图：

实现以上方法：

在javascript中修改函数,代码如下：

// JavaScript Documentwindow.onload=function(){ var oUI = document.getElementById("listUL"); var aLi = oUI.childNodes;//子元素 var oA; for(var i = 0; i< aLi.length; i++) { if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length) { oA = aLi[i].firstChild; //找到超链接；// oA.onclick = change; //动态添加单击函数；oA.onmouseover=change;oA.onmouseout=hide; } } }function change(){//通过父元素li，找到兄弟元素ulvar oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];//CSS交替更换来实现显、隐if(oSecondDiv.className=="myHide") oSecondDiv.className = "myShow"; else oSecondDiv.className = "myHide";}function hide(){var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];oSecondDiv.className ="myHide"}

待解决的问题；如何实现在鼠标移动导航栏上时，选择子导航栏，子导航栏不会消失的效果。

总结：实现伸缩的两级菜单的过程

1，先设计出总体框架，也就是html框架。

2，对框架中的各个节点设置相应的css样式。

3，所以的样式都设置好了，接着就是为菜单添加伸缩效果。

心得：做每一件事情都有一定的程序，按照此程序走，不会有错误，而且还能引导你前进。

如果看累了的话，可以上网店休息一下。看一下宝贝地址是: http://myrun.taobao.com/