网易首页 > 网易号 > 正文 申请入驻

【Axure教程】:导航栏展开与收缩

0
分享至

编辑导语:无论在什么页面,导航栏都起着一个提示的作用,能够让用户第一时间找到自己所需要的栏目。本文以Axure为例,从三点讲解如何制作与使用导航栏的展开与伸缩,希望对你有帮助,一起来看看。

本文主要给大家讲解一下如何在Axure中制作导航栏的展开与收缩。

本文主要从三点带大家分析如何使用与制作:

  1. 使用场景
  2. 思路分析
  3. Axure制作

演示效果:https://slegsq.axshare.com

一、使用场景

我们在做一些B端产品项目时,大多的后台管理系统页面多为左侧或顶部放置导航栏,如果导航栏在一侧同时展示会显得比较繁琐,所以,使用导航栏的展开与收缩即可合理的将相关的分类放置同一级导航下,这样既节省了时间又可快速寻找到相应的页面。

二、思路分析

我们需要先思考Axure如何展示导航栏展开与收缩呢?需要满足什么条件呢?是否需要显示隐藏呢?如何划分多级元件进行分开展示呢?

看到这相比大家会想到一个元件:动态面板。

在Axure中动态面板的使用性是非常高的,接下来我将为大家详细介绍如何利用动态面板做出我们想要的导航栏~

三、Axure制作

首先咱们先创建一个矩形,参数设置为 长度:256,高度:54,填充颜色:#001529,并去掉该线宽设置为:0,左侧边距:40,点击右键设置选项组并命名:导航栏(参数可根据自身需要设置)。

点击右键设置交互样式,选择【选中】设置了填充和字色的样式,设置后保存,点击右键选择【转换为动态面板】(样式可根据自身需要设置)。

双击动态面板复制内部面板分别命名为:导航栏一 合并、导航栏一 展开。选择【导航栏一 展开】,再复制三个矩形框内部文字描述为(二级导航栏)(样式可根据自身需要设置)。

以上基础步骤设置完毕后,接下来我们进行交互设置。

选择动态面板内【导航栏一 合并】点击矩形框,交互内容为:单击时-设置面板状态-目标:已有的动态面板、STATE:导航栏一 展开、推动和拉动元件。

选择动态面板内【导航栏一 展开】点击第一个矩形框,交互内容为:单击时-设置面板状态-目标:已有的动态面板、STATE:导航栏一 合并、推动和拉动元件。

选择动态面板内【导航栏一 展开】点击第二个矩形框,交互内容为:单击时-设置选中-当前元件。并分别对下方两个元件设置同样交互。

最后一步:选择已创建的第一个动态面板进行复制两次依次放置下方,查看预览演示就完成啦~

希望内容可以帮助到您,会不断更新内容,大家一起学习~

本文由 @画图仔 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
看过皱市明的拳馆就知道他为什么三年亏两亿失败,原因有以下几点

看过皱市明的拳馆就知道他为什么三年亏两亿失败,原因有以下几点

玲子日记
2024-12-22 12:19:33
车厘子,价格暴跌!

车厘子,价格暴跌!

鲁中晨报
2024-12-22 22:48:13
上海地铁撞吊塔,施工队一年白干闯大祸,地铁质量惹争议

上海地铁撞吊塔,施工队一年白干闯大祸,地铁质量惹争议

校长侃财
2024-12-23 09:42:14
我断供儿子7000房贷后,亲家母被赶出家门,儿媳不再天天取快递了

我断供儿子7000房贷后,亲家母被赶出家门,儿媳不再天天取快递了

夜不魅
2024-12-22 23:37:43
弗爵爷彻底坐不住了!不仅因为3球惨败伯恩茅斯,更是因为这两点

弗爵爷彻底坐不住了!不仅因为3球惨败伯恩茅斯,更是因为这两点

田先生篮球
2024-12-23 08:30:57
51岁叶檀住院复查后续:癌症晚期已骨转移,主治医生评分不太乐观

51岁叶檀住院复查后续:癌症晚期已骨转移,主治医生评分不太乐观

好妈妈看娱乐
2024-12-21 11:14:12
大S儿子向张兰索要26万礼物,张口闭口不离钱,被大S彻底带偏!

大S儿子向张兰索要26万礼物,张口闭口不离钱,被大S彻底带偏!

古希腊掌管月桂的神
2024-12-23 12:16:11
“丹凤眼”有多罕见?看一眼就再难忘,精致到骨子里的眼型

