当前位置:网站首页>Axure制作菜单栏效果
Axure制作菜单栏效果
2022-06-30 08:18:00 【poppinCC】

如何用Axure制作上面效果的菜单栏?直接上步骤:
新建1个母版(菜单栏模板)和5个页面(页面1——页面5),当点击菜单栏按键时,对应弹出页面效果

【母版制作】制作一个菜单框,拖一个矩形并输入“页面1”,再拖一个小图标和矩形做一个组合。

【母版制作】菜单框属性设置:矩形和小图标分别设置属性,属性为黑底白字,再设置鼠标悬停时为绿底白字,元件选中时黑底绿字。

【母版制作】菜单框交互设置1:矩形设置交互,如果当前组合的选中状态 == 真 ,则矩形设置为选中。小图标做相同交互设计。

【母版制作】将上面菜单框复制5个,并分别改名为:页面1、页面2、页面3、页面4、页面5
【母版制作】菜单框交互设置2:“页面1”组合设置交互,单击时打开链接,链接为页面1,这样的效果是单击菜单框“页面1”就会跳转到“页面1”页面。其余4个菜单框做相同设置
【母版制作】将母版添加到5个页面中
【页面交互】进入页面1,设置交互:页面载入时,菜单栏组合“页面1”设置为选中状态。其余4个页面做相同设置。

完成以上设置后,预览,就能看到最上面的交互效果!
边栏推荐
- Leetcode47. full arrangement II
- JS code case
- Deep learning - brnn and DRNN
- Dlib library blink
- Cesium learning notes (I)
- Opencv image
- 亚马逊测评术语有哪些?
- Experiment 2 LED button PWM 2021/11/22
- [flower carving experience] 13 build the platformio ide development environment of esp32c3
- Transformer architecture understanding
猜你喜欢

Want to change careers, but don't know what to do? This article is written for you who are confused

Hit the industry directly | the flying propeller launched the industry's first model selection tool

多快好省,低门槛AI部署工具FastDeploy测试版来了!

AcrelEMS能效管理平台为高层小区用电安全保驾护航

Cesium learning notes (V) custom geometry and appearance

直击产业落地 | 飞桨重磅推出业界首个模型选型工具

Gilbert Strang's course notes on linear algebra - Lesson 1

F12抓包用于做postman接口测试的全过程解析

【NVMe2.0b 14-5】Firmware Download/Commit command

Construction of energy conservation supervision system for campus buildings of ankery University
随机推荐
Redis设计与实现(五)| Sentinel哨兵
CRM能为企业带来哪些管理提升
【Tensorflow-gpu】window11下深度学习环境搭建
JS code case
Halcon12+vs2013 C # configuration
Game 280 problem2: minimum operands to turn an array into an alternating array
MIME类型大全
Pycharm Dlib library installation
【NVMe2.0b 14】NVMe Admin Command Set
[nvme2.0b 14-7] set features (Part 1)
Final review -php learning notes 2-php language foundation
[flower carving experience] 13 build the platformio ide development environment of esp32c3
C preliminary chapter learning route
1163 Dijkstra Sequence
Environment configuration of ROS Aubo manipulator
在浏览器输入url到页面展示出来
Redis设计与实现(四)| 主从复制
How to handle the expired data of redis and what are the elimination mechanisms?
【NVMe2.0b 14-6】Format NVM、Keep Alive、Lockdown command
Deep learning - embedding matrix and learning word embedding andword2vec