axure9三级菜单教程

今天教大家用中计器制作三级菜单的圆形模板，我们先来看看效果，鼠标一入菜单时会有一个变色的效果，点击还有紫菜单的菜单时，可以展开或收起紫菜单。这个模板是做了个一至三级菜单的效果，每一集都可以做链接页面， 点击含有链接页面的菜单，就会在右侧打开对应页面的内容。这个圆形是用中机器制作的，所以后续的使用也非常方便，我们使用时只需要修改中机器表格里面的数据，就可以自动生成交互效果。 例如我们在一级菜单式功能说明，二级菜单式功能四下面增加一个子弦的菜单， 我们在这里插入对应菜单的图标， 这里是插入要显示的页面，我们先新增一个页面， 在这个页面里放入对应该页需要显示的内容，这里为了方便我们就输入此前真帅，然后回到刚刚页面的中记器里，右键引入页面，选择刚刚新建的页面， 我们看看效果，点击展开功能四可以看到刚刚新增的菜单就自动出现了，点击之后也打开了对应的页面，打开其他页面也没问题。 ok， 那接下来我们就一起来学习制作吧。完整版的视频教程可以在我的公众号里付费观看，也可以加入圆形分享群， 进群后可以免费使用我的圆形模板教程集视频，有不懂的问题都可以在群里讨论，我懂的都会解答，而且群里有几百名产品人，都是互相帮助，共同进步的。

今天和大家分享能伸缩的三级菜单的圆形模板，点击副菜单可以展开或收起子菜单。点击子菜单可以打开该菜单对应的页面， 如果打开的是新的页面，就会自动生成新的标签，我们可以通过点击标签快速切换查看页面，如果有不需要的标签，也可以点击关闭按钮删除。 我们也可以点击箭头收起或者展开菜单。这个模板是用中计器制作的，所以使用也很方便，使用时在中计器表格里填写对应内容，即可自动生成交互效果。 那这个圆形模板我已上传到原型分享群，需要的小伙伴们可以在群里自行下载，没有进群的同学也欢迎你加入。 在群里可以免费使用我所有的圆形模板，上面的这些都是在群里免费分享的高保真圆形模板，另外群里也有很多高保真圆形的视频教程，也是可以免费观看学习的， 后续更新的内容也会免费上传到原型分享群里，而且更新的频率还很高哦。有不懂的问题都可以在群里讨论，我懂的都会解答，而且群里有几百名产品人，都是互相帮助，共同进步的。 最后欢迎你加入我们互助的大家庭！

大家好，今天给大家分享一下我们的菜单表格原件中的水平菜单和垂直菜单， 那在我们的实战中经常就是用来绘制我们的吉年或者我们的多吉菜单，我们可以看到我们拉出来的水平，还有我们的垂直菜单。 首先我们如果要把这个菜单他的边框线去掉的话，如果我们是选中整个菜单连键的话，我们是没办法直接去掉的。 我们可以看到我们选中他，我们已经改为名的他的变化，现在是去不掉，我们只有在里面去圈选这三 三个，把他的边框线去为零，这样的话他才可以把边框线去掉。那当我们想给某个菜单添加 紫菜单的时候，他这边可以去后方添加菜单项，这就是他的后方， 那这样是添加他这个菜单的一个填充，就是给这个菜单给他外边宽添加一个，我们这边先把他的描边加回来，这样可以效果明显一点。 编辑菜单填充，假如我们给个二十，你可以看到我们的菜单刚才外边这边就有一个二十的填充，那这边就是 选择我们的添加的紫菜蛋，你给他添加一下， 那我们这边可以给他设置一下对齐方式，那如果你想改填充，就可以在这边改一下间距，距离左边的间距 好，这就是当他悬浮的时候，他会自动展开他的紫菜单，那如果你在这是第二层，如果你再点添加三层的话，同样的再去添加紫菜单，这样他同样的可以去 设置我们的三级菜单。 那我们预览一下，你看这边都是没有添加紫菜单，当你有添加紫菜单的时候，他鼠标一入的时候会自动显示我们的紫菜单，这是三级菜单， 这样我们可以省去一些设置我们的一些交互动作，那我们把我们的他的菜单填充，把它去掉， 那这边我们会发现我们还少了一个悬浮的样式， 你给他添加一下，选中他们，同样的我们只能通过圈选，再去交布面板去添加我们的悬停的时候 把他的日体颜色变为其他颜色，确定，这样的话你就可以看到我们的菜单的一些效果。 那同样的我们的垂直菜单也是同样的道理，这边的菜单填充就是刚才的给他边框去添加个填充式， 填充这间距，那这样的同样的是后方啊，添加一些菜单选项啊，那就是添加紫菜单，同样的可以再添加三级 是二级菜单， 那这是我和他的三级，同样的他们都可以去添加 我们的悬停的样式， 那添加完以后，当然我们就是把它删掉，删除菜单项，然后把他们三个的边框去掉，对等一下可以看到没有， 这就是水平和垂直菜单的一些作用，这样对小白的同学， 他可以不用自己去添加一些显示隐藏的一些交互动作。好的，这节课我们就讲解到这里，谢谢大家。

