Attention, Zin 的交互设计之路。

这里的菜单事项windows软件一样的，具体事件包含了：点击下拉；鼠标挪到其他菜单项自动显示；点击其他位置收回菜单。而这次用jQuery实现的菜单发挥了jQuery简单易用的动画效果slideDown及slideUp效果（Effect），具体演示可以看本站页头的具有下拉箭头的导航菜单，点击箭头可以看到效果，代码在ui.js中，现分离javascript代码出来，html及css部分可以参考本站源码

$(document).ready(function(){
$("body").append("<div id='popmenu' style='position:absolute;display:none;'><div class='lt'><span class='rt'></span></div><div class='cm'></div><div class='lb'><span class='rb'></span></div></div>")

$popmenu=false;

$("#topMenu li .icon").hover(function(){$(this).addClass("hover");$popmenu?showPopMenu($(this),$("#div"+$(this).attr("id")).html(),$("#popmenu"),{x:-70,y:21}):null},function(){$(this).removeClass("hover");}).click(function(){if(!$popmenu){showPopMenu($(this),$("#div"+$(this).attr("id")).html(),$("#popmenu"),{x:-70,y:21});$popmenu=true;}else{hidePopMenu($("#popmenu"));$popmenu=false;}});

});

function showPopMenu($clicked,$menuhtml,$menu,pos){

  $menu.find(".cm").html($menuhtml);

  $menu.css("top",$clicked.offset().top+pos.y).css("left",$clicked.offset().left+pos.x).slideDown("normal");

  $("body").bind("click", {obj:$clicked}, handler);

  function handler(event){if(event.target.id!=event.data.obj.attr("id")&&$popmenu){hidePopMenu($("#popmenu"));$popmenu=false;}}

}

function hidePopMenu($menu){

  $menu.slideUp("fast");

  $("body").unbind("click");

}


这里$("#topMenu li .icon")即是对菜单的访问，而hover事件根据$popmenu属性判断是否应该自动展开相应的菜单，在showPopMenu中对body绑定了事件，需要判断是否在菜单外被点击了，如果是，则收回菜单