先上效果图

类似美团大众点评的条件过滤筛选

说下思路

主要运用了动态面板的状态切换，“形式”、“领域”、“配置”等这种页签是动态面板，下面的弹出的菜单项也是动态面板。先说页签，页签状态我设为了“选中”和“未选中”两种。当状态为“未选中”时，点击切换为“选中”，展示该页签的下拉菜单，同时切换其他页签的状态为“未选中”并收起它对应的菜单。

制作步骤

页签

添加动态面板，设置两个状态，“选中”、“未选中”。未选中在第一行，默认未选中。做比较复杂的效果时命名很重要，因为涉及的元素多用例复杂，所以建议做的时候想好一套命名方案。

点进去分别设置未选中和选中时的样式，如下

菜单及子菜单

逐级制作菜单，第一层是一级菜单，第二层二级菜单，依次类推。依然是动态面板。

面板本身没有状态切换，其中的某个元素（菜单子项）会有下级菜单。进入State1，编辑菜单列表项

一级菜单有3个元素，“线上”，“线下”，“混合式方案”，其中“线上”“线下”又引申出二级菜单。可以拖入3个按钮，把“线上”“线下”转换为动态面板，“混合式方案”因为不涉及二级菜单不用转换。分别设置“线上”“线下”的选中未选中状态样式。这边需要注意的是整个菜单框不会涉及状态切换，只有单个菜单项会有选中和未选中状态，所以，菜单框就一个状态State1，进入State1后再添加菜单项，针对有子菜单的菜单项再分别设置“选中”“未选中”状态。

同理添加二级菜单

进入菜单框的State1，添加具体菜单项。再根据每个菜单项设置状态。

诸如以上，把页签和菜单项先建好，按照一定规则排列好（先不要调整位置，还可能涉及一些效果调整，位置重叠后调整麻烦）

添加用例

先看菜单框，拿“线上”为例，当“线上”在“未选中”状态被鼠标单击时，应切换为“选中”状态，展示出子菜单，同时，如果应该把“线下”切换为“未选中”状态（无论之前是否是“选中”状态），隐藏“线下”的子菜单框。
“选中”状态鼠标单击无效。

再看页签，页签我使用了根据箭头状态作为判断依据，当页签“未选中”时，箭头“向下”，此时鼠标单击页签，应该展开一级菜单栏，页签状态切换为“选中”，箭头状态切换为“向上”，同时切换其他所有页签、菜单项为“未选中”，并隐藏其他所有菜单栏，可以利用判断页签状态来实现。
当页签“选中”时，箭头“向上”，此时鼠标单击页签，切换为“未选中”，箭头状态“向下”，隐藏所有菜单栏。

case1

case2

case3

欢迎留言探讨更好的实现！

Axure 制作过滤筛选栏相关推荐

Axure 制作左侧导航栏实现三级菜单效果
先放入菜单的相关元件,可以使用矩形,设置相应样式. 选中所有三级菜单,点击鼠标右键,选择转换为动态面板和设为隐藏,同时将面板命名为''ThreePanel''. 选中二级菜单和刚才设置的ThreePa ...
MIPCMS模板制作之过滤导航栏
文章目录[隐藏] 需求说明 MIPCMS 模板制作之过滤导航栏我是用MIPCMS有段事件了,做了两个模板,其中一个虽然有 bug 但是还是上线了,地址时:https://heboy.me.这个网站是 ...
[原型设计]Axure制作首页轮播图片切换效果
1.新建Axure PR文件,取名"Axure制作首页轮播图片切换效果" 2.获取素材,进入36Kr官网主页,获取轮播图片素材. 获取素材 3.拖拽动态面板控件Dynamic Pa ...
axure 动态面板自动适应浏览器宽度_Axure教程：用axure制作Web原型自适应电脑屏幕...
本篇文章作者主要讲的是关于用Axure制作Web原型自适应电脑屏幕,一起来看看~ 用axure制作原型,很多刚入门的小白(包括我),制作原型的时候首先从制作App原型开始的,因为有固定的原型尺寸供我们 ...
WPF DevExpress grid 设置自定义筛选栏的条件为包含关系
WPF DevExpress grid 设置自定义筛选栏的条件为包含关系根据 DevExpress.Xpf.Grid改造来源:CSDN 原文:https://blog.csdn.net/alis ...
Android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
前言大家好,我是 Vic,今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢学习目标 AndroidStudio制作底部导航栏以及用Fra ...
Yii2.0在GridView中下拉过滤筛选的实现
Yii2.0在GridView中下拉过滤筛选的实现细微的方便也许对于我们的用户来说将会获得最好的体验,用最方便,最快捷,最易操作的方式实现用户需要的功能是我们的工作和职责,今天分享一个在Yii2.0 ...
使用Axure制作手风琴菜单
Axure在页面设计这一块起到了很大作用,它不仅可以将客观的文本改变为直观的演示模板,还可以对于页面的各个方面进行UI设计美化页面等等. 例如设计一个网站肯定少不了菜单栏.菜单栏的样式很多,有点击显示 ...
利用3D效果制作立体导航栏
利用3D效果制作立体导航栏文章目录使用3D效果制作3D导航栏一.3D的旋转以及位移二.使用步骤 1.搭建html骨架 2.添加css样式前言利用3D效果制作导航栏: 制作一个好玩的3D导航 ...
Axure制作菜单栏效果
如何用Axure制作上面效果的菜单栏?直接上步骤: 新建1个母版(菜单栏模板)和5个页面(页面1--页面5),当点击菜单栏按键时,对应弹出页面效果 [母版制作]制作一个菜单框,拖一个矩形并输入&quo ...

Axure 制作过滤筛选栏