请使用pkblogs访问这里

大约从10月25日21点30分开始，帝国各大行省都传出消息，无法浏览由Blogger beta支持的网页，而使用代理则可以正常访问，因此基本可以确定Blogspot域名再次被GFW封锁，具体原因不明

本来Blogger beta刚推出的时候，Blogspot正好解封，很多人都以为这是“谷歌”努力的结果，我当时也认为Blogger在Google的本地化战略中占有一个重要地位，现在看来并非如此

查看全文!

大约从10月25日21点30分开始，帝国各大行省都传出消息，无法浏览由Blogger beta支持的网页，而使用代理则可以正常访问，因此基本可以确定Blogspot域名再次被GFW封锁，具体原因不明，也许跟这类事有关联？……

如果把帝国的网络比做FORGOTTEN REALMS，GFW就是AO，你无法理解它，它也不抛头露面，却掌握有终极的权力。而Google只能算是信徒数量不足的外来神祗。

本来Blogger beta刚推出的时候，Blogspot正好解封，很多人都以为这是“谷歌”努力的结果，我当时也认为Blogger在Google的本地化战略中占有一个重要地位，现在看来并非如此

其实我从一开始就可以选择用WORDPRESS来建立BLOG，感谢NTRPG，我不并缺少PHP+MYSQL空间。我使用Blogger的目的其实就是想用行动来支持Google，而且比起WORDPRESS强大的插件库，用Blogger做出新的功能和效果，显然更有挑战性。

我准备暂时观望一段时间，如果确定没有挽回的余地，那就只好用WORDPRESS重新做一个BLOG了。目前我已经修改了feedburner生成的RSS地址，今后访问这个BLOG请使用新地址：http://www.pkblogs.com/dexteryy/

到华中科技大学参加朱学恒先生的演讲会

感谢量子物理达人Zipy的提醒，我昨天去参加了朱学恒先生（不认识的话看这里：链接1，链接2，链接3）在华中科技大学的报告会，本来以为这次活动只是单纯的介绍OOPS，因为我很熟悉这方面的东西，所以最大的期待只是能亲眼见到传说中的朱恐龙，但当我最后从研究生活动中心走出来的时候，只有两个词能形容自己的感受：获益匪浅，不虚此行。

查看全文!

感谢量子物理达人Zipy的提醒，我昨天去参加了朱学恒先生（不认识的话看这里：链接1，链接2，链接3）在华中科技大学的报告会，本来以为这次活动只是单纯的介绍OOPS，因为我很熟悉这方面的东西，所以最大的期待只是能亲眼见到传说中的朱恐龙，但当我最后从研究生活动中心走出来的时候，只有两个词能形容自己的感受：获益匪浅，不虚此行。

虽然目的是推广OOPS，但演讲的内容主要是创意、勇敢、人生的选择、成功的标准之类的东西，进行了一个小时才提到OOPS，而且很快就把话题转移到他把版税花光的事情上，可以说朱学恒先生是在毫无保留的分享自己的理念和人生经验，既是针对大学生的励志、思想的启迪、也是一种人生道路的参考……

好罢，以上的介绍有点像中学生作文了，但是我确实不擅长倾听别人讲话，也不擅长总结复述，所以很难把演讲的内容传达给你，据说在北理演讲时有录象，如果搞到了我一定帖上来分享。

演讲中播放了大量视频，比如wii的E3演示视频、Jobs的毕业典礼演讲，虽然对我来说没什么新奇的，但很遗憾的是……末尾放的那一段MTV，我没记住名字，是日文歌曲，有谁知道一定要告诉我！

比较有趣的是，朱学恒先生与我的第一次交流居然是关于ipod，当时的话题是关于创意，讲到了ipod和Jobs，朱恐龙问在场的学生谁有ipod，我当然就得意的把手边的家伙举起，还有一名义工在旁边推波助澜：“这里有这里有！”，于是朱恐龙对我说了第一句话：“你一定很有钱……”，我当时就有两脚朝天摔倒的冲动，朱恐龙继续介绍ipod，之后对我说了第二句话：“我不仅要说你有钱，还要说你很有品位”，接下来是第三话：“你不要这么羞愧……”，我靠……

