首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Axure原型设计:动态面板实现手风琴菜单

手风琴菜单效果很好,只是写的不够详细,在一番摸索后,貌似到达了同样的效果。所以分享出来,做一个简单的示例说明。...步骤如下:一、拖拉元件(1)先拖一个动态面板,命名:手风琴菜单(2)给“手风琴菜单”添加一个状态,命名:一级菜单(3)在“一级菜单”里,添加3个矩形框作为一级菜单项,3个箭头作为模拟菜单打开关闭效果,3...个动态面板作为二级菜单内容,分别命名清楚(命名只是为了我们交互时可以清晰看到元件名称,方便检查逻辑),效果如下:(4)给“二级菜单1”设置不可见和自适应内容,并添加一个状态,添加3个矩形框作为二级菜单项...(5)同样搞定“二级菜单2”、“二级菜单3”,效果如下:二、添加交互(1)给矩形框“一级菜单1”添加“单击”交互,效果是将对应的“二级菜单1”内容给展开和折叠。...“二级菜单1”可见时(8)添加动作“显示/隐藏”,将动态面板“二级菜单1”隐藏起来,并且下方的元件往回拉(9)添加动作“旋转”,将图标“箭头1”旋转180°逻辑解读就是当鼠标点击菜单1时将菜单1的子项展示出来

12610
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何用Mockplus快速做一个手风琴菜单

    手风琴菜单是一种比较常用的菜单形式,利用原型工具来做这种菜单通常要用到中继器。即使是功能强大的Axure,想实现该效果也比较麻烦。...但如果你对Mockplus有所了解,你一定知道,利用Mockplus的“面板”组件,可以快速地做一个手风琴式的菜单。 ? 我们来看看具体的操作步骤: 第一步:选择“面板”组件,自定义菜单样式。...这样,一个简易的手风琴菜单就做好了。你还可以在菜单选项中添加图标等组件,将菜单设置成你想要的样子。 我们来看看每个面板上都有哪些交互: 面板1: 链接到自己,调整大小。...一个面板组件,两个简易的交互,就能做出一个像样的手风琴菜单。 Mockplus虽然是一款操作简单的原型工具,但利用它你可以做出很多复杂的交互,实现不可思议的效果。

    1K40

    【jQuery案例】手风琴

    ‍ 哈喽大家好,本次是jQuery案例练习系列第五期 ⭐本期是jQuery案例——手风琴 系列专栏:jQuery笔记 笔者还是前端的菜鸟,还请大家多多指教呀~ 欢迎大佬指正,一起学习,一起加油...案例分析 案例实现 HTML CSS jQuery 方法一 方法二 总结 ---- 案例展示 https://live.csdn.net/v/embed/244227 哈喽大家好,本次案例将会实现一个简单的手风琴效果...,当鼠标指针滑过方块时,当前方块状态会发生变化 手风琴案例 案例分析 手风琴效果的实现并不复杂,需要用到jQuery中的fadeIn()和fadeOut()方法,以及鼠标指针进入事件mouseenter...,下面我们来对本次案例的实现思路进行分析 1、编写手风琴效果的页面结构。

    1.9K20

    前端-10款web动画插件

    5.jQuery左侧边栏多级菜单 适合后台管理页面使用 这是一款基于jQuery的侧边栏多级下拉菜单插件,这个菜单的特点是可以固定在左侧边栏,当页面滚动时整个菜单可以保持一直可见,方便操作。...类似的菜单插件还有CSS3侧边栏单页切换小图标菜单和CSS3侧边栏手风琴菜单,都非常实用。这种菜单非常适合在网站的后台管理页面中使用。 ?...6.CSS3弧形曲线循环菜单导航 菜单项图标高亮 今天给大家带来一个非常富有创意的CSS3菜单导航插件,它与我们平常看到的横向菜单或者纵向菜单都不同,它的菜单项是沿着一段弧形曲线分布的,同时有两个上下切换的按钮...10.CSS3深色背景的垂直手风琴菜单 手风琴菜单我们已经分享过很多了,特别是垂直手风琴菜单更为常见,比如这款jQuery手风琴样式的多级下拉菜单和这款CSS3带小图标的手风琴下拉菜单都非常不错。...这次要分享的也是一款基于CSS3的深色背景的垂直手风琴菜单,实现原理与之前的比较类似,但是菜单展示形式略有不同,这个手风琴菜单当展开时子菜单会有水平飞入的动画效果。 ?

    5.9K50

    小程序-实现折叠面板-手风琴效果

    背景 无论是在小程序还是 h5 网页,折叠菜单,手风琴是一个非常常见的效果,如今也有很多现成的 UI 组件库已经实现了这一效果的,但有时候在写原生小程序时,单单就是一个折叠菜单效果,却要引入整个 UI...40rpx; display: block; } .hidden-content { // 主要利用的是display:none实现隐藏 display: none; } 如下是折叠菜单逻辑代码...) { this.setData({ [`selected[${active}]`]: false, }); } }, }); 如上代码就可以实现手风琴的效果...然后列表的数据的名称以及要展示的内容放在一个数组listDatas中,随后,循环列表渲染 在列表中绑定点击事件,在元素上设置data属性,在事件对象中就可以获取到,最终通过setData修改数据,以达到实现手风琴的效果...结语 实现这个手风琴,主要还是在怎么控制子选项的一个状态selected,通过列表的索引,然后进行控制selected的状态,实现子项列表内容的显示和隐藏 ---- 如果您有问题,欢迎小伙伴们下方留言

    3K10

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券