为庆祝新版QUI的问世，特将之前开发的一款很实用菜单组件拿出来与大家分享。马上步入正题开始介绍：
大家之前都可能看过或用过很多菜单组件，有一些菜单组件可能做得很漂亮或者有很好的动画效果。但这种菜单一般都不通用，只能在特定的环境下使用。
??? 我的想法是一个通用的菜单组件应该具备以下特点：
1、代码量很少，包括HTML代码。这样方便使用者使用CSS自定义菜单的风格
2、默认的外观很简洁但通过自定义调整可以展示出不同的样式
3、能够准确地响应鼠标移入动作并快速展开
4、能够以任何元素作为触发源
5、能够支持动态生成的元素触发菜单
按照以上思路，我开发了这个菜单。姑且命名为QUI简易菜单
菜单默认外观如下：
?
?
用颜色和边框绘制的外观，符合默认外观简洁的思想。只要稍花些心思就能做出各种风格出来。
代码量也很少，如下所示：
<div class="simpleMenu">
??? <div class="simpleMenu_link">
??? ??? <a href="javascript:;">弹出菜单</a>
??? </div>
??? <div class="simpleMenu_con">
??? ??? <a href="javascript:;"><span>状态</span></a>
??? ??? <a href="javascript:;"><span>相册</span></a>
??? ??? <a href="javascript:;"><span>分享</span></a>
??? ??? <a href="javascript:;"><span>日志</span></a>
??? </div>
</div>
也就是说，无论在页面任何位置，使用上述的代码就可以创建一个菜单。哈哈，是不是很方便？
菜单项也可以添加小图标，简单调整后效果如下：
?
?
代码：
<div class="simpleMenu" style="width:92px;">
??? <div class="simpleMenu_link arrow border white_bg">
??? ??? <a href="javascript:;">全部操作</a>
??? </div>
??? <div class="simpleMenu_con" style="width:90px;">
??? ??? <a href="javascript:;"><span class="icon_add">新增</span></a>
??? ??? <a href="javascript:;"><span class="icon_view">查看</span></a>
??? ??? <a href="javascript:;"><span class="icon_edit">修改</span></a>
??? ??? <a href="javascript:;"><span class="icon_delete">删除</span></a>
??? ??? <a href="javascript:;"><span class="icon_save">保存</span></a>
??? </div>
</div>
菜单链接可以除了文字还可以放图标。效果如下：
?
?
代码如下：
<div class="simpleMenu" style="width:20px;">
??? <div class="simpleMenu_link" noBorder="true">
??? ??? <span class="img_add hand"></span><br />
??? </div>
??? <div class="simpleMenu_con">
??? ??? <a href="javascript:;"><span>状态</span></a>
??? ??? <a href="javascript:;"><span>相册</span></a>
??? ??? <a href="javascript:;"><span>分享</span></a>
??? ??? <a href="javascript:;"><span>日志</span></a>
??? </div>
</div>
通过一个设置一个属性：noBorder="true"实现鼠标移入不出现边框。
动态生成的元素上面也可以使用菜单。HTML动态生成后，调用refreshSimpleMenu()函数来更新菜单显示即可。
例如下面所示：
?
?
点击这里下载示例.
另外这个菜单是 “QUI框架”的一部分，可以下载整个框架来使用更多的组件。
点击这里下载QUI
（直接点击链接即可，使用迅雷可能会导致无法下载）