我绝对没有炫耀ipod的意思，毕竟这是毕业工作后才赚钱买的……但是有一次SHOW的机会没抓到却让我很遗憾，就是在朱恐龙讲到漫画的时候，问“最富有的超级英雄是谁”，明明是我最先喊布鲁斯韦恩却没有被点到……怒！

不过朱学恒先生最喜欢的似乎不是蝙蝠侠，而是蜘蛛侠（这么说他属于Marvel阵营么！），蜘蛛侠的名言：With which power comes which responsibility(能力越强，责任越重)，是他最喜欢的一句话。

演讲最后的提问非常踊跃，我都找不到机会，幸好演讲结束后朱学恒先生一直留在教室里与大家交流、合影（跟传闻中一样），我终于有机会上前去介绍自己是龙与地下城/奇幻文化爱好者（可惜没机会提到“最深的地下城”和“dexteryy”），并且问了一个关于奇幻基金会的问题。第一个要签名的也是我……虽然没准备好书和笔，只能随便用圆珠笔写在OOPS宣传册上……根本看不清嘛……

签名的照片：（很抱歉有些东西喧宾夺主了……）



在活动中获得的一些信息：

1. 朱恐龙的3000万新台币即将花光，他以前在上海住2000RMB一晚上的酒店，现在是100RMB一晚上……
   
   
2. 维护OOPS项目每年的资金大概需要20万或40万，因为朱恐龙说自己已经谈好了国外一个著名基金的赞助，两年里提供20万，但是每年还有一半的资金缺口
   
   
3. 奇幻基金会一直没有赢利过，因为搞了很多免费的活动。每年大概要赔10万
   
   
4. OOPS的T恤很棒，黑色，背后写着“数码骑士，济弱扶倾”，酷啊！其实再加上竖排的“战你娘亲”就更棒了！
   
   
5. 我跟朱学恒先生说大陆奇幻圈子义务翻译资料的时候他很有认同感。我想他正是因为熟悉这种模式，借鉴这种模式来运作OOPS，所以只花了MIT百分之一的成本就使项目网站的访问量超过MIT


6. 朱学恒先生认为人生最重要的是“不悔”，而不是“成功”，所以虽然他现在自认是失败者，但是却做了自己想做的事，不需要后悔，这就是他想要的人生

对于最后一点，我很有认同感，“不后悔”也是我对自己的要求，比如WOW，这是我从高三就开始关注的游戏，虽然大陆的MMORPG游戏环境很差，公会、RAID这些东西也让人身心疲惫，但我从来没有后悔过自己在这个游戏上投入了一年的时间，同样当我无限期AFK以后，可能再没机会去体验新副本、跨服务器战场甚至资料片，我也不后悔。后悔便是一种否定，否定自己的过去是最可悲的事情，做过每一件事都必须有收获，都必须是自己真正想做的事情。Planescape: Torment里那个最著名的问题“What can change the nature of a man?”，我给出的答案是“悔恨”，虽然对游戏本身的内涵来说最合适的答案是“信仰”，不后悔意味着我能永远保持自我的本质，我的存在价值也永远不会被否定。

跑题了，继续说演讲的事，朱先生还有一个观点就是要勇于创新勇于尝试，不怕失败，“做一件事失败了”跟“什么也不做”相比，其实并没有什么损失，而且就算有成百上千次失败，只要成功一次，说不定就全都赚回来了。对于这点我也很认同，只是“空想”和“计划”永远无法改变任何事情，“行动”才是重要的，这并不是说要像野蛮人或密韵者那样先行动再思考，而是要勇敢的把想法附诸实现，朱先生本身就是最好的例子，因为赶上《魔戒》电影的上映而意外赚到三千万版税，这是一次偶然的成功，但如果朱先生当时没有勇气，不敢打电话给出版社要求重新翻译这部小说，成功的机会就永远不会降临到他头上。OOPS计划也是一样，通过网络协作义务翻译本身是一个很大胆的创意，正是因为敢于尝试这种创意，才有了现在的庞大项目和众多免费中文资源。