“丹凤眼”有多罕见?看一眼就再难忘,精致到骨子里的眼型

星光历史
2024-12-22 10:37:17
两兄弟轮番伤害女医生,被她用伟哥送上西天,扔进堆满白骨的地窖

两兄弟轮番伤害女医生,被她用伟哥送上西天,扔进堆满白骨的地窖

飞云如水
2024-07-19 19:55:08
坐稳西部第三,火箭队3连胜!1.3亿先生10中1 最佳交易目标已出炉

坐稳西部第三,火箭队3连胜!1.3亿先生10中1 最佳交易目标已出炉

锅子篮球
2024-12-23 11:30:25
今年考研人数暴跌50万,俞敏洪一段话打脸无数人:孩子,别人都说“学历是废纸”,可怕的是你真信了……

今年考研人数暴跌50万,俞敏洪一段话打脸无数人:孩子,别人都说“学历是废纸”,可怕的是你真信了……

阿呆爸
2024-12-22 21:06:40
再见中超!奥斯卡将与圣保罗签约3年,部分薪水或由赞助商承担

再见中超!奥斯卡将与圣保罗签约3年,部分薪水或由赞助商承担

美人茶话会
2024-12-23 12:20:06
注射肉毒杆菌20年VS自然衰老,这对双胞胎的脸部差异惊人!

注射肉毒杆菌20年VS自然衰老,这对双胞胎的脸部差异惊人!

新欧洲
2024-12-21 20:26:26
江苏女子打碎茶杯被索赔6000,她微笑付款离去,店主:坏了,快追

江苏女子打碎茶杯被索赔6000,她微笑付款离去,店主:坏了,快追

凯裕说故事
2024-12-16 14:37:55
难怪解放军不拦,国民党发现不对劲,美国售台坦克果然有问题

难怪解放军不拦,国民党发现不对劲,美国售台坦克果然有问题

说天说地说实事
2024-12-22 20:35:19
女子请男保姆照顾母亲,1个月后母亲呕吐不停,发现真相女儿崩溃

女子请男保姆照顾母亲,1个月后母亲呕吐不停,发现真相女儿崩溃

青青会讲故事
2024-12-13 15:11:48
3-0!56岁海港弃帅神了 英超执教首秀大胜+率队止4连败 痛击范尼

3-0!56岁海港弃帅神了 英超执教首秀大胜+率队止4连败 痛击范尼

我爱英超
2024-12-23 00:03:02
九个圣杯在广东福建是什么含金量?网友:只要妈祖同意 那就畅通无阻

九个圣杯在广东福建是什么含金量?网友:只要妈祖同意 那就畅通无阻

有趣的火烈鸟
2024-12-18 12:18:31
现在出轨的女人真的越来越多了,甚至已经超过了男的

现在出轨的女人真的越来越多了,甚至已经超过了男的

加油丁小文
2024-12-21 10:14:39
刘德华香港红馆演唱会打折卖票了,可惜你不够格

刘德华香港红馆演唱会打折卖票了,可惜你不够格

港剧叔
2024-12-23 10:35:09
2024-12-23 13:39:00
人人都是产品经理社区 incentive-icons
人人都是产品经理社区
想要成为大牛先从学做产品开始
67535文章数 311277关注度
往期回顾 全部

科技要闻

造车十年,李斌对蔚来现状“不那么满意”

头条要闻

90后小伙从湖北徒步3000公里去西藏:被认成70岁大爷

头条要闻

90后小伙从湖北徒步3000公里去西藏:被认成70岁大爷

体育要闻

逆潮流而行!灰熊已成NBA最另类球队

娱乐要闻

韦唯回应消失!出车祸脊柱折断,险些终身残疾

财经要闻

起底黑色产业链:信息黑洞出卖个人隐私

汽车要闻

柴油才对味 大通星际X 2.5T舒适得不像皮卡

态度原创

手机
教育
亲子
本地
公开课

手机要闻

苹果iPhone 16系列年底降价 标准版4999元入手

教育要闻

一位父亲的“血泪”教训:不要卑微讨好孩子,尤其这3个词千万不能碰

亲子要闻

艾媒咨询 | 2024年中国婴幼儿辅食行业消费行为研究数据

本地新闻

好吃潮州|潮州腐乳饼,咸甜党都沦陷了

公开课

李玫瑾:为什么性格比能力更重要?

无障碍浏览 进入关怀版