亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！如有帮助请订阅专栏！
Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420
课程主题：垂直菜单展开与收回
主要内容：超长菜单实现、展开与收回bug解释、Axure9版本限制等问题解决
应用场景：后台菜单
案例展示：
案例视频：
axure垂直菜单展开与收回解决视频
本文解决方向：
无论你是遇到展开卡顿、展开显示异常、收回失效，还是交互逻辑混乱，这节课将彻底解决
你在Axure中设计垂直菜单时的所有痛点！（本文第二部分垂直菜单展开与收回实现截图和方法，如无上述问题可直接划到第二部分阅读！）
第一部分先解决粉丝反馈较多的四类问题：
1、展开时如果下方菜单子项有显示的情况，那么上方的菜单子项会出现空白区域；
2、展开时如果下方菜单子项没有显示的情况，那么上方的菜单子项也会出现空白区域；
3、展开、收回、隐藏、推动、拉回的交互在哪个元件上设计，为什么不能设置在子项上；
4、超长菜单如何实现滑动；
问题1答疑：
反馈这类问题的最多，出现这个问题归因是：Axure交互时页面布局判断出现错误！向下展开时，因为下方有展开的子项，子项随着页面进行了移动，造成了交互混淆，axure在判断页面布局时出现混乱，造成了空白区域；
Axure10解决方案：设置组滚动，右键该组 → 【Scroll】→ 【Vertical Scroll】（垂直滚动）；设置固定高度：调整组的高度，使其小于内容高度，滚动条会一直显示。
Axure9解决方案：由于9没有组滚动，那我们就没办法了吗？这时候就需要依靠我们分析问题的能力了，既然问题出现在下方菜单子项的显示问题，那么如果在做展开子项时，我们不让下方菜单子项显示，是不是问题就解决了？？？
是的，经验证100%成功，和10一样丝滑的~~~~~
实现路径：单击时-先隐藏下方子菜单-在显示我们要展开的子菜单
第二部分有截图，因本文比较长，是此类问题的同学可跳过直接去第二部分阅读！
问题2答疑：
这类问题通过查看粉丝的截图，错误都是一致的，最后一个菜单交互：显示/隐藏菜单子线-推出/拉回下方元件（错误做法）；帅哥美女们，最后一个菜单后边可什么都没有了，还推出/拉回下方元件？？？？
解决方案：最后一个菜单项交互，是显示/隐藏菜单子项，不要画足添蛇了！
问题3答疑：
第三类问题我建议大家去看看之前我做的事件和动作文章（文末有直通车链接可以直达），交互做在哪个元件上混淆，基本逻辑就是谁发起交互就施加在哪个元件上。
解决方案：操作哪个元件，就在哪个元件上添加交互；
问题4答疑：
超长菜单实现鼠标滚轮上下滑动，这个属于交互效果的问题。
解决方案：使用两个动态面板，外层动态面板控制菜单整体显示区域，内层嵌套动态面板负责实现垂直滚动；实现方法第二部分有详解；
第二部分实现垂直菜单展开与收回正确姿势：
由于能看到这篇文章的同学，基本已经不是初级水平了，那么我们直接从面板嵌套开始；页面左侧合适区域拖入动态面板-嵌套第二动态面板-内部拖入图例菜单项、菜单子项、icons
图1
1、内部菜单项相关说明：参照图例创建菜单项、子项、展开与收回的按钮，并分别命名，自己能看懂找到就可以；
图2
2、添加所有子项的载入时交互，顺便把悬停效果也添加上；依次为四个子项添加，注意最后一个子项不要设置推出和拉回，因为页面篇幅关系，我不在粘贴图片了；
图3
3、添加基本元件库展开按钮交互：单击时先隐藏下方所有子菜单，第一个问题已经解决时了，不重复说明，然后隐藏自己，显示收回，显示子菜单推动下方元件；
图4
4、添加基本元件库收回按钮交互：载入时隐藏自己，单击时隐藏自己，显示展开，隐藏子菜单拉回下方元件；
图5
5、重要元件展开和收回交互，以下交互逻辑和第一个相同，下方我直接粘贴图，截图里都有详细的交互设计，大家直接看图就好；
图6
图7
6、交互效果展开与收回交互截图
图8
图9
7、应用制作展开与收回交互截图；
图11
图12
本课小结：垂直菜单（Vertical Menu）是Web/App设计中常见的导航组件，其展开与收回的交互直接影响用户体验（UX）和信息架构（IA）。注意事项：明确触发方式：点击父级菜单项（如箭头图标或文字）展开子项；避免悬停（Hover）触发（移动端不兼容）。方向一致：子菜单应从父项下方垂直展开，避免左右偏移。多级嵌套管理：建议不超过 3级（如“首页 > 设置 > 账户”），避免用户迷失。同级菜单一次仅展开一个（避免页面混乱）。
相关课程直通车：
Axure疑难杂症：深度理解与认识“事件”“动作”（玩转交互）-CSDN博客
Axure元件动作一：显示与隐藏_axure显示隐藏动态面板-CSDN博客
Axure疑难杂症：母版菜单设置打开链接后菜单选中效果-CSDN博客
Axure疑难杂症：剖析面包屑导航“用户不迷路”（玩转导航）-CSDN博客
Axure应用交互设计：使用动态面板制作新闻栏目高级交互_axuer如何制作news-CSDN博客
如有其他相关问题，欢迎私信沟通，关注 结构化知识课堂-CSDN博客
明天的产品大咖就是你，创作不易，麻烦关注一下，点赞+收藏，感谢大家！