其实我去听演讲的过程也是对这些观点的一种验证，因为我并不是华工的学生，而且今天公司加班，6点半才上车（活动7点开始），而那所大学的位置在接近郊区的地方，在GOOGLE MAPS上面都看不清楚XD 当时明知道会迟到却没有放弃，明知道自己是路盲而且没有掌握目的地的任何资料，甚至连是否确有其事都不敢肯定， 仍然抛开各种顾虑尽力去尝试，因为这是自己真正想做的事情。最后虽然确实迟到了半小时，但是，一个准御宅族，在一个不但黑漆漆而且到处都是十字路口的鬼地方，通过频繁的搭讪和提问，找到一个连很多本校学生都不知道的教室，这个过程本身就很华丽哑，而且事先计划中的一些东西都实现了，也没有错过很多精彩的演讲内容，甚至比预想的收获要多……

PS：华中科技大学的校园真可恶，全是十字路口，让我想起魔法门8里Ironsand的那个地下迷宫……

最后当然也要说说听完演讲回家的过程……啊，你觉得这很容易吗！其实当我在校园里寻找“研究生活动中心”的时候，最担心的就是“进去容易出来难”，因为进去的时候频繁问路已经很像白痴了，我实在不好意思开口问”校门在哪里“这种更愚蠢的问题。演讲结束后我就横了心直接拉住路边一个女生实话实说：“你好，我想问一个很蠢的问题哑，请问去校门该怎么走？”，她说：“你跟着我走就可以了”……难题就这样轻易解决了。她还以为我是大一学生，后来我才知道，演讲散场的时候正赶上附中放学，路上大部分人都在往校门方向走-____-b

七兄弟——吴宇森牌超级英雄漫画

两个月前，吴宇森在Yahoo! Answers向全球网民提问：“为什么我们总是痴迷于漫画中的英雄并乐此不疲呢？”问题的答案似乎不重要，重要的是我们知道吴宇森正致力于一部美漫式的超级英雄作品。

神通广大的pusher昨天给我推荐了一部新漫画，名字就是John Woo's 7 Brothers，虽然叫这个名字，其实吴只负责提供大纲，真正的作者是Garth Ennis和Jeevan Kang，前者正是The Punisher（惩罚者/复仇者，你不可能没玩过capcom的那款著名街机游戏罢！）和Constantine（康斯坦丁/地狱神探，这个也电影化了）的作者！这里是官方网站

查看全文!

两个月前，吴宇森在Yahoo! Answers向全球网民提问：“为什么我们总是痴迷于漫画中的英雄并乐此不疲呢？”问题的答案似乎不重要，重要的是我们知道吴宇森正致力于一部美漫式的超级英雄作品。

神通广大的pusher昨天给我推荐了一部新漫画，名字就是John Woo's 7 Brothers，虽然叫这个名字，其实吴只负责提供大纲，真正的作者是Garth Ennis和Jeevan Kang，前者正是The Punisher（惩罚者/复仇者，你不可能没玩过capcom的那款著名街机游戏罢！）和Constantine（康斯坦丁/地狱神探，这个也电影化了）的作者！这里是官方网站

我刚刚看完了漫画的#1，一开始居然是郑和下西洋的介绍，说中国人早在1423年就环游了世界并发现了所有大陆，但回国后却没有受到英雄般的欢迎，这次伟大的探险也最终被历史遗忘……然后转到洛杉矶的街头……六个男人分别被神秘的信件邀请到洛杉矶的一栋小屋里（当然信里附带了一点小钱），除了一份名单，他们对聚集在这里的目的一无所知，而一个神秘的华裔女人此时正在介入危险的街头斗殴。另一方面，一只中国的探险队在长城地下三英里的洞穴里发现了神秘的事物，据说这里是“last resting place of”....................“a thing not easily described”，我最讨厌卖关子……难道……这里有郑和隐藏的神秘宝藏？那七个强者就是为了夺取宝藏而组建的超级英雄战队？！……

pusher居然考虑翻译这部漫画，我真想看看他是怎么翻译那些脏话的，是的，这部漫画里有很多脏话……可以说到处都是……也许比南方公园的脏话密度还要高……如果你有这方面爱好，强烈推荐你去看……

Newsarama对Garth Ennis的采访，有几张很华丽的人物设定图：


下载：



截图:
（注意第4幅洞壁上的文字，虽然这个地方写白话很傻，不过“地狱之子”隐含着什么意思呢，因为漫画一开始就提到皇帝是son of heaven，那么这里难道是……比如参加郑和探险的高级官员带领船员在地下建立王国……喔这个好棒……）

[造车轮计划]今天写了一个右键菜单的JS类

