Hauy`s blog

专注于用户体验、交互设计、web前端技术和web标准化建设。

折叠式树形菜单

2006.04.13 - 4条评论 »

折叠式树形菜单

<!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=”http://www.freefancy.com/blog/#” mce_href=”http://www.freefancy.com/blog/#” id=”productsActuator” class=”actuator”>图秀地带收藏夹</a>
 <ul id=”productsMenu” class=”menu”>
 <li>
 <a href=”http://www.freefancy.com/blog/#” mce_href=”http://www.freefancy.com/blog/#” id=”newPhonesActuator” class=”actuator”>我的好友</a>
 <ul id=”newPhonesMenu” class=”submenu”>
 <li><a href=”http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001″ mce_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″ mce_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″ mce_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″ mce_href=”http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001″>李四$[$10000002$]$</a></li>
 </ul>
 </li>
 <li>
 <a href=”http://www.freefancy.com/blog/#” mce_href=”http://www.freefancy.com/blog/#” id=”compareActuator” class=”actuator”>陌生人</a>
 <ul id=”compareMenu” class=”submenu”>
 <li><a href=”http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001″ mce_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″ mce_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″ mce_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″ mce_href=”http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001″>李四$[$10000002$]$</a></li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
 </div>
 </body>
</BODY>
</HTML>

分类: 客户端脚本 -

引用 (Trackbacks)

使用这个网址对这篇文章进行引用。


评论

订阅这篇文章评论的RSS聚合
  1. Informative update I did not know that! Its good to see you updating this even during these tough economic times.
    Sarah,
    Watch Daybreakers Online site admin, fellow blogger.

    offiprory - 十二月 31, 2009 @12:33 下午
  2. Good Afternoon

    I just wanted to say hello and see if you guys can help me out a bit because i really like this place and the
    people in here always seems to be very handy . I need some advice regarding my laptop because its a
    bit old and i need to change it, its a windows laptop and i want to get a MacBook Pro, should i make this step
    and change from windows to Apple ? By the way i just found a page where you can win a
    Free Apple Macbook and i think is worth to try its free. Thanks for your help !

    Win a Free Apple Macbook

    SCOUSYITATA - 十二月 31, 2009 @3:52 下午
  3. Informative read, I did not know this!
    JenniferSmith,
    Site Admin watch UFC 109 online

    Prumnunpant - 一月 11, 2010 @2:35 上午
  4. hello im new to the forum, this is a
    great place to be hope im welcome

    vista registry

    greetz

    inhefrite - 一月 29, 2010 @8:00 上午

发表您的评论


(必填)
添加blog地址

搜索

输入关键词并按回车进行搜索

页面

文档


按月存档:

订阅

订阅博客文章

链接


我的 Google Reader 分享

同步



程序提供:WordPress 主题设计:Dalarnas

Hauy`s blog © 2010 — 保留部分权利