[原创] 简单树形菜单
2009-07-16 17:18
344 查看
用YUI3做的一个简单小实例。
====================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
</head>
<style type="text/css">
.content{display:none;}
ul{list-style:none;}
</style>
<body>
<ul class="menu">
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题1</div>
<div class="content">
内容1
</div>
</li>
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题2</div>
<div class="content">
内容2
</div>
</li>
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题3</div>
<div class="content">
内容3
</div>
</li>
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题4</div>
<div class="content">
内容4
</div>
</li>
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题5</div>
<div class="content">
内容5
</div>
</li>
</ul>
<script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js" type="text/javascript"></script>
<script type="text/javascript">
YUI().use("node","event",function(Y){
function MenuItem(node){
var imgSrc = ["http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif","http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/collapse.gif"];
var btn = node.query(".btn");
var content = node.query(".content");
btn.on("click",function(){
Y.all(".content").setStyle("display","none");
Y.all(".btn").set("src",imgSrc[0]);
if(content.getStyle("display") == "none"){
content.setStyle("display","block");
btn.set("src",imgSrc[1]);
} else {
content.setStyle("display","none");
btn.set("src",imgSrc[0]);
}
},this);
}
Y.all(".menu li").each(function(n,k){
new MenuItem(n);
});
});
</script>
</body>
</html>
============================================================
====================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
</head>
<style type="text/css">
.content{display:none;}
ul{list-style:none;}
</style>
<body>
<ul class="menu">
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题1</div>
<div class="content">
内容1
</div>
</li>
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题2</div>
<div class="content">
内容2
</div>
</li>
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题3</div>
<div class="content">
内容3
</div>
</li>
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题4</div>
<div class="content">
内容4
</div>
</li>
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题5</div>
<div class="content">
内容5
</div>
</li>
</ul>
<script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js" type="text/javascript"></script>
<script type="text/javascript">
YUI().use("node","event",function(Y){
function MenuItem(node){
var imgSrc = ["http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif","http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/collapse.gif"];
var btn = node.query(".btn");
var content = node.query(".content");
btn.on("click",function(){
Y.all(".content").setStyle("display","none");
Y.all(".btn").set("src",imgSrc[0]);
if(content.getStyle("display") == "none"){
content.setStyle("display","block");
btn.set("src",imgSrc[1]);
} else {
content.setStyle("display","none");
btn.set("src",imgSrc[0]);
}
},this);
}
Y.all(".menu li").each(function(n,k){
new MenuItem(n);
});
});
</script>
</body>
</html>
============================================================
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [原创] 简单树形菜单
- JS+CSS简单树形菜单实现方法
- jquery 简单二级树形菜单
- 构建简单的json树形菜单
- 原创：Js解析xml文件并简单实现省市区级联菜单(并解决各浏览器兼容性问题).
- Extjs学习笔记-1.TreePanel+TabPanel简单的树形菜单
- JQUERY简单的树形菜单制作
- JS+CSS简单树形菜单实现方法
- jquery,tree无限级树形菜单+简单实用案例
- 简单的右键菜单编剧树形节点
- 用jQuery写的简单两级树形菜单
- 20行代码打造MSDN无限及树形菜单(treeview)[原创]！
- 一个简单的树形菜单
- javascript树形菜单简单实例
- dtree编写简单的树形菜单组件
- jquery,tree无限级树形菜单+简单实用案例
- 简单的 ul li 树形菜单
- 原创:OA软件无限级树形菜单(读数据库)源程序(VB.NET)
- CSS之简单树形菜单