首页
学习
活动
专区
工具
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的子项展示出来

    12410

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

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

    1K40

    Fabric.js 右键菜单

    ---- PK创意闹新春,我正在参加「春节创意投稿大赛」,详情请看:春节创意投稿大赛 本文简介 Fabric.js 默认**没提供 鼠标右键事件**,只有 鼠标按键点击 、鼠标按键抬起 、鼠标移动 等事件...本文主要关注 Fabric.js 的主要 api 有: fireRightClick:允许右键点击 stopContextMenu:禁用默认右键菜单 mouse:down:鼠标点击事件 如果不知道 Fabric.js...的同学,可以看 《Fabric.js 从入门到___》 本案例是使用原生方式开发,不基于 Vue 、React 等框架,所以不用太担心运行环境等问题。...案例代码放了在文末~ 环境和版本 Chrome浏览器版本:96.0.4664.45 Fabric.js版本:4.6.0 思路 先说说需求: 右键单击元素,弹出菜单; 弹出菜单分4种情况(菜单在鼠标右侧...初始化画布,并生成图形 // 文档加载后执行 window.onload = function() { // 输出当前 fabric 版本 console.log(`Facrib.js

    7.1K10

    前端-10款web动画插件

    2.基于Layui的可自定义添加删除数据的表格处理插件 如何在网页上编辑表格数据,这通过自己编写JS和CSS实现都是比较麻烦的,jQuery有很多插件可以完成这种功能,比如这款jQuery简易版的Excel...类似的菜单插件还有CSS3侧边栏单页切换小图标菜单和CSS3侧边栏手风琴菜单,都非常实用。这种菜单非常适合在网站的后台管理页面中使用。 ?...6.CSS3弧形曲线循环菜单导航 菜单项图标高亮 今天给大家带来一个非常富有创意的CSS3菜单导航插件,它与我们平常看到的横向菜单或者纵向菜单都不同,它的菜单项是沿着一段弧形曲线分布的,同时有两个上下切换的按钮...10.CSS3深色背景的垂直手风琴菜单 手风琴菜单我们已经分享过很多了,特别是垂直手风琴菜单更为常见,比如这款jQuery手风琴样式的多级下拉菜单和这款CSS3带小图标的手风琴下拉菜单都非常不错。...这次要分享的也是一款基于CSS3的深色背景的垂直手风琴菜单,实现原理与之前的比较类似,但是菜单展示形式略有不同,这个手风琴菜单当展开时子菜单会有水平飞入的动画效果。 ?

    5.9K50

    【jQuery案例】手风琴

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

    1.9K20

    JS-鼠标经过显示二级菜单

    一级菜单 38 39 40 一级菜单 41...会在加完120后再执行,没想到他先执行的这个,并且弹出ullistElement,即说明他找到了subNav的ul, 问题来了,当加载完成后,请你尝试把鼠标再放到二级菜单上移动一下,你没选择一个二级菜单...,他就是把这三个alert再执行一遍,然后你就会看到ul的长度又加了20,当你不停的上下晃动鼠标,二级菜单就会不停的添加。...就是说你在二级菜单的每一个li上晃一下,他都会认为你是在重新执行了aLi.onmouseover这个代码,流程就再走了一遍。...} } }   后来我也发现了收缩不干净,总是多出外面几像素,但是我把border删掉他就收缩干净了,我不知道在js

    8.2K100
    领券