codecamp

制作自定义的下拉菜单

制作用户自定义的下拉菜单

把菜单装换成动态面板

image

首先打开AxureFlyoutMenu.rp，然后打开 Flyout Menu 页面。

选中内容和右键单击，然后选择 Convert to Dynamic Panel。标记这个面板为 MenuFlyout。

定位部件到导航项目下

image

移动菜单直至导航按钮刚好在菜单之上。

隐藏菜单

image

在样式表中将 Hidden 复选框选中，隐藏菜单。

添加 OnMouseEnter 事件

image

选中 Men 这个导航按钮，然后双击 OnMouseEnter 事件。

选中显示面板的动作

image

在事例编辑器中，选中 Show/Hide 动作。

选中面板中的 Treat as Flyout

image

选中 FlyoutMenu 然后在下拉列表中选中 Treat as Flyout。

预览你的原型然后去测试吧。

图片循环显示
折叠控制
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录
关于

从头开始

原型设计基础指南

核心训练

Masters 指南

动态面板指南

高级原型设计指南

Web 设计指南

iPhone App 指南

Repeater 部件指南

自适应视图指南

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }