本文档详细介绍了如何在设计工具中构建交互式菜单系统，包括一级和二级菜单的添加，动态面板的设置，以及通过点击菜单触发显示隐藏二级菜单和在内联框架中加载对应页面的交互动作。步骤涵盖了从基础元素创建到复杂交互实现的全过程。
1、添加一级菜单、二级菜单
在元件库拖拽一个矩形到‘左侧菜单栏’页面，设置矩形背景颜色。
在元件库拖拽一个文本标签到‘左侧菜单栏’页面当作一级菜单，设置字体大小和颜色。
复制几个文本标签当作二级菜单，设置字体大小和颜色。
2、设置动态面板
选中二级菜单右键点击‘转换为动态面板’。
将动态面板设置为隐藏。
选中动态面板设置一个名称。
参照上述步骤将其他二级菜单也添加一下动态面板。
3、添加切换动作，点击一级菜单时，显示下属二级菜单。
选中一级菜单，在交互里面找到‘鼠标单击时’。
切换可见性——选中该一级菜单对应的动态面板——可见性（切换）——推动/拉动元件（下方）
隐藏——选中要隐藏的动态面板——可见性（隐藏）——拉动元件（下方）
其他一级菜单也加入上述动作。
4、添加切换动作，点击二级菜单时，在内联框架里显示对应页面。
在元件库拖拽一个内联框架到‘左侧菜单栏’页面，设置框架区域大小。
打开动态面板，点击面板状态
选中二级菜单右键设置选项组。
在属性里面可设置选中样式。
选中二级菜单，在交互里面找到‘鼠标单击时’。
切换选中状态——当前元件——值（true）
在框架中打开链接——内联框架——具体页面
其他二级菜单也加入上述动作。
点击预览查看效果
扫一扫
2305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
