JavaScript伸缩的菜单简单示例
来源:互联网 发布:linux mysql开始连接 编辑:程序博客网 时间:2024/05/29 17:53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>伸缩的菜单</title> <style> <!-- body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation > ul { list-style-type:none;/* 不显示项目符号 */ margin:0px; padding:0px; } #navigation > ul > li { border-bottom:1px solid #ED9F9F;/* 添加下划线 */ } #navigation > ul > li > a{ display:block;/* 区块显示 */ padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #711515;/* 左边的粗红边 */ border-right:1px solid #711515;/* 右侧阴影 */ } #navigation > ul > li > a:link, #navigation > ul > li > a:visited{ background-color:#c11136; color:#FFFFFF; } #navigation > ul > li > a:hover{ /* 鼠标经过时 */ background-color:#990020;/* 改变背景色 */ color:#ffff00;/* 改变文字颜色 */ } /* 子菜单的CSS样式 */ #navigation ul li ul{ list-style-type:none; margin:0px; padding:0px 0px 0px 0px; } #navigation ul li ul li{ border-top:1px solid #ED9F9F; } #navigation ul li ul li a{ display:block; padding:3px 3px 3px 0.5em; text-decoration:none; border-left:28px solid #a71f1f; border-right:1px solid #711515; } #navigation ul li ul li a:link, #navigation ul li ul li a:visited{ background-color:#e85070; color:#FFFFFF; } #navigation ul li ul li a:hover{ background-color:#c2425d; color:#ffff00; } #navigation ul li ul.myHide{ /* 隐藏子菜单 */ display:none; } #navigation ul li ul.myShow{ /* 显示子菜单 */ display:block; } --> </style> <script language="javascript"> function change(){ //通过父元素li,找到兄弟元素ul var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0]; //CSS交替更换来实现显、隐 if(oSecondDiv.className == "myHide") oSecondDiv.className = "myShow"; else oSecondDiv.className = "myHide"; } window.onload = function(){ var oUl = document.getElementById("listUL"); var aLi = oUl.childNodes;//子元素 var oA; for(var i=0;i<aLi.length;i++){ //如果子元素为li,且这个li有子菜单ul if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){ oA = aLi[i].firstChild;//找到超链接 oA.onclick = change;//动态添加点击函数 } } } </script> </head> <body> <div id="navigation"> <ul id="listUL"> <li><a href="#">Home</a></li> <li><a href="#">News</a> <ul class="myHide"> <li><a href="#">Lastest News</a></li> <li><a href="#">All News</a></li> </ul> </li> <li><a href="#">Sports</a> <ul class="myHide"> <li><a href="#">Basketball</a></li> <li><a href="#">Football</a></li> <li><a href="#">Volleyball</a></li> </ul> </li> <li><a href="#">Weather</a> <ul class="myHide"> <li><a href="#">Today's Weather</a></li> <li><a href="#">Forecast</a></li> </ul> </li> <li><a href="#">Contact Me</a></li> </ul> </div> </body> </html>
0 0
- JavaScript伸缩的菜单简单示例
- JavaScript伸缩的菜单
- 动画伸缩显示视图的简单示例
- Javascript 垂直滑动伸缩菜单
- Javascript 垂直滑动伸缩菜单
- 简单的伸缩菜单-实例教学-Flash-网页制作
- 简单的伸缩菜单-实例教学-Flash-网页制作
- 菜单的展开和伸缩
- 使用纯JavaScript+CSS制作伸缩菜单
- JS伸缩的菜单 + 右键菜单
- 一个简单的javascript菜单
- 简单的Javascript折叠菜单
- 简单的JS下拉菜单示例代码
- 伸缩菜单
- JavaScript+CSS下拉菜单系列(三)——伸缩不限,高度不固定的带缓动的下拉菜单
- JavaScript+CSS下拉菜单系列(二)——伸缩个数不受限制,高度不固定的下拉菜单
- 象QQ一样的自动伸缩菜单
- JQuery 实例之 伸缩的菜单
- *.ascx *.asax *.aspx.resx *.asax.resx是什么文件
- 动态磁盘改分区
- VM虚拟机错误:Transport(VMDB)error -44:Message
- POJ 2001 Shortest Prefixes【字典树】
- MySQL实现序列(Sequence)效果
- JavaScript伸缩的菜单简单示例
- HBase - 数据模型的特殊属性 | 那伊抹微笑
- 程序员如何爱护自己的眼睛
- spring常用注解
- 使用Cadence绘制PCB流程(个人小结)
- oracle 10g不支持 continue解决方法
- PCIe SSD KVM IO性能调优
- poj 1328 Radar Installation 【贪心】
- gcc提高程序性能的几个参数