ueditor添加下拉事件_【Axure9百例】37.宽屏二级下拉菜单

“ 宽屏的下拉菜单给人一种美观、专业的体验。”

这是《Axure9百例》系列第37篇

这个例子来自于人人都是产品经理网站的首页二级菜单的下拉效果，宽幅整屏下拉菜单给人一种美观、专业的体验，里面可以设置丰富的样式，你可以先到人人都是产品经理网站体验一下。

看一下演示的效果：

01

—

界面布局

界面上放了一个一级菜单列表，由四个矩形框组成，分别是首页、BAT大师课、分类导航和活动讲座，我们给中间两个一级菜单添加一个二级下拉菜单。一级菜单的后面放一个矩形框作为背景，命名title_bg，只保留了下边框，一级菜单背景title_bg的位置在(0，0)处。

下面添加二级下拉菜单。

添加一个矩形框，命名menu_bg1，设置阴影效果如下：

矩形框背景上面再添加几个大的矩形框，表示二级菜单中的内容。

把二级菜单的背景以及上面的三个大的矩形框选中后，右键转成动态面板，命名为level2menu。双击动态面板进入编辑状态，复制当前状态，修改背景矩形框名为menu_bg2，然后修改几个大的矩形框，主要是和状态1内容区别一下，表示第二个下拉菜单：

把下拉菜单动态面板设置为不可见，位置在(0，80)处：

最后设置页面的内容对齐方式为左对齐：

界面先简单处理成这样就可以了，下面看看事件处理。

02

—

交互处理

给“BAT大师课”这个矩形框添加鼠标移入、鼠标移出事件。

移入事件：

1)移入的时候切换下拉菜单的动态面板为第一个状态，即显示第一个下拉菜单内容。

2)显示动态面板，动画效果设置为逐渐，时长500毫秒。

3)同时移动下拉菜单到(0，70)，即向上移动10个像素，动画效果为缓进缓出。

移出事件：

1)隐藏下拉菜单。

2)并把菜单移动到初始位置(0，80)。

“分类导航”菜单的移入移出事件和上面相同，只是把移入时下拉菜单的动态面板状态切换到状态2。

最后，为了让菜单显示宽屏，在页面初始化时，需要设置一级菜单背景title_bg和二级菜单的背景menu_bg1、menu_bg2的宽度和浏览器宽度一致，高度不变。

注意前面设置页面的默认对齐方式为左对齐，是因为如果设置为居中时，页面初始化设置菜单背景的宽度和浏览器宽度一样时会出现位置偏移，你可以试下看看是不是这样。

好了，可以了哦，看看效果吧。

03

—

小结

这里应用到的主要是元件的移入移出事件的处理，通过移动下拉菜单的动态面板实现动态效果。另外，注意页面初始化时如何设置元件的宽度和浏览器的宽度一致。

Try it ~

往期回顾

【Axure9百例】36.文本框搜索自动匹配

【Axure9百例】35.透明元件和创意动画

【Axure9百例】34.动画效果应用 - 片头动画

【Axure9百例】33.网易云音乐 - 单选效果

【Axure9百例】32.网易云音乐 - 两级导航菜单滑动

产品原型设计是产品经理的基本技能，本系列是 Axure9 原型设计的基础知识普及，目标是通过一百个案例，从不同的使用场景来学习 Axure9 的应用。希望你能通过点赞、在看或转发，让行业内更多的人一起学习，共同提升我们的原型设计能力，提高我们的产品设计能力。