Axure抽屉效果菜单效果该怎么制作?

   Axure抽屉效果菜单效果该怎么制作?做网页端菜单的抽屉效果很常见,若做原型的时候能快速简单的做出来,可以节省你的宝贵时间,也更能展示你的作品。

  1、先建四个动态面板,同时选中这四个面板,在选择组里命名“菜单”;并勾选调整大小以适合内容。


  2、双击“菜单-1”动态命板,弹出动态命板管理框,点击新增“收缩”“展开”选项


  3、点击收缩,新建菜单栏内容,名称、下拉箭头、底色框;同样,点击展开,新建展开后的菜单栏内容,名称、下拉箭头、底色框、子级菜单;


  4、当从初始收缩状态点击成展开状态时,设置鼠标点击用例,面板状态选择到“展开”,并勾选推拉部件,方向选择下方。


  5、当从展开收缩状态点击成收缩状态时,设置鼠标点击用例,面板状态选择到“收缩”,并勾选推拉部件,方向选择下方。


  6、动态面板设置方法同上,即可快速制作出你想要的菜单抽屉效果哦。


  注意事项:Axure这里只讲了下拉的效果,没有选中效果哦。

时间: 2024-11-10 07:08:56

Axure抽屉效果菜单效果该怎么制作?的相关文章

css3制作的精美链接菜单效果

一组精美的CCS3代码制作的文字链接菜单效果,链接色彩变换样式非常漂亮,值得收藏参考! [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

AS2.0 制作切换菜单效果

AS2.0 制作切换菜单效果 var 设置 = {}; 设置.数量 = 10; 设置.间距 = 150; 设置.比例 = 250; 设置.速度 = 4; ////////////////////////////////////////////// var 中心MC = 0; var 按 = false; var 转 = false; var H = Stage.height/2; var W = Stage.width/2; for (var i = 0; i<设置.数量+1; i++) { v

基于jQuery实现的向下滑动二级菜单效果代码_jquery

本文实例讲述了基于jQuery实现的向下滑动二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用jQuery制作向下滑动的二级菜单,本二级菜单带有动画效果,而且比较流畅,鼠标放在一级菜单上,就可以向下滑出二级子菜单,相对实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-down-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果

花瓣网以前的菜单效果还不错,首先是展示出全部的菜单,然后当你向下滑动网页的时候,菜单自动吸顶固定悬浮在浏览器的顶部,这个用户也能很好的切换不同的分类,查看更多的内容,而对于网站来说,也提升了不少的用户体验和交互性. 制作方法 本文将来为大家简单的介绍一下如何制作出这样的效果. HTML代码 首先我们编写一些基本的HTML代码,分别给网站的LOGO定义一个#header类,给菜单定义.nav类. <div id="header"><h1>花瓣</h1>

jQuery实现的背景动态变化导航菜单效果_jquery

本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变换,动态效果是在鼠标悬停时出现,也就是把鼠标放在菜单上的时候,背景即开始滚动起来,看上去漂亮极了,而且兼容性也是相当不错的,推荐给网页设计者使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-code

jquery树形菜单效果的简单实例_jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jQuery实现的精美平滑二级下拉菜单效果代码_jquery

本文实例讲述了jQuery实现的精美平滑二级下拉菜单效果.分享给大家供大家参考,具体如下: 这是一款jQurey实现的向下二级导航菜单效果.效果非常不错,由上到下平滑延伸,给人的感觉协调唯美!js与html代码结构简单明了,便于使用与修改! 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

Android编程实现仿优酷旋转菜单效果(附demo源码)_Android

本文实例讲述了Android编程实现仿优酷旋转菜单效果.分享给大家供大家参考,具体如下: 首先,看下效果: 不好意思,不会制作动态图片,只好上传静态的了,如果谁会,请教教我吧. 首先,看下xml文件: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" a

jquery实现隐藏在左侧的弹性弹出菜单效果_jquery

本文实例讲述了jquery实现隐藏在左侧的弹性弹出菜单效果.分享给大家供大家参考.具体如下: 这是一款隐藏在左侧的弹性弹出菜单,从淘宝扣下来的,也可作为JavaScript缓冲动画的典型教程.本弹性菜单可扩展性强,实际上不光可以做成菜单,也可布局一些图文混排的内容或一段视频,总之被弹出的内容是在一段Div内,怎么布置就看你的了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-hidden-alert-adv-codes/