
axure中想要制作下拉菜单,该怎么制作呢?下面我们就来看看详细的教程。
先看效果
1、先把自定义的 下拉菜单 样式设计好, 注意组件结构
2、批量编辑子选项按钮的悬停,点击和选中的样式
1)批量选中所有按钮
2)点击右侧面板的 交互样式 中的 鼠标悬停
3)编辑自定义按钮样式
用同样的方法,设置下拉框的 交互样式
3、把选项和背景一起设为动态面板,并命名“ 下拉选项-01 ”,命名最好在后面带几个数字,因为这样在后面使用到该组件的时候方便搜索使用
4、设置点击下拉框时的 选中状态 ,并根据选中的状态来决 定下来菜单是否显示和箭头的上下状态 。
1)单击下拉框,切换其选中状态。
2)设置 选中时的样式和状态: 显示下拉选项面板+箭头向下(这里建议用绝对值),同样的方法,设置下拉菜单的 取消选中时的状态样式 。
5、设置点击选项时的效果
1)下拉选项面板收起,其实就是让下拉框处于 取消选择状态
2)把选中的下来选项回显在下拉框上。这里使用axure函数变量 [[This.text]] 来设置
6、设置好后,就可以复用了。 右键交互事件Case 1复制(Ctrl+c),然 后反击下面两个选项,一个一个粘贴(Ctrl+v).
7、到这里基本就差不多了,最后,把下拉选项动态面板隐藏。
8、再把这个组件设为动态面板,然后勾选“ 自动调整为内容尺寸 ”,这样的好处时隐藏掉的部分,不再占用空间,更有利于原型的排版。但是有一点,这样做的话,显示隐藏时的推拉组件功能会对动态面板外的组件失效。
以上就是AXURE下拉菜单的制作方法,希望大家喜欢,请继续关注我们。
Axure怎么制作页面滚动时菜单固定在顶部的页面?
要求:需要设计两个下拉框,第一个显示省份的名称,第二个根据选择的省份显示某省的城市。
如第一个中有浙江省、江苏省、福建省;第二个中有杭州市和宁波市、南京市和苏州市、福州市和厦门市;若选择江苏省,则第二个下拉框只能选择南京市和苏州市。
首先创建省份的下拉框,并设置三个省份
然后利用动态面板,设置三个state,分别对应这三个省份。
state1-浙江省;state2-江苏省;state3-福建省
然后在每个state中放入下拉框:
添加完成后,回到主页面,在省份的那个下拉框上设置交互:选项改变时的交互
点击 新增条件,这里需要先表示选择下拉框中选中浙江省,才能设置动态面板的状态为state1
同样处理状态2和3
动态面板是Axure RP 8中的一款高级组件,在隐藏与显示、滑动效果 、拖动效果、多状态效果切换等 *** 作的场景中,动态面板是你的不二选择。
完成后效果如下图,该例子主要依靠动态面板的状态切换来实现菜单状态的下拉与收起,在后台管理系统中普遍运用到。
菜单的下拉与收起效果:
希望大家边学边做,以下是用Axure RP8 实现菜单实例。
1.实例
1.从部件库拉四个动态面板到 *** 作区组合在一起
2. 双击选中动态面板,命名面板名称并且添加两个状态,分别命名为“状态1”与“状态2”.
3. 双击“状态1”,添加矩形并且命名为目录一
4. 双击“状态2”编辑其状态
5. 复制状态1的矩形并且添加三个矩形作为子目录,并且分别命名为“子目录1,2 , 3”。
6. 回到Home页,目录已经被编辑好。
7. 按照编辑动态面板1的步骤把下面三个面板依次命名,接下来为目录一添加用例。
8. 按照图中 *** 作依次实现的效果为:单击目录一时会由状态1变展开成状态2。
9. 回到Home,则目录一的用例1已近建立完毕,选择更多事件,选择更多事件,注意选择动态面板调整大小以适应内容。
10. 选择鼠标移出时,为实现收起效果。
11. 按照图中 *** 作依次实现的效果为:鼠标移开目录一时,会由状态2变展开成状态1。
12. 目录一的下拉与收起用例都已近创建完毕。
13. 按照目录一的方法创建目录二的下拉和收起用例
14. 点击右上角预览,单机目录一,子目录展现,移开鼠标子目录收回。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)