之前在群里面有位朋友提问题，说他做的三级菜单没有办法做到二级菜单，搜索的时候把下面的一级菜单一起收上来， 我们看一下他是怎么做的。他是用动态面板来实现，做了一个大的红色的面板和两个小的蓝色的面板，然后我照着他的样子也做了一个一模一样的效果出来， 然后在屏幕的右边就是我照着他的这个做法做出来的一些效果。我们可以看到点击二级菜单确实没有办法把下面的一级菜单给收上来，但是点击一级菜单可以把下面的一级菜单给收上来。 我们先说解决方案，首先要保持所有的空间都在同一个图层，然后我们用一级菜单来控制下面的二级菜单和三级菜单， 用二级菜单来控制这个二级菜单下面的三级菜单。接下来我们就可以看到，点击这个二级菜单以及下面的那个二级菜单，我都可以把下面的一级菜单给收上来。那问题就来了，为什么用我的这个方法就可以让他这个效果实现呢？ 我的这个方法是把所有的空间都放在一个卫面里面，因此推拉效果可以对这个卫面里面的所有空间生效，而动态面板的话，他只能对动态面板里面的 空间生效，所以当有一些空间处于动态面板的外面的时候，这个动态面板内部的推拉效果是无法对动态面板外部的空间产生任何效果的，所以这也就是为什么他的那种方式是没有办法实现推拉效果的。 好了，那这一次的讲解就到这里结束了，友友再见吧。

今天和大家分享三级下拉选择器的圆形模板，点击选项框会弹出下拉选择器，选择一级内容后会显示对应的二级选项，选择二级选项后会显示对应的三级选项。 选择三级选项后会收起选择器，这里会自动回选我们选择的选项，我们也可以重新选择，点击品牌就可以重新选择对应的品牌，选择苹果后会显示对应的型号， 我们也可以选择其他家店。选择空调后会显示对应的空调品牌，选择品牌后也会显示对应的型号。这个模板是用中机器制作的，所以使用也很方便，我们只需要维护中机器表格内的选项数据，就可以自动生成交互 效果。那这个圆形模板我已上传到圆形分享群，需要的小伙伴们可以在群里自行下载，没有进群的同学也欢迎你加入。 在群里可以免费使用我所有的圆形模板，上面的这些都是在群里免费分享的高保真圆形模板， 另外群里也有很多高保真原型的视频教程，也是可以免费观看学习的，而且有不懂的问题都可以在群里讨论，我懂的都会解答。 群里有几百名产品人，都是互相帮助，共同进步的。最后欢迎你加入我们互助的大家庭！

