Material Design是谷歌推出的一套界面设计语言，其提供的设计规范适合跨平台和多设备使用，所以在前端领域中得到了越来越广泛的应用。在这里，我们将讨论Material Design中的悬浮桥式菜单效果及其制作教程。
悬浮桥式菜单概述
悬浮桥式菜单是一种非常炫酷的交互设计，其具有以下特点：
- 只有一个按钮。当按钮被点击时，弹出多个菜单选项，让用户选择。
- 菜单选项以动画效果呈现，支持蒙层遮罩，突显当前窗口的重要性。
- 菜单选项呈现的方式非常漂亮、生动，通过合理的图形、颜色、排版元素等，让用户一眼看到所需要的选项。
官方给出了一个很好的表现示例图：
制作教程
制作一个悬浮桥式菜单需要以下几个步骤：
- 构建HTML结构，定义按钮和菜单选项。
- 使用CSS样式将HTML正确布局，并展示出动画效果。
- 使用JavaScript为按钮添加鼠标点击事件，并控制菜单选项的显示隐藏。
接下来，我们将逐步讲解这些步骤。
步骤1：HTML结构
首先，我们需要定义HTML中的结构。可以使用无序列表实现一组菜单，并将其包裹在一个容器中。
-- -------------------- ---- -------
---- -------------
------- --------------------------
--- ---------------------
------ --------------- ----------
------ --------------- ----------
------ --------------- ----------
------ --------------- ----------
-----
------注意，我们在列表选项中使用了HTML定义的链接标记。这是为了能够使整个菜单更加易于访问，并且具有链接交互的效果。
步骤2：使用CSS样式布局
接下来，我们需要使用CSS将HTML结构正确布局，并赋予它动画效果。
首先，我们准备所有按钮样式的CSS。包括主按钮和菜单里面的小按钮样式。并为菜单容器设置宽度、高度。
-- -------------------- ---- ------- ----- - --------- ------ ------- ----- ------ ----- ------ -------- ------- -------- -------- --- - ----- --------- - --------- --------- ------- -- ------ -- ------ -------- ------- -------- -------------- ----- - ----- ------------- - --------- --------- ------- -- ------ -- -------------- ------- ------------- ------- -------- -- ----------- ----- ----------- ------- - ----- ------------- -- - -------- ------ -------------- ----- ------------------- ------ -------------------------- --------- -------------------- --------- -------- -- - ----- ------------- --------------- - --------------- ----------------- - ----- ------------- --------------- - --------------- ----------------- - ----- ------------- --------------- - --------------- ----------------- - ----- ------------- --------------- - --------------- ----------------- - ----- ------------- - - -------- ------ ------ ------- ------- ------- -------------- ---- ---------- ------- ------------ ------- ------ ----- ----------------- -------- ---------------- ----- -
在上述代码中，我们设置了菜单容器为固定定位，正位置在浏览器的右下角。我们使用position属性定义了按钮和菜单选项的位置。为了使每个选项在显示时具有动画效果，我们还为每个选项定义了4种样式。
最后，我们需要声明一些CSS关键帧，为菜单选项的显示隐藏操作提供动画。
-- -------------------- ---- -------
---------- ---------------- -
-- -
---------- -------------------
-------- --
-
---- -
---------- --------------
-------- --
-
-
---------- ---------------- -
-- -
---------- ------------------ -------------------
-------- --
-
---- -
---------- --------------
-------- --
-
-
---------- ---------------- -
-- -
---------- ------------------ ---------------
-------- --
-
---- -
---------- ----------
-------- --
-
-
---------- ---------------- -
-- -
---------- ------------------- -------------------
-------- --
-
---- -
---------- --------------
-------- --
-
-在上述代码中，我们指定了每个菜单选项尝试从其初始位置移动到其他位置。其中，anime-menu-item-N中的N对应于菜单列表的每个项。
一旦CSS样式处理完毕，菜单就可以显示出来，并具有动画效果。
步骤3：JavaScript
最后一步是将已经设计好的HTML和CSS与JavaScript结合起来，使菜单能够具有一定的交互功能。
其中，我们需要为按钮添加点击事件，并切换菜单选项的显示和隐藏。下面是一个快捷的JavaScript代码示例：
-- -------------------- ---- ------- --- ---- - -------------------------------- --- ------- - ------------------------------------ --- ----------- - ---------------------------------------- --------------- - ----------- - -------------------- ----------------------------------- - ------------------- - ----------- - -------------------- - ---------------- - ---------- - ----------------------------------- -
在上述代码中，我们使用onclick事件为按钮（menuBtn）定义了点击事件。我们在点击事件上调用了防止事件冒泡的方法，并使用class属性的toggle方法来切换菜单的开放状态。我们还定义了一个在其他任何位置点击时，关闭菜单的方法。这样，点击页面上任何地方都可以关闭菜单。
总结
通过这个教程，我们了解了Material Design的悬浮桥式菜单效果及其制作教程。这个非常简单，但仍然令人敬畏的交互设计概念，可以使我们更好地向用户展示功能，并提高应用程序的用户体验。希望这个教程能够帮助你构建一个新的、炫酷的悬浮桥式菜单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f6852968c7c53b016e905