Axure实现导航栏的展开与收缩

Axure实现导航栏的展开与收缩

  • 一、概要介绍
  • 二、设计思路
  • 三、Axure制作导航栏
  • 四、技术细节
  • 五、小结

一、概要介绍

使用场景一般是B端后台系统需要以导航栏的展开与收缩实现原型的动态交互,主要使用区域是左边或者顶部的导航栏展开与收缩,同一级导航下的小标题,放在一起既美观又节省时间。

二、设计思路

怎么才能做到导航栏的展开与收缩呢?是使用简单的隐藏再显示?使用简单的隐藏与显示就能做到?那要是很多小导航栏怎么做到呢?
实现方案就是:使用元件-动态面板来实现隐藏与显示,在Axure中,动态面板的使用场景很多实用率也很高,下面就由我使用Axure来给大家演示一下。

三、Axure制作导航栏

第一步,先创造一个矩形,大小和正常导航栏一样大就行,填充颜色与编辑字体,如下图;
在这里插入图片描述
第二步,点击右键,将这个矩形转换为动态面板,转换并复制多一个,分别改名为导航栏-合并,导航栏-展开;
在这里插入图片描述
第三步,在导航栏-展开的动态面板下再复制三个小导航栏,并改里面的文字为1、2、3;
在这里插入图片描述
第四步,设置交互,先在外面设置-单击时-设置面板状态-到导航栏-合并,勾选上推动和拉动元件;
在这里插入图片描述
第五步,设置里面的动态面板,双击进入,选择导航栏-展开,设置第一个为单击时-设置面板状态-到导航栏-合并,勾选上推动和拉动元件;
在这里插入图片描述
第六步,设置小导航栏为-单击时-设置选中-目标当前,以下两个也是一样;
在这里插入图片描述
第七步,所有动态面板都添加鼠标悬停是交互样式,填充颜色与字体自己搭配;
在这里插入图片描述
第八步,选择已经创建好的第一个动态面板,复制多几个放在下面,预览完成了。
在这里插入图片描述

四、技术细节

1、要注意区分大导航栏与小导航栏动态面板的区别,比如大导航栏是设置到对应的动态面板,并勾选推动和拉动元件,小导航栏则是跳转到当前页面。
2、要记得添加一个鼠标悬停的效果,后期可以设置成点击之后高亮固定

五、小结

关注我不迷路,一天给你们更新一个小妙招~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/822743.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 自定义SwitchPreference

1. 为SwitchPreference 添加背景&#xff1a;custom_preference_background.xml <?xml version"1.0" encoding"utf-8"?> <selector xmlns:android"http://schemas.android.com/apk/res/android"><item><shape android:s…

03-JAVA设计模式-组合模式

组合模式 什么是组合模式 组合模式&#xff08;Composite Pattern&#xff09;允许你将对象组合成树形结构以表示“部分-整体”的层次结构&#xff0c;使得客户端以统一的方式处理单个对象和对象的组合。组合模式让你可以将对象组合成树形结构&#xff0c;并且能像单独对象一…

python基础——类型注解【变量,函数,Union】

&#x1f4dd;前言&#xff1a; 上一篇文章Python基础——面相对象的三大特征提到&#xff0c;python中的多态&#xff0c;python中&#xff0c;类型是动态的&#xff0c;这意味着我们不需要在声明变量时指定其类型。然而&#xff0c;这可能导致运行时错误&#xff0c;因为我们…

Win10系统VScode远程连接VirtualBox安装的Ubuntu20.04.5

1.打开虚拟机&#xff0c;在中端中输入命令: sudo apt-get install openssh-server 安装ssh 我这里已经安装完成&#xff0c;故显示是这样 2.输入命令&#xff1a;sudo systemctl start ssh 启动远程连接 注意&#xff0c;如果使用VirtualBox安装的虚拟机&#xff0c;需要启用…

Jmeter03:直连数据库

1 Jmete组件&#xff1a;直连数据库 1.1 是什么&#xff1f; 让Jmeter直接和数据库交互 1.2 为什么&#xff1f; 之前是通过接口操作数据库&#xff0c;可能出现的问题&#xff1a;比如查询可能有漏查误查的情况&#xff0c;解决方案是人工对不&#xff0c;效率低且有安全隐患…

Spring核心容器总结

2.2 核心容器总结 2.2.1 容器相关 BeanFactory是IoC容器的顶层接口&#xff0c;初始化BeanFactory对象时&#xff0c;加载的bean延迟加载 ApplicationContext接口是Spring容器的核心接口&#xff0c;初始化时bean立即加载 ApplicationContext接口提供基础的bean操作相关方法…

了解 Unity AI:从初学者到高级的综合指南

游戏中的AI是什么? 游戏中的人工智能是指利用人工智能技术使视频游戏中的非玩家角色和实体智能地行动、做出决策、对游戏环境做出反应,并提供引人入胜的动态游戏体验。什么是NPC? NPC 代表“非玩家角色”。NPC 是视频游戏、角色扮演游戏中不受人类玩家控制的角色。它们是计算…

Springboot+Vue项目-基于Java+MySQL的蜗牛兼职网系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

Pytest精通指南(01)介绍与基本使用

文章目录 Pytest 简介Pytest 官网Pytest 核心Pytest 原理Pytest 用途Pytest 特点Pytest 安装Pytest 编写测试用例规则Pytest 编写第一条测试用例用例代码示例可执行测试执行一条测试执行多条测试 Pytest 运行方式run模式pytest模式run模式扩展命令行模式 Pytest.main()常用命令…

【Golang】并发编程之三大问题:原子性、有序性、可见性

目录 一、前言二、概念理解2.1 有序性2.2 原子性后果1&#xff1a;其它线程会读到中间态结果&#xff1a;后果2&#xff1a;修改结果被覆盖 2.3 可见性1&#xff09;store buffer(FIFO)引起的类似store-load乱序现象2&#xff09;store buffer(非FIFO)引起的类似store-store乱序…

太阳能智能语音卡口:环保与智能的完美结合/恒峰智慧科技

随着科技的飞速发展&#xff0c;我们的生活正在经历前所未有的变革。在这场变革中&#xff0c;太阳能智能语音卡口以其独特的魅力&#xff0c;成为环保与智能的完美结合&#xff0c;为我们的生活带来了更多的便捷和环保。 太阳能智能语音卡口&#xff0c;顾名思义&#xff0c;是…

React-hooks:useRef

useRef文档 useRef 是一个ReactHook&#xff0c;它能帮助引用一个不需要渲染的值。 const ref useRef(initialValue)参数 initialValue&#xff1a;ref对象的 current 属性的初始值&#xff0c;可以是任意类型的值&#xff0c;这个参数在首次渲染后被忽略。 返回值 useRe…

快速删除node_modules依赖包的命令rimraf

1、安装rimraf npm install -g rimraf 2、使用命令删除node_modules rimraf node_modules *** window系统&#xff0c;使用命令很快就删除node_modules ***

网工基础协议——TCP/UDP协议

TCP和UDP的不同点&#xff1a; TCP(Transmission Control Protocol&#xff0c;传输控制协议)&#xff1b; UDP(User Data Protocol&#xff0c;用户数据报协议)&#xff1b; TCP&#xff1a;传输控制协议&#xff0c;面向连接可靠的协议&#xff0c;只能适用于单播通信&…

Windows版MySQL5.7解压直用(免安装-绿色-项目打包直接使用)

windows下mysql分类 MySQL分为 安装版和解压版 安装版: 安装方便&#xff0c;下一步------下一步就OK了&#xff0c;但重装系统更换环境又要重新来一遍&#xff0c;会特别麻烦解压版&#xff08;推荐&#xff09;&#xff1a; 这种方式&#xff08;项目打包特别方便&#xf…

每日两题2

不同路径 class Solution { public:int uniquePaths(int m, int n) {vector<vector<int>> dp(m1, vector<int>(n1,0));//创建dp表dp[0][1] 1;//初始化//填表for(int i 1; i < m; i){for(int j 1; j < n; j){dp[i][j] dp[i-1][j] dp[i][j-1];}}ret…

第十五届蓝桥杯题解-好数

题目大意&#xff1a;一个数的低位为奇数&#xff0c;次低位为偶数&#xff0c;以此类推的数成为好数&#xff0c;例如&#xff1a;1&#xff0c;3&#xff0c;5&#xff0c;7&#xff0c;9 给定一个n&#xff0c;求1-n所有好数的个数&#xff0c;n<1e7 思路&#xff1a;一…

智慧煤矿软硬一体化解决方案 计算机视觉助力煤场的智能化作业建设与升级

一、背景介绍 随着科技的不断进步&#xff0c;AI视频分析已经广泛应用于各个领域&#xff0c;包括煤矿行业。智慧煤矿方案通过引入AI视频分析系统&#xff0c;实现对煤矿生产过程的实时监控和管理&#xff0c;从而提高智慧矿山的安全性和生产效率。为了解决井下作业距离地面远…

6-pytorch - 网络的保存和提取

前言 我们训练好的网络&#xff0c;怎么保存和提取呢&#xff1f; 总不可以一直不关闭电脑吧&#xff0c;训练到一半&#xff0c;想结束到明天再来训练&#xff0c;这就需要进行网络的保存和提取了。 本文以前面博客3-pytorch搭建一个简单的前馈全连接层网络&#xff08;回归问…

开通订阅plus

提示&#xff1a; 您的信用卡被拒绝了&#xff0c;请尝试用借记卡支付。您的金融卡已被拒绝。您拒绝了&#xff0c;请尝试用签账卡支付。我们未能验证您的支付方式&#xff0c;请选择另一支付方式并重试。 我都崩溃了&#xff0c;一次又一次的不行&#xff0c;换了好多方式。…