原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
菜单制作详细教程二
菜单二说明文档
全部源码在最后面：
一,整体的思路
菜单二首先加载样式表simple.css，simple.css样式表中首先设置二级菜单为横着的。然后设置菜单栏中的二级菜单隐藏起来。最后通过加载click_menu.js脚本，给每个li元素绑定了onclick（单击事件），单击li元素，就显示隐藏的超链接，当鼠标移到另外的一个li元素时，通过脚本事件设置以前的li元素的样式为隐藏，然后当前单击的li元素的样式为显示。于是就做成了单机就可以显示二级菜单的菜单二
二，具体的分析：
Css 部分
一样式表中如何设置菜单栏为横着：
效果如下图：
#menu li.sub {background:#f80;float:left; }
里面的float:left; 属性设置#menu li.sub 元素向着悬浮。
注意：你可以通过去掉这个属性检测是不是通过这个属性就可以设置菜单栏为横着。
二样式表中设置二级菜单为隐藏
效果如下图：
#menu ul {position:absolute;left:-9999px;width:128px;}
里面的left:-9999px;属性，意思是向左贴近，因为-9999为负数，所以就被影藏了起来。详情请链接：/wp_design/blog/static/13999717120120295198574/
三，单击li元素的背景颜色改变：
#menu li.click {background:Blue;}
注意上面这个是css里特有的属性选择器里的后代选择器后代选择器#menu li.click ul{left:0; top:24px; background:url(transparent.gif);}
这个样式只有class为name下的li元素。且改li元素绑定了click函数，且该函数被触发了，那么这个LI元素下的ul元素才会应用上面的样式，而上面的样式正好是显示被隐藏的二级菜单。样式里的left:0; 0不是负数，所以不会被隐藏。
脚本部分
脚本代码：
clickMenu = function(menu) {
var getEls = document.getElementById(menu).getElementsByTagName(LI);
var getAgn = getEls;
for (var i=0; igetEls.length; i++) {
getEls[i].onclick=function() {
for (var x=0; xgetAgn.length; x++) {
getAgn[x].className=getAgn[x].className.replace(unclick, );
getAgn[x].className=getAgn[x].className.replace(click, unclick);
}
if ((this.className.indexOf(unclick))!=-1) {
this.className=this.className.replace(unclick, );;
}
else {
this.className+= click;
}
}
}
}
首先注意三个函数（打红部分）clickMenu 和function(menu) 和function()
语句一：clickMenu = function(menu) 这条语句是把这两个函数绑定，相当C语言的 把函数function(menu) 赋予函数指针clickMenu 一样，所以引用clickMenu 函数实际上和i调用function(menu) 函数。
语句二：getEls[i].onclick=function()
这条语句同样也是函数 的绑定。跟上面一条语句是一样的。
这里需要讲清楚的是。脚本如何控制 html里面的元素的各种属性。
var getEls = document.getElementById(menu).getElementsByTagName(LI);
var getAgn = getEls;
上面是定义两个变量。在javascript里不需要指明变量是什么类型，系统会自动判断他们是什么类型。
Document是文档，simple.html这张网页，在脚本语言中是代表了一个windows（窗体）,而document正好就是代表了simple.html这个窗体的所有内容(文档)。getElementById是一个通过元素的id号（ById）获取元素（getElementById），二getElementsByTagN
文档评论（0）