• 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 字体:[增加 减小] 来源:互联网

本文主要包含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实例:顶栏和侧边栏的固定和窗口自适应

相关文章

  • Axure教程:原型设计之水泡导航栏
  • 自定义微信元件库:Axure基本元件的应用(下)
  • Axure教程|购物车商品增减删除练习
  • Axure7.0教程(七)math函数的使用(2)Math函数简介
  • Axure原型设计之轮播图
  • Axure7.0教程(二)中继器的使用(2)
  • Axure8.0原型案例:制作手机拨号界面
  • Axure教程——页面载入进度条
  • Axure教程 | 商品列表页筛选排序练习
  • Axure教程:微信面对面建群原型设计

文章分类

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

最近更新的内容

    • Axure7.0教程(一)中继器的使用(1)
    • Axure 原型 | 关于中继器的简单使用及应用的场景
    • Axure教程:如何使用Axure中继器元件?
    • Axure中继器姊妹篇:列表页添加排序和筛选功能
    • 建立自己的元件库(二)——验证码
    • Axure教程:怎样做低保真轨迹追踪与回放
    • Axure教程:移动端原型页面横纵向滑动同时实现
    • Axure8.0教程:“百度一下,你就知道”搜索首页原型设计
    • Axure教程|购物车商品增减删除练习
    • Axure教程:导航栏和广告悬停效果制作

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

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