艺术迷（fansart.com） 首页 收藏本站 RSS频道
艺术迷首页 -> 网页设计 -> 类似与QQ的好友/黑名单之类的树型菜单_极品--javascript 特效

类似与QQ的好友/黑名单之类的树型菜单_极品--javascript 特效

2006-3-30　　　作者：　　　来源：互联网
页面功能： 【评论】 【有错就点】 【字体：大 中 小】 【打印】 【关闭】 【收藏本页】
这里收藏了JavaScript经典特效集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<script>
if (!document.getElementById)
document.getElementById = function() { return null; }

function initializeMenu(menuId‚ actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);

if (menu == null || actuator == null) return;

//if (window.opera) return; // I’m too tired

actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)";
actuator.onclick = function() {
var display = menu.style.display;
this.parentNode.style.backgroundImage =
(display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";
menu.style.display = (display == "block") ? "none" : "block";

return false;
}
}
window.onload = function() {
initializeMenu("productsMenu"‚ "productsActuator");
initializeMenu("newPhonesMenu"‚ "newPhonesActuator");
initializeMenu("compareMenu"‚ "compareActuator");
}
</script>
<style>
body {
font-family: verdana‚ helvetica‚ arial‚ sans-serif;
}

#mainMenu {
background-color: #EEE;
border: 1px solid #CCC;
color: #000;
width: 203px;
}

#menuList {
margin: 0px;
padding: 10px 0px 10px 15px;
}

li.menubar {
background: url(/images/plus.gif) no-repeat 0em 0.3em;
font-size: 12px;
line-height: 1.5em;
list-style: none outside;
}

.menu‚ .submenu {
display: none;
margin-left: 15px;
padding: 0px;
}

.menu li‚ .submenu li {
background: url(/images/square.gif) no-repeat 0em 0.3em;
list-style: none outside;
}

a.actuator {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}

a.actuator:hover {
text-decoration: underline;
}

.menu li a‚ .submenu li a {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}

.menu li a:hover‚ submenu li a:hover {
/*border-bottom: 1px dashed #000;*/
text-decoration: underline;
}

span.key {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="mainMenu">
<ul id="menuList">
<li class="menubar">
<a href="#" id="productsActuator" class="actuator">图秀地带收藏夹</a>
<ul id="productsMenu" class="menu">
<li>
<a href="#" id="newPhonesActuator" class="actuator">我的好友</a>
<ul id="newPhonesMenu" class="submenu">
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
</ul>
</li>
<li>
<a href="#" id="compareActuator" class="actuator">陌生人</a>
<ul id="compareMenu" class="submenu">
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</BODY>
</HTML>

页面功能： 【评论】 【有错就点】 【字体：大 中 小】 【打印】 【关闭】 【收藏本页】
在百度中搜索更多相关主题
很多的脚本分页2006-3-30
超级强大的表单验证2006-3-30
漂亮的脚本日历2006-3-30
进入‚退出页面的各种效果!2006-3-30
图片之间的切换2006-3-30
类似与QQ的好友/黑名单之类的树型菜单_极品2006-3-30
让你的文本链接渐隐渐显2006-3-30
接收键盘指令的脚本2006-3-30
鼠标旁边的提示信息‚类似与163登录后的页面提示效果2006-3-30
很实用且必用的小脚本代码:2006-3-30
网友评论
发表评论
您的姓名： 匿名发送
电子邮件：
评论内容：
不能超过100个字符

所有留言只代表网友个人观点，不代表本站观点。
请各位遵纪守法并注意语言文明。
新闻搜索
关 键 词：
搜索范围：
全站精华
图文精彩
清风楼书（一）[图]--平面广告
【2006-3-29 10:52:08】
清风楼书（一）
painter超级可爱的上色过程（韩国）[图]--CG插画
【2006-4-5 8:52:28】
painter超级可爱的上色过程（韩国）
古典楼书(精品欣赏)（1）[图]--平面广告
【2006-4-5 15:03:08】
古典楼书(精品欣赏)（1）
美国插画师kevindart作品(1)[图]--CG插画
【2006-4-11 15:34:43】
美国插画师kevindart作品(1)
美国插画师kevindart作品[图]--CG插画
【2006-4-11 15:37:32】
美国插画师kevindart作品
荷兰著名画家Anton
【2006-4-11 15:49:41】
荷兰著名画家Anton Pieck插画
非常可爱的儿童插画（1）[图]--CG插画
【2006-4-11 15:59:16】
非常可爱的儿童插画（1）
回忆紫禁城里那些逝去的[图]--中国艺术
【2006-4-11 16:34:31】
回忆紫禁城里那些逝去的
国粹京剧脸谱表情[图]--界面设计
【2006-4-11 17:51:33】
国粹京剧脸谱表情
高傲的玫瑰-温碧霞[图]--摄影艺术
【2006-4-12 8:58:34】
高傲的玫瑰-温碧霞
北邦插画欣赏（1）[图]--CG插画
【2006-4-13 9:49:02】
北邦插画欣赏（1）
yashasi插画作品欣赏[图]--CG插画
【2006-4-13 18:32:29】
yashasi插画作品欣赏
cg插画欣赏[图]--CG插画
【2006-4-14 9:21:18】
cg插画欣赏
溯源居广告欣赏--小红人[图]--平面广告
【2006-4-14 14:45:57】
溯源居广告欣赏--小红人
房地产广告设计-之水墨风格1[图]--平面广告
【2006-4-14 15:56:06】
房地产广告设计-之水墨风格1
泊林花园推广故事绘本（1）[图]--CG插画
【2006-4-20 11:34:33】
泊林花园推广故事绘本（1）
泊林花园推广故事绘本（2）[图]--CG插画
【2006-4-20 11:43:23】
泊林花园推广故事绘本（2）
万科西山庭院.格.沉.尊[图]--平面广告
【2006-4-21 9:08:35】
万科西山庭院.格.沉.尊
2006夏日流行时尚，创意无限街头华丽[图]--时装魅影
【2006-4-22 16:46:51】
2006夏日流行时尚，创意无限街头华丽
水木清华地产广告欣赏[图]--平面广告
【2006-4-26 9:31:54】
水木清华地产广告欣赏