AXURE进阶实例 2 (自定义下拉菜单)

 时间:2026-02-14 08:12:05

1、先看效果

AXURE进阶实例 2 (自定义下拉菜单)

2、第一步:

先把自定义的下拉菜单样式设计好,注意组件结构

AXURE进阶实例 2 (自定义下拉菜单)

3、第二步:

批量编辑子选项按钮的悬停,点击和选中的样式

     1.批量选中所有按钮

     2.点击右侧面板的交互样式中的 鼠标悬停

     3.编辑自定义按钮样式

用同样的方法,设置下拉框 的交互样式

AXURE进阶实例 2 (自定义下拉菜单)

4、第三步:

把选项和背景一起设为动态面板,并命名“下拉选项-01”,

命名最好在后面带几个数字,因为这样在后面使用到该组件的时候方便搜索使用

AXURE进阶实例 2 (自定义下拉菜单)

5、第四步:

设置点击下拉框时的选中状态,并根据选中的状态来决定下来菜单是否显示和箭头的上下状态。

    1.单击下拉框,切换其选中状态。

AXURE进阶实例 2 (自定义下拉菜单)

6、2.设置 选中时 的样式和状态:显示下拉选项面板+箭头向下(这里建议用绝对值)

同样的方法,设置下拉菜单的取消选中时的状态样式。

AXURE进阶实例 2 (自定义下拉菜单)

AXURE进阶实例 2 (自定义下拉菜单)

7、第五步:

设置点击选项时的效果

    1.下拉选项面板收起,其实就是让下拉框处于 取消选择状态

AXURE进阶实例 2 (自定义下拉菜单)

8、2.把选中的下来选项回显在下拉框上

       这里使用axure函数变量[[This.text]]来设置

AXURE进阶实例 2 (自定义下拉菜单)

AXURE进阶实例 2 (自定义下拉菜单)

9、设置好后,就可以复用了。右键交互事件Case 1复制(Ctrl+c),然后反击下面两个选项,一个一个粘贴(Ctrl+v).

AXURE进阶实例 2 (自定义下拉菜单)

10、到这里基本就差不多了,

最后,把下拉选项动态面板隐藏。

AXURE进阶实例 2 (自定义下拉菜单)

11、再把这个组件设为动态面板

然后勾选“自动调整为内容尺寸”,这样的好处时隐藏掉的部分,不再占用空间,更有利于原型的排版。

但是有一点,这样做的话,显示隐藏时的推拉组件功能会对动态面板外的组件失效。

AXURE进阶实例 2 (自定义下拉菜单)

12、到这里就大功告成了。

案例源文件链接:

https://pan.baidu.com/s/1nw4UWMP

  • Axure滚动到元件的动画时间如何配置
  • Axure如何调整文本行高?
  • 教程 | Axure如何设置导航切换功能?
  • CSS3制作多段不同路径的动画
  • axure如何添加单选框,详细教程
  • 热门搜索
    崆峒山旅游 港澳旅游景点 宜昌旅游年卡景点 西山旅游 法国巴黎旅游 河内旅游 大连旅游图片 福建旅游攻略自助游 广西东兴旅游 长沙旅游地图