Axure学习:网站后台导航菜单的制作及对应内容的显示

​不少产品经理主要做的产品是后台系统,在做后台原型的时候对于有些部分的内容存在一些疑惑。 

我们的学员也是一样,在做后台的时候遇到了一些问题,请教了老师,得到了解答。这里和大家分享一下,同学们的问题以及解决方法,希望能给大家一些帮助。

同学们的问题主要集中在后台的导航菜单,以及相对应界面的显示上。因为问到的问题具体是涉及到同学正在做的工作,所以不方便将同学原本的图片等展示出来。为了方便解释,这里换了一个例子。     

             

那慢慢一个个问题来看。

1、动态面板和母版

这里的问题主要是对于菜单部分的疑问。这位同学主要的问题在于对动态面板和母版的理解存在一些错误。

在axure中来说,动态面板和母版是两个不存在互斥关系的内容。动态面板是一个基础部件,在任何页面,包括母版页面中都可以使用。甚至动态面板本身的状态页面中都可以再次使用动态面板。

母版我们可以看成“模板”,它是一个可以套用、修改的内容。母版一般是我们自己利用基础部件进行制作的,包括动态面板在内均可使用。

总体来说,动态面板中可以使用母版,母版中也可使用动态面板。比如以这个例子来讲,可以这么做。

建立一个母版,母版的主要内容是导航菜单。使用母版的原因是,在后台的大多数页面都会使用到这个导航菜单,可以复用。

菜单使用动态面板制作。为什么呢?因为这里的菜单包含了一级菜单和二级菜单,可以对菜单进行展开和收起的操作。用动态面板制作两个不同的状态即可。

展开收起的操作刚好也有同学像老师请教过,所以这里一起给出答案了。当然不用动态面板也是可以的,只是其中的一种较为方便的做法。

2、选中和选中样式

这里同学遇到的问题是,在点击导航进入新的页面,但是选中的设置是在原来的页面中设置的。所以导致新的页面没有办法显示选中的样式。

菜单在按照前面母版的做法做好之后,在母版中可以设置点击之后进行也买你的跳转。比如,点击内容管理-思想观点,跳转到思想观点的页面。

为了避免跟同学一样的情况,我们在进入新的页面之后再去设置菜单的选中及样式。打开跳转的页面,在页面载入的时候,设置内容管理和思想观点为选中。注意不要忘记在母版中设置内容管理和思想观点选中时的交互样式。

这样设置好之后,就可以在跳转到某个页面之后,对应的菜单保持选中时的交互样式。

3、善用内部框架

前面的做法可能会有朋友觉得麻烦,想要找一下有没有简单的方法。答案是有的。我们可以用内部框架去完成。

在母版页面中,菜单的旁边搭建一个内部框架。确定好位置

在母版的菜单中,设置点击菜单选项时,选项为选中的同时。设置在内部框架中打开“思想观点”的页面即可。

最终的效果也是一样是我们想要的。

注意:用这种方法做的话,被打开的页面必须不包括母版的内容在内,不然会造成元素的重复。

前面提问的同学是在自己的工作当中遇到的问题,然后寻求老师的帮助。这是在学习任务之外的内容,也是VIP同学能够享受到的另外的服务:发现问题即可寻求老师的帮助进行解决,在一定程度上减轻了同学们的负担。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

找到冠军 II