每天二十分钟学习一个新知识。大家好，我是你女朋友大海。现阶段我们一起学习的是 x 九点零圆形设计系列课程，今天跟大家一起学习的是水平菜单和垂直菜单。 嗯，那什么是水平菜单呢？就是横向展示的菜单，那垂直菜单的话，那就是纵向展示的菜单。 那实际应用我给大家找了两个例子，大家可以看一下，常应用于你看，比如说这是一个电商型的一个网站，他的这样横向展示了这些栏目， 这属于一个水平菜单。在他纵向这样展示的这一个栏目，这属于垂直菜单， 那当然大部分的那一种网络，呃，就是网站啊，大部分都是像这种垂直菜单进行展现的。好的，我们来拖一下这个空间来看看。 拉到那个菜单与表格，那这边有一个水平菜单，然后还有一个垂直菜单， 那我们先选中他，然后右键可以看到他有几种编辑啊，编辑内容的种类。有编辑菜单填充，那这个 是什么意思呢？我们点击进去，然后可以填充他的像素，可以填充当前的菜单，也可以应用到全部菜单。那他这个就是给这个外边框增加他的边框， 比如说我现在输一个五，然后大家来看一看他是什么样的。那这个时候大家可以看到一个五像素宽的一个边框进行呈现了。 好，这个后方添加菜单项，也就是在他的后方可以看到添加了一个项， 然后前方增加，就在前面增加了一个菜单项。删除菜单项，就直接把这个删除掉，然后还有添加 紫菜单，在他的下面增加紫菜单，比如说文减音， 文件二，文件三， 好，这个时候我们单击他，他就可以展开自己的一个紫菜单了，然后我们在文件一里面再去增加紫菜单， 文件一杠一， 一等二， 一杠三，好，我们在三里面再去增加，他就是可以不断的去增加紫菜单，紫菜单，然后他的发展方向也就是垂直这样的。那当， 当然你的菜单 可以不断的横向水平的去增加很多啊，我们预览一下效果，什么样的 鼠标移上去之后，他的紫菜单就相应的就可以显示出来了。那和我们看的这个其实是一样的一个效果啊，把鼠标移上去他就可以出来了。 一般像网页的话，菜单也最多也就三层，像这个就是第二层，第三层 是最多三层了，做太多了就显得有点比较繁琐了， 可以看一下垂直下单。 呃，为为什么要了解这个空间啊？ 这个空间相当于是说他这个空间已经就有那种展开的那种效果了啊，就是省去我们。嗯，如果没有这个空间的话，我们可能要去做很多胶布来是达到我们想要的这种鼠标一上去，然后有这种展示的效果，但是他这个空间的话就 已经集成了这一效果，那垂直这单也是一样的。 好的，那我们今天就到此结束，我们下一期再见。

如何用垂直菜单原件制作一个菜单导航？今天我们主要讲解的是菜单表格原件垂直菜单的使用方法。首先打开 x 软件，选择表单表格中的垂直菜单原件，拖入画布中，默认看到三列菜单，双击 item 一、 item 二、 item 三进行编辑文本， 对菜单输入对应文本首页。课程类型，作品案例，选择课程类型，鼠标右键选择添加紫菜单。紫菜单默认三列空白菜单， 双击进行编辑文本为基础课、进阶课、实战课。选择作品案例菜单，鼠标右键选择后方添加菜单项。此时我们看到下方插入了一个空白菜单进行编辑文件未联系我们。同时也可 可以对选中的菜单进行前方添加菜单项或删除菜单项。 选中菜单，鼠标右键选择编辑菜单填充项，填充时像素选中适用于当前菜单和全部子菜单，点击确定。现在我们可以看到在菜单边缘多了时，像素向四周偏移。 选择外框进行填充蓝色线段，设置零像素，按 shift 键进行选择菜单，并填充黄色线段，填充淡蓝色。 选中课程类型，对子菜单进行填充，方法和主菜单填充一致。用垂直菜单制作一个系统菜单的方法就基本制作完成。根据实际需求可对菜单进行内容和样式 进行丰富。对菜单可进行交互设计和链接到对应的页面或 u、 r、 l， 点击右上角预览， 在浏览器上查看原型。当我们鼠标移入到课程类型，就可以查看到下集紫菜单。 本节课程垂直菜单原件相关知识你学会了吗？记得点赞关注我！

如何制作这样的标签菜单？一、小部件设置拖动两个按钮，小部件到画布上选中两个按钮，在样式窗格中的角可见性空间中关闭底角， 将按钮的文本分别设置为 tabi、 tab。 二、拖动一个矩形，小部件到画布上设置填充色为蓝色，设置文本内容为 tab 内容，右键将矩形设置为动态面板，复制 state。 七、将 stater 的矩形文本改为 tab 二、内容 二、设置交互，选中两个按钮，右键选择交互样式设置，选中时填充色为蓝色，四色为白色。单击太笔按钮新建交互，选择，单击时设置选中当前原件，双击添加动作选择，设置面板状态，选择动态面板， 选择 state 机，单击 tab 二按钮，新建交互，选择，单击时设置选中当前原件，双击添加动作选择，设置面板状态，选择动态面板，选择 state。 二、选中两个按钮，右键选择选项组， 设置选项组名称。单机画布，新建交互页面载入时设置选中 tab 按钮预览。