右键菜单在web交互设计里并不是很常用的东西，因为普通用户在浏览网页时很少会想到能用右键来操作，就像他们很难习惯拖拽一样，但在某些环境中，拖拽会成为很自然的操作——其实都跟桌面软件的操作习惯有关。所以右键菜单在某些情况下也是很有用的，抓虾的feed列表里就可以使用右键菜单，如果网页里调用了google maps，而且占据了很大的客户端面积，用右键菜单也会更方便。最近做的项目里就要用到这个，我写了一个简单的右键菜单，并且学习把它封装成一个类。以下是html形式的代码：

查看全文!

右键菜单在web交互设计里并不是很常用的东西，因为普通用户在浏览网页时很少会想到能用右键来操作，就像他们很难习惯拖拽一样，但在某些环境中，拖拽会成为很自然的操作——其实都跟桌面软件的操作习惯有关。所以右键菜单在某些情况下也是很有用的，抓虾的feed列表里就可以使用右键菜单，如果网页里调用了google maps，而且占据了很大的客户端面积，用右键菜单也会更方便。最近做的项目里就要用到这个，我写了一个简单的右键菜单，并且学习把它封装成一个类。



以下是html形式的代码：

<div id="mousemenu" style="display: none; width: 200px;">       

 <div class="mousemenumain">        
  <ul id="allitems">           
   <li><a href=""><span>菜单项目1</span></a></li>           
   <li><a href=""><span>菜单项目2</span></a></li>          
   <li><a href=""><span>菜单项目3</span></a></li>           
   <li><a href=""><span>菜单项目4长度超出长度超出长度超出长度超出长度超出长度超出</span></a></li>           
   <li><a href=""><span>菜单项目5</span></a></li>           
   <li><a href=""><span>菜单项目6</span></a></li>           
   <li><a href=""><span>菜单项目7</span></a></li>           
   <li><a href=""><span>菜单项目8</span></a></li>       
  </ul>    
 </div>    


</div>

菜单的CSS：

#mousemenu{
position:absolute;
background:url(leftbg.jpg) no-repeat;

}

.mousemenumain{
width:100%;
float:left;

margin:0px 5px 0px 22px;
background:url(tempbg.jpg);

border:1px solid #999;
border-left:none;
}

*:first-child+html .mousemenumain{margin:0px 5px 0px 11px;} * html .mousemenumain{margin:0px 5px 0px 11px;}

.mousemenumain ul{
padding:0px;
margin:0px 0px 0px 0px;

list-style:none;
width:100%;
}

.mousemenumain ul li{

width:100%;
}

.mousemenumain ul li a{
display:block;

text-decoration:none;
color:#000000;
margin:0px 0px 0px 0px;

height:20px;
line-height:20px;
overflow-x:hidden;

width:200px;
}

.mousemenumain ul li a:hover{

background:#0000ee;
border:0px solid #00ccff;
text-decoration:none;

color:#fff;
cursor:pointer;
}

.mousemenumain ul li span{

margin:0px 15px;
display:block;
}

控制菜单弹出位置的JS程序：

 

document.oncontextmenu = ShowMenu;
 
 function ShowMenu(ev){

  var obj=document.getElementById('mousemenu');
  obj.style.display='none'; 
  ev = ev || window.event;

  var showplace=GetMousexy(ev);
  obj.style.top=showplace.y+"px";

  obj.style.left=showplace.x+"px";
  
  var menuplaceX=parseInt(obj.style.left)+parseInt(obj.style.width)+document.body.scrollLeft; //获得菜单右边缘的坐标

  var j=0;
  for(var i=0;i<document.getElementById('allitems').childNodes.length;i++){  //获得菜单项的数量

   if(document.getElementById('allitems').childNodes.item(i).tagName=="LI"){j++;}

  }
  
  var menuplaceY=parseInt(obj.style.top)+20*j-document.body.scrollTop; //获得菜单下边缘的坐标

  if(menuplaceX>document.body.clientWidth){  //如果菜单右边缘超出浏览器边框,则让菜单出现在鼠标左侧
   obj.style.left=(showplace.x-parseInt(obj.style.width)-26)+"px";

  }
  if(menuplaceY>document.documentElement.clientHeight){ //如果菜单下边缘超出浏览器边框,则让菜单出现在鼠标上侧

   obj.style.top=(showplace.y-20*j)+"px";

  }
  
  obj.style.display='';
  return false;  //阻止原来的右键菜单出现

 }
 
 function GetMousexy(ev){  //获取鼠标坐标
  if(ev.pageX || ev.pageY){

            return {x:ev.pageX, y:ev.pageY};  //适用于FIREFOX

         } return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,  //适用于IE

            y:ev.clientY + document.body.scrollTop  - document.body.clientTop

         }
 }

