用JS做的简单的可折叠的两级树形菜单


Posted in Javascript onSeptember 21, 2013
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<hrad> 
<metahttp-equiv="content-type"content="text/html;charset=utf-8"> 
<title>可折叠的两级菜单</title> 
<styletype="text/css"> 
<!-- 
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:1pxsolid #ED9F9F; 
} 
#navigation > ul >li > a{ 
display:block; 
padding:5px5px 5px 0.5em; 
text-decoration:none; 
border-left:12pxsolid #711515; 
border-right:1pxsolid #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; 
} 
.txt{ 
background-color:#c11136; 
color:#FFFFFF; 
padding:5px5px 5px 0.5em; 
text-decoration:none; 
border-left:12pxsolid #711515; 
border-right:1pxsolid #711515; 
} /* 子菜单的CSS样式 */ 
#navigation ul li ul{ 
list-style-type:none; 
margin:0px; 
padding:0px0px 0px 0px; 
} 
#navigation ul li ulli{ 
border-top:1pxsolid #ED9F9F; 
} 
#navigation ul li ulli a{ 
display:block; 
padding:3px3px 3px 0.5em; 
text-decoration:none; 
border-left:28pxsolid #a71f1f; 
border-right:1pxsolid #711515; 
} 
#navigation ul li ulli a:link, #navigationul li ul lia:visited{ 
background-color:#e85070; 
color:#FFFFFF; 
} 
#navigation ul li ulli a:hover{ 
background-color:#c2425d; 
color:#ffff00; 
} 
#navigation ul li ul.myHide{ /* 隐藏子菜单 */ 
display:none; 
} 
#navigation ul li ul.myShow{ /* 显示子菜单 */ 
display:block; 
} 
--> 
</style> 
<scriptlanguage="javascript"> 
window.onload=function(){ 
varlistUL=document.getElementById("listUL"); 
varolist=listUL.childNodes; 
varoa=0; 
for(var i = 0; i < olist.length; i++) { 
if(olist[i].tagName=="LI"&&olist[i].getElementsByTagName("ul")[0]){ 
oa=olist[i]; 
oa.onclick=change; 
} 
} 
functionchange(){ 
varos=this.getElementsByTagName("ul")[0]; 
if(os.className=="myHide") 
os.className="myShow"; 
else 
os.className="myHide"; 
} 
} 
</script> 
</hrad> 
<body> 
<divid="navigation"> 
<ulid="listUL"> 
<li> 
<divclass="txt">Home</div> 
</li> 
<li> 
<divclass="txt">news</div> 
<ulclass="myHide"> 
<li><ahref="#">lastest news</a></li> 
<li><ahref="#">all news</a></li> 
</ul> 
</li> 
<li> 
<divclass="txt">sports</div> 
<ulclass="myHide"> 
<li><ahref="#">lastest news</a></li> 
<li><ahref="#">all news</a></li> 
</ul> 
</li> 
<li> 
<divclass="txt">weather</div> 
<ulclass="myHide"> 
<li><ahref="#">lastest news</a></li> 
<li><ahref="#">all news</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
React如何避免重渲染
Apr 10 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 #Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 #Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 #Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 #Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 #Javascript
script不刷新页面的联动前后代码
Sep 18 #Javascript
js 中的switch表达式使用示例
Jun 03 #Javascript
You might like
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
浅谈PHP的反射API
2017/02/26 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
实例详解Python装饰器与闭包
2019/07/29 Python
pymysql的简单封装代码实例
2020/01/08 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Python requests获取网页常用方法解析
2020/02/20 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
安全标准化实施方案
2014/02/20 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
警校毕业生自我评价
2014/04/06 职场文书
关于爱国的标语
2014/06/24 职场文书
基石观后感
2015/06/12 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
Nginx的gzip相关介绍
2022/05/11 Servers