如何实现伸缩的两级菜单

最新推荐文章于 2022-05-07 10:36:11 发布

wwttqq85538649

最新推荐文章于 2022-05-07 10:36:11 发布

阅读量888

点赞数

分类专栏： JavaScript css 文章标签： javascript function stylesheet html 框架 css

本文链接：https://blog.csdn.net/wwttqq85538649/article/details/5546888

版权

JavaScript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

css

24 篇文章 0 订阅

订阅专栏

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

这是前后效果图

前台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 Document window.οnlοad=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，找到兄弟元素ul var 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 Document window.οnlοad=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.οnmοuseοver=change; oA.οnmοuseοut=hide; } } } function change() { //通过父元素li，找到兄弟元素ul var 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/