需要注意的就是不能让菜单超出浏览器边缘，产生滚动条。

最后的效果：点这里

但是这样做的话，就必须把菜单的HTML代码写在网页面文件里，不能随时调用，如果一个页面里会出现多个菜单的话，就要每个都写一套HTML代码。如果用JS来创建菜单，并且把CSS和程序都封装到一个类里面，每次要用菜单的时候就只需要写很少的代码创建一个实例，虽然第一次比较麻烦，但以后就很方便了（据说是这样-____-b）：

/**
 * @dexteryy.blogspot.com
 */
function RightMenu()
{
 var MainMenu;     //主菜单

    var InLineUl;
 var MenuItem;   //菜单项
 
 this.MainMenuPosition = "absolute";  
 this.MainMenuLeftBackground = "url(leftbg.jpg) no-repeat";  //主菜单右边文字 

 this.MainMenuWidth = "200px";  
 this.MainMenuHeight = "0px";  
 this.MainMenuRightBackground = "url(tempbg.jpg)";   //主菜单内容部分的背景

 this.createMainMenu();
 
}

RightMenu.prototype.createMainMenu = function()   //创建主菜单

{
 this.InLineUl = document.createElement("ul");

 this.InLineUl.style.padding = "0px";
 this.InLineUl.style.margin = "0px 0px 0px 0px";

 this.InLineUl.style.listStyle = "none";
 this.InLineUl.style.width = "100%";

 this.InLineUl.id="allitems";
 InLineDiv = document.createElement("div");

 InLineDiv.style.width = "100%";   //整个菜单的样式

 InLineDiv.style.margin = "0px 5px 0px 22px";
 InLineDiv.style.background = this.MainMenuRightBackground;

 InLineDiv.style.border = "2px solid #0033ff";
 InLineDiv.style.borderLeft = "none";

 InLineDiv.appendChild(this.InLineUl.cloneNode(true));
 this.MainMenu = document.createElement("div");

 this.MainMenu.style.position = this.MainMenuPosition;
 this.MainMenu.style.background = this.MainMenuLeftBackground;

 this.MainMenu.style.width = this.MainMenuWidth;
 this.MainMenu.appendChild(InLineDiv);

 this.MainMenu.style.display = "none";
 document.body.appendChild(this.MainMenu);

 
 
}

RightMenu.prototype.appendMenuItem = function(MenuItems)   //添加菜单项

{
 
 if(MenuItems=='')return;
 
 if(this.MainMenu.firstChild.firstChild)

 {
  this.MainMenuHeight = "0px";
     this.MainMenu.firstChild.replaceChild(this.InLineUl.cloneNode(true),this.MainMenu.firstChild.firstChild);

 }
 
 for(var item in MenuItems)
 {

  
  MenuItemSpan = document.createElement("span");
  MenuItemSpan.style.margin = "0px 15px";

  MenuItemSpan.style.height = "28px";
  MenuItemSpan.style.lineHeight = "28px";

  MenuItemSpan.style.display = "block";
        MenuItemSpan.innerHTML = MenuItems[item][0];

  MenuItemSpan.setAttribute("hasmenu",1);
  MenuItemSpan.oncontextmenu = function(){return false;}

  MenuItemA = document.createElement("a");
  MenuItemA.setAttribute('href',MenuItems[item][2]);

  MenuItemA.target = MenuItems[item][1];
  MenuItemA.onmouseout = function()    //每个菜单项的样式

  {
   this.style.background = "";
   this.style.display = "block";

   this.style.textDecoration = "none";
   this.style.color = "#000000";

   this.style.margin = "0px 0px 0px 0px";
   this.style.width = "200px";

   this.style.height = "28px";
   this.style.lineHeight = "28px";

   this.style.fontSize = "12px";
   this.style.overflowX = "hidden";

  }
  MenuItemA.onmouseout();
  MenuItemA.onmouseover = function()   //鼠标滑过时菜单项的样式

  {
   this.style.background = "#0000ee";

   this.style.border = "0px solid #00ccff";
   this.style.textDecoration = "none";

   this.style.color = "#fff";
   this.style.cursor = "pointer";

  }
  MenuItemA.appendChild(MenuItemSpan);
  MenuItemLi = document.createElement("li");

  MenuItemLi.style.width = "100%";
  
  MenuItemLi.appendChild(MenuItemA);

  this.MainMenuHeight =(parseInt(this.MainMenuHeight)+parseInt(MenuItemSpan.style.height))+"px";

  this.MainMenu.firstChild.firstChild.appendChild(MenuItemLi);
  
  
 }

}

