• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure实例:创建浏览器顶部固定菜单及子菜单

Axure实例:创建浏览器顶部固定菜单及子菜单

作者: @usernamepm 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure实例,axure实例下载,axure教程实例,axure原型设计实例,axure7.0教程实例等相关知识, @usernamepm 希望在学习及工作中可以帮助到您

文章分享了一个运用Axure创建浏览器顶部固定菜单及子菜单的例子,和各位PM分享,希望能帮到一些需要的朋友。

在下是个axure新手,要用axure实现下面一个功能:

1.让菜单固定在浏览器顶部(如果仅仅是这个功能,那么可以用动态面板里面装Menu item直接固定在浏览器顶部);

2.菜单有下拉的子菜单(如果用了动态面板,除非动态面板的高度大于子菜单弹出时的高度,否则显示不出子菜单,但是如果一开始把动态面板的高度设置的很高,就会导致挡住网页正文的内容,导致网页的正文内容无法选中,无法复制)。

我就试着寻找,除了动态面板,是否有其他组件,可以固定在浏览器顶部,且不影响菜单的下拉子菜单弹出,但是我并没有找到。

后来,我想到了一个解决的办法:

还是用动态面板,包裹Menu item,然后给Menu item设置子菜单,然后在axure中 选中某个菜单项目,就会弹出子菜单

(图1,选中其中一个菜单项目,弹出了子菜单)

然后选中整个子菜单:

(图2,这是选中子菜单后,子菜单周围有一个边框包裹着它)

然后在右边的属性窗口,做如下设置:

(图3,子菜单的属性 设置窗口)

这里的【顶部菜单按钮】就是我包裹菜单的动态面板的名称,当鼠标移动到Menu item上,会自动显示出子菜单,那么我们让子菜单在显示的时候,改变包裹菜单的动态面板的高度,从而让整个菜单能完整的显示出来,然后当我们的鼠标离开子菜单的时候,子菜单就会自动隐藏,从而触发 【隐藏时】这个事件,然后设置动态面板的尺寸回到原始尺寸,这时候,就不会影响我们选择页面其他元素了。

update:2017-02-22

最新研究出的方法,快速调整动态面板的宽度:

直接选中 包裹菜单的动态面板, 鼠标右键,设置 【自动调整为内容尺寸】

完毕。

我学做PM的时候,woshipm上很多朋友热心帮过我,现在分享下,希望能帮到一些需要的朋友。

您可能想查找下面的文章:

  • Axure实例:创建浏览器顶部固定菜单及子菜单
  • Axure实例:Axure Pro 8制作产品需求文档
  • Axure实例:制作一个通用的移动端内容滚动区
  • Axure实例:顶栏和侧边栏的固定和窗口自适应

相关文章

  • 2017-06-14Axure教程:中继器实现列表到详情页的数据传递
  • 2017-06-14Axure实现两种滑动的方式(附源文件下载)
  • 2017-06-14Axure中继器的基本使用:实现一个简易的人员添加、删除模块
  • 2017-06-14Axure 7高保真还原Web首页布局和交互教程
  • 2017-06-13Axure教程:如何画出曲线图?
  • 2017-06-13Axure教程:验证码原型制作实例
  • 2017-06-14用Axure8.0制作简单的登录窗口
  • 2017-06-14Axure 8.0 拖动滑块设置数字和日期
  • 2017-06-13Axure教程:原型设计之微信朋友圈效果(中继器、动态面板、变量高级用法)
  • 2017-06-14Axure教程:导航栏和广告悬停效果制作

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure7.0教程(七)math函数的使用(2)Math函数简介
    • Axure教程:微信聊天列表原型制作(二)
    • Axure设计:制作iOS列表左滑菜单效果
    • 用Axure模拟一个数字抽奖的小游戏
    • Axure教程:导航栏和广告悬停效果制作
    • Axure7.0教程(四)中继器的使用(4)
    • Axure教程:实现倒计时获取验证码效果
    • Axure教程:如何制作一个不区分大小写的验证码原型?
    • 矩形框:深度理解和应用元件样式(二)
    • Axure操刀微信H5页面之《加密情书》的交互设计

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有