题目: 一场比赛中共有 n 支队伍,按从 0 到 n - 1 编号。每支队伍也是 有向无环图(DAG) 上的一个节点。 给你一个整数 n 和一个下标从 0 开始、长度为 m 的二维整数数组 edges 表示这个有向无环图,其中 edges[i] [u…

SpringBoot碎片化知识

参考资料: java官方词典:https://docs.oracle.com/javase/tutorial/information/glossary.html#F苍穹外卖:https://www.bilibili.com/video/BV1TP411v7v6 JavaBean规范 JavaBean规范是一种类的规范,其要求符合下列条件&#xf…

跟着教程使用腾讯云服务器一步步搭建网站教程,收藏级

使用腾讯云服务器搭建网站全流程,包括轻量应用服务器和云服务器CVM建站教程,轻量可以使用应用镜像一键建站,云服务器CVM可以通过安装宝塔面板的方式来搭建网站,腾讯云服务器网txyfwq.com整理使用腾讯云服务器建站教程,…

【vue】v-model.lazy等(非实时渲染)

v-model&#xff1a;实时渲染v-model.lazy&#xff1a;失去焦点/按回车后&#xff0c;才渲染v-model.number&#xff1a;值转换为数字v-model.trim&#xff1a;去除首尾空格 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8&qu…

「JavaEE」初识进程

初识进程 &#x1f349;进程&#x1f34c;操作系统的进程管理 &#x1f349;PCB 重要属性&#x1f34c;进程的身份标识&#x1f34c;内存指针&#x1f34c;文件描述符表&#x1f34c;进程的状态&#x1f34c;优先级&#x1f34c;记账信息&#x1f34c;上下文 &#x1f349;内存…

LongAdder和AtomicLong的对比实验

LongAdder 的核心思想是热点分离&#xff0c;与 ConcurrentHashMap 的设计思想类似&#xff1a;将value值分离成一个数组&#xff0c;当多线程访问时&#xff0c;通过Hash算法将线程映射到数组的一个元素进行操作&#xff1b;而获取最终的value结果时&#xff0c;则将数组的元素…

C++ 之 【类与对象】 从入门到精通一条龙服务 进阶篇(类的6个默认成员函数,构造,析构。。。)

以后把闹钟换成唢呐&#xff0c;醒了就起床&#xff0c;不醒就上天堂 一、类的6个默认成员函数 二、构造函数 1.概念 2.特性 三、析构函数 1.概念 2.特性 四、拷贝构造函数 1.概念 2.特征 五、赋值运算符重载 1.运算符重载 2.赋值运算符重载 3.前置和后置重载 六…

[大模型]Qwen1.5-7B-Chat FastApi 部署调用

Qwen1.5-7B-Chat FastApi 部署调用 环境准备 在 Autodl 平台中租赁一个 3090 等 24G 显存的显卡机器&#xff0c;如下图所示镜像选择 PyTorch–>2.0.0–>3.8(ubuntu20.04)–>11.8&#xff08;11.3 版本以上的都可以&#xff09;。 接下来打开刚刚租用服务器的 Jupyt…

pom.xml显示灰色并被划线

在使用 IDEA 进行开发的过程中&#xff0c;有时候会遇到 pom.xml 显示灰色并被划线的情况&#xff0c;如下图&#xff1a; 这一般是因为该文件被 Maven 忽略导致的&#xff0c;可以进行如下操作恢复&#xff1a; 设置保存后&#xff0c;可以看到 pom.xml 恢复了正常&#xff1a…

使用 Java 原生或 Hutool 工具包编写非对称加解密的工具类

1、什么是非对称加密 使用一对&#xff08;2个&#xff09;密钥&#xff1a;一个用于加密信息&#xff0c;另一个则用于解密信息。有“公钥&#xff08;Public Key&#xff09;”和“私钥&#xff08;Private Key&#xff09;”之分。 非对称加密的“公钥”和“私钥”是成对出现…

Java 中文官方教程 2022 版(四十九)

原文&#xff1a;docs.oracle.com/javase/tutorial/reallybigindex.html JAXB 示例 原文&#xff1a;docs.oracle.com/javase/tutorial/jaxb/intro/examples.html 以下部分描述如何使用包含在 JAXB RI 捆绑包中的示例应用程序。JAXB RI 捆绑包可从jaxb.java.net获取。下载并安装…

基于OptiTrack跟踪系统和Turtlebot机器人的视觉SLAM定位评估

本文旨在介绍使用OptiTrack光学跟踪系统和Turtlebot机器人进行视觉SLAM定位实验的详细流程&#xff0c;包括实验平台搭建过程、数据处理过程以及SLAM估计评估方法。由于涉及知识较多&#xff0c;部分内容只给出了相关参考博文链接。 1 实验平台搭建 实验平台包括OptiTrack光学…

使用 Meltano 将数据从 Snowflake 导入到 Elasticsearch:开发者之旅

作者&#xff1a;来自 Elastic Dmitrii Burlutskii 在 Elastic 的搜索团队中&#xff0c;我们一直在探索不同的 ETL 工具以及如何利用它们将数据传输到 Elasticsearch&#xff0c;并在传输的数据上实现 AI 助力搜索。今天&#xff0c;我想与大家分享我们与 Meltano 生态系统以及…

Python项目1 外星人入侵_记分

在本章中&#xff0c;我们将结束游戏《外星人入侵》的开发。我们将添加一个Play按钮&#xff0c;用于根据需要启动游戏以及在游戏结束后重启游戏。我们还将修改这个游戏&#xff0c;使其在玩 家的等级提高时加快节奏&#xff0c;并实现一个记分系统。阅读本章后&#xff0c;你将…

2024年【山东省安全员C证】考试资料及山东省安全员C证考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 山东省安全员C证考试资料考前必练&#xff01;安全生产模拟考试一点通每个月更新山东省安全员C证考试试题题目及答案&#xff01;多做几遍&#xff0c;其实通过山东省安全员C证作业模拟考试很简单。 1、【多选题】.设…

【计算机毕业设计】人事管理系统——后附源码

&#x1f389;**欢迎来到我的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 一名来自世界500强的资深程序媛&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于…

二叉搜索树--搜索二维矩阵 II

题目描述 编写一个高效的算法来搜索 m * n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,9,16,22],[10,…

Python之旅(一)——常量、变量、动态类型

文章目录 Python背景知识Python用途Python的优缺点Python前景&#xff08;钱景&#xff09; 常量和表达式变量与类型变量的定义变量命名的规则变量的使用变量的类型整数 int浮点数 float字符串布尔其他(暂不介绍&#xff09; 动态类型 标黄部分是和C语言不同的部分Python背景知…

在mysql中如何更新数据呢?

如何更新一条数据&#xff1f; 在 MySQL 中&#xff0c;更新一条数据可以使用 UPDATE 语句。以下是更新一条数据的基本语法&#xff1a; UPDATE table_name SET column1 value1, column2 value2,... WHERE condition;其中&#xff1a; table_name&#xff1a;要更新的表的…

Git以及Gitlab的快速使用文档

优质博文&#xff1a;IT-BLOG-CN 安装git 【1】Windows为例&#xff0c;去百度下载安装包。或者去官网下载。安装过秳返里略过&#xff0c;一直下一步即可。丌要忉记设置环境发量。 【2】打开cmd&#xff0c;输入git –version正确输出版本后则git安装成功。 配置ssh Git和s…