RightMenu.prototype.GetMousexy = function(ev)
{

 if(ev.pageX || ev.pageY)
 {

       return {x:ev.pageX, y:ev.pageY};

    } 
 return {
      x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

      y:ev.clientY + document.body.scrollTop  - document.body.clientTop

    }
}

RightMenu.prototype.ShowMenu = function(ev,MenuItems)

{
 this.appendMenuItem(MenuItems);
 this.MainMenu.style.display='none';

 ev = ev || window.event;
 var showplace=this.GetMousexy(ev);

 this.MainMenu.style.top=showplace.y+"px";

 this.MainMenu.style.left=showplace.x+"px";

 
 var menuplaceX=parseInt(this.MainMenu.style.left)+parseInt(this.MainMenu.style.width)+document.body.scrollLeft;

 if(menuplaceX>document.body.clientWidth)
 {
  this.MainMenu.style.left=(showplace.x-parseInt(this.MainMenu.style.width)-26)+"px";

 }
 
 var menuplaceY=parseInt(this.MainMenu.style.top)+parseInt(this.MainMenuHeight)-document.body.scrollTop; 
 if(menuplaceY>document.documentElement.clientHeight)

 {
  this.MainMenu.style.top=(showplace.y-parseInt(this.MainMenuHeight))+"px";

 }
 this.MainMenu.style.display='';
 return false;

}

调用这个类的方法是……首先创建菜单的对象，在window.onload = function(){}或body onload=""里加上：

YYmenu = new RightMenu();

注意不能写作var YYmenu = new RightMenu();那样YYmenu就不是全局的了……

接下来，根据实际需要，设置菜单的具体项目，写成一个数组：["菜单项的名称","打开方式","点击的事件"]，比如：

var b=[  //设置菜单b的具体项目
 ["菜单b菜单b1","_blank","javascript:alert('hahahaha')"],

 ["菜单b菜单b2","","javascript:alert('xixixixi')"],
 ["菜单b菜单b3","","javascript:alert('xixixixi')"],

 ["菜单b菜单b4","","javascript:alert('xixixixi')"],
 ["菜单b菜单b5","","javascript:alert('xixixixi')"],

 ["菜单b菜单b6","","javascript:alert('xixixixi')"]
 ];

需要几种样式的菜单，就建立几个数组。然后，给需要右键弹出菜单的页面元素加上oncontextmenu事件和自定义属性“hasmenu”（如果没有覆盖整个页面的全局右键菜单，就不用加这个属性）， 比如：

<div oncontextmenu="return YYmenu.ShowMenu(event,b)" hasmenu="1">这是需要右键弹出菜单的元素</div>

参数“b”就是包含菜单项目的那个数组。

如果想要在整个页面任何地方点右键都可以弹出一个通用的菜单，需要像这些调用：

 

if (window.ActiveXObject){
  document.oncontextmenu=function(yy)  //适用于IE

     {   //alert(event.srcElement.nodeName);
      if (event.srcElement.getAttribute("hasmenu")!="1"){

       return YYmenu.ShowMenu(yy,a);
          }
     }  
 }else{

  document.oncontextmenu=function(event)  //适用于FIREFOX
     {    
      if (event.target.getAttribute("hasmenu")!="1"){

       return YYmenu.ShowMenu(event,a);
          }
     }

 }

这里我处理的不太好，IE和FIREFOX在获取鼠标当前目标时，有一些差异还没完全理解……

最后的效果：点这里

这个javascript类的源文件：点这里

菜单的外观我就没时间弄了，如果你想把菜单做成本文左上角那副图里的效果，只要换一张背景图片，并且给每个LI加上背景就行了……