嵌套组件-下拉滚动子菜单交互动效UI/UX

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

教程内容:

使用嵌套组件制作出下拉滚动菜单的交互效果

总览

这个案例只需要制作一个画板,是关于嵌套组件的基础教程

主要需要实现的效果是鼠标上移到输入框出现下拉的菜单,并且下拉菜单有hover效果


制作基础组件

先制作基础组件,选中元素添加组件,并添加一个悬停状态组件就制作好了。

7598DB67-9D55-40DE-BFB3-A33B3FBCDCA0.png

复制几个基础组件,修改一下文本内容。

选中所有内容并打组

DB656451-26DB-4880-BF60-79534327456E.png

选择右侧的垂直滚动,拖动蓝色手柄控制一下滚动区域

85BCB524-9C68-4FA9-B259-260F19A7A6A9.png

下拉菜单的滚动效果就制作好了。


制作外层嵌套组件

框选下拉菜单和输入框一起打组制作组件

1E54D6C5-521D-4770-BC90-9A82A4C3EF25.png

组件默认状态将下拉的内容透明度调整为0

2575E17A-F1D0-4B9A-8B6A-A3E327362C72.png

组件悬停状态,将下拉的内容透明度调整为100%

D761C61B-D6AA-4113-9FFC-073F4E2B1184.png

这样案例就制作好了,当鼠标上移至输入框时会自动弹出下拉的菜单

下拉的菜单可滚动且有hover状态


源文件下载:

链接: https://pan.baidu.com/s/182OD9DNo_x6inIWdrxZEcA 提取码: tihs

点击前往查看→查看视频教程



标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作