当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

下拉菜单JS代码如何写

下拉菜单JS代码如何写

更新时间:2023-06-20 文章作者:未知 信息来源:网络 阅读次数:

编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

下拉菜单JS代码怎么写

【实例描述】

分类下拉菜单可以尽可能地显示网站的导航信息。本例学习如何制作下拉式的导航菜单。

【实例代码】

 

<html> <head> <TITLE>下拉菜单-本站(www.xue51.com)</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script language="javascript"> //为各个菜单项定义鼠标事件 startList = function() { if (document.all&&document.getElementById) {   navRoot = document.getElementById("mynav"); //找到菜单根目录     for (i=0; i<navRoot.childNodes.length; i++)     {         node = navRoot.childNodes[i];         if (node.nodeName=="LI") {             node.onmouseover=function() {             this.className+=" over"; }              node.onmouseout=function() {             this.className=this.className.replace(" over", ""); }      }    }  } } window.onload=startList; </script>

需要在body中添加一些菜单项,注意菜单项根目录的ID必须为“mynav”代码如下所示:

<style type="text/css"> body {  font: normal 11px verdana;  } ul {   margin: 0;   padding: 0;   list-style: none;   width: 150px;   border-bottom: 1px solid #ccc;   } ul li {  position: relative;  } li ul {   position: absolute;   left: 149px;   top: 0;   display: none;   }

/* 菜单项的样式 */ ul li a {   display: block;   text-decoration: none;   color: #777;   background: #fff;   padding: 5px;   border: 1px solid #ccc;   border-bottom: 0;   } * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } li:hover ul, li.over ul { display: block; } </style>

</head> <body> <ul id="mynav">  <li><a href="#">首页</a></li>  <li><a href="#">帮助</a>  <ul>  <li><a href="#">历史</a></li>  <li><a href="#">团队</a></li>  <li><a href="#">办公室</a></li>  </ul>  </li>  <li><a href="#">客服</a>  <ul>  <li><a href="http://www.google.com">网页设计</a></li>  <li><a href="#">网络销售</a></li>  <li><a href="#">站点服务</a></li>  <li><a href="#">区域服务</a></li>  </ul>  </li>  <li><a href="#">联系方式</a>  <ul>  <li><a href="#">国家</a></li>  <li><a href="#">城市</a></li>  <li><a href="#">地址</a></li>  <li><a href="#">电话</a></li>  </ul>  </li> </ul> </body> </html>

【运行效果】

 下拉菜单运行效果

【难点剖析】

本例在设计时使用了“ul”和“li”元素完成菜单项的设计:使用JavaScript中的“childNodes”属性来获取每一个菜单项。注意“childNodes”是JavaScriptDOM的重要组成部分,在Ajax应用中起了关键作用。

【源码下载】

如果你不愿复制代码及提高代码准确性,你可以点击:下拉菜单 进行本实例源码下载 


使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html