加入官方微信群

使用微信扫描二维码
或搜索 weweloo 添加微信好友

返回
MooKwai特色块导航面板

导航面板

导航面板(Navigation)通过点击导航面板中的切换按钮,切换面板内容的显示与隐藏。常用于创建响应式网站导航,可根据视窗宽度自动进行响应适配。

文章目录

区块

导航面板区块可用于文章编辑器与全站编辑器,可插入任何区块内或页面的任何位置。导航面板区块内可插入任何其他类型的区块作为面板内容显示。

内容设置

导航面板区块内容包含两个部分,分别是面板内容与切换按钮内容

面板内容

面板内容通过向主区块插入其他内部区块进行配置,可插入任何类型区块。

切换按钮

切换按钮内容通过配置选项进行配置。

配置选项

全局样式

Select 选择区块对应的全局样式。

切换按钮

切换按钮

Select 设置切换按钮的显示类型。

文字(打开)

String 切换按钮(未打开状态)所显示的文本。

文字(关闭)

String 切换按钮(已打开状态)所显示的文本。

图标(打开)

Select 切换按钮(未打开状态)所显示的图标。

图标(关闭)

Select 切换按钮(已打开状态)所显示的图标。

交互设置

动画

Select 打开面板执行的动画类型。

移动方向

Select 面板动画移动到的方向。

持续时长

Number 面板动画的持续时间,单位为秒。0 ~ 100 之间的任意数值,整数或浮点数。

延时

Number 面板动画播放前的延迟时间,单位为秒。0 ~ 100 之间的任意数值,整数或浮点数。

动画曲线

Select 面板动画的加速度曲线。

自定义曲线

String 自定义曲线函数,为 GSAP 动画曲线,设置方式可参考 GSAP Eases Docs

设备

Select 选择启用的设备。

元素

<nav class="mk-navigation">
  <div class="el-panel"><div class="panel-wrap">...内部区块</div></div>
  <div class="el-toggle"><div class="toggle-wrap">...内容</div></div>
</nav>
  • 主容器 .mk-navigation
  • 面板 .el-panel
  • 切换按钮 .el-toggle

其他

使用微信扫描二维码
或搜索 weweloo 添加微信好友

加微信
进群聊聊(๑•̀ㅂ•́) ✧