在现代 Web 应用中，悬浮按钮一直是非常流行的设计元素。使用 Material Design 的风格可以为你的应用程序增加一个现代化和直观的用户体验。在本篇文章中，我们将介绍如何使用 Material Design 实现悬浮按钮。
Material Design 悬浮按钮
Material Design 是谷歌开发的一种设计语言。面向移动设备和 Web 应用，它旨在提高用户体验，并且是现代化设计的一部分。
Material Design 悬浮按钮（Floating Action Button，简称 FAB）是其设计语言的重要组成部分之一。这样的一个悬浮按钮是圆形的，通常出现在屏幕的右下角，并且可以引导用户执行一个特定的操作。
Material Design 悬浮按钮提供了许多效果，例如水波纹动画、标签、菜单等。让我们看看如何使用 CSS 和 JavaScript 实现 Material Design 悬浮按钮吧。
实现 Material Design 悬浮按钮
使用 CSS 和 JavaScript 实现 Material Design 悬浮按钮需要一些基础的 HTML、CSS 和 JavaScript 知识。
HTML 结构
首先，让我们创建一个基础的 HTML 结构来放置我们的悬浮按钮以及追加的其他元素。
-- -------------------- ---- -------
---- ----------------------
------- ------------
-- ------------------------------
---------
--- ----------------
-------------- -----------------------------------------------------
-------------- ------------------------------------------------
-------------- -----------------------------------------------
-----
------在这个例子中，我们创建了一个包含一个悬浮按钮和选项列表的容器。悬浮按钮使用了“material-icons”图标字体，并且我们使用 <ul> 标签作为一个选项列表。每个选项被包装在 <li> 标签中，并且使用了一个简单的图标和按钮。
CSS 样式
现在，我们将使用 CSS 来设计我们的悬浮按钮和选项列表。
首先，让我们为容器设置样式。
.fab-container {
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
}我们将容器设置为绝对定位，位于屏幕的右下角。这里我们还使用了 Flex 布局，以便控制选项菜单列表的方向，并将其放置在悬浮按钮上方。
接下来，让我们为我们的按钮添加样式：
-- -------------------- ---- ------- ---- - ------ ----- ------- ----- ----------------- -------- -------------- ---- -------- ----- ---------------- ------- ------------ ------- ------ -------- ----------- --- --- --- ------- -- -- ----- ----------- --- ---- ------------ ------- -------- --------- --------- -------- -- -
我们将悬浮按钮设置为圆形，并用蓝色填充其背景。我们还添加了一个阴影效果，以及一些简单的过渡效果，以便鼠标悬停时提供反馈。我们还为此按钮使用了“cursor: pointer”样式，并将其设为相对定位，以便在需要时可以堆叠其他元素上。
最后，让我们为选项列表添加样式：
-- -------------------- ---- ------- -------- - ------- -- -------- -- ---------------- ----- --------- --------- ------- ----- ------ ------ ----------- ------- -------- -- ----------- --- ---- ------------ -------- -- - -------- -- - -------- --- ----- ------- -- ----------------- -------- ----------- --- --- --- ------- -- -- ----- -------------- ---- -------- ----- ------------ ------- ---------------- ----------- ------ ------ - -------- -- ------ - ----------------- ------------ ------ -------- ------- ----- ---------- ----- ------------- ----- -------- -- ------- -------- - -------- -- ------ - - ---------- ----- -
我们将选项列表设置为绝对定位，并将其放置在按钮下方。我们还将其隐藏，并使用一个过渡效果来使其渐变显示。
我们为每个选项添加了一个简单的背景颜色，并使用 Flex 布局来使其布局。我们还为每个按钮使用了“cursor: pointer”样式，并使用“i”标签嵌入了一个 Material Design 的图标。
JavaScript 实现
现在，让我们使用 JavaScript 来实现一个更动态和互动的 Material Design 悬浮按钮。
-- -------------------- ---- -------
--- --- - -------------------------------
--- ------- - -----------------------------------
----------------------------- ---------- -
-- ------------------------- --- ---------- -
-- ---- --- -------
------------------------ - ---------
--------------------- - --
- ---- -
-- ---- --- -------
------------------------ - ----------
--------------------- - --
-
---我们使用 JavaScript 获取悬浮按钮和选项列表的引用。我们然后为悬浮按钮添加一个点击事件。
在点击事件的回调函数中，我们检查选项列表的可见性。如果它已经是可见的，我们将其隐藏。否则，我们将其显示出来。
示例代码
最终，我们的整个 Material Design 悬浮按钮的代码如下：
-- -------------------- ---- -------
---- ----------------------
------- ------------
-- ------------------------------
---------
--- ----------------
-------------- -----------------------------------------------------
-------------- ------------------------------------------------
-------------- -----------------------------------------------
-----
-------- -------------------- ---- -------
-------------- -
--------- ------
------ -----
------- -----
-------- -----
--------------- -------
------------ ---------
-
---- -
------ -----
------- -----
----------------- --------
-------------- ----
-------- -----
---------------- -------
------------ -------
------ --------
----------- --- --- --- ------- -- -- -----
----------- --- ---- ------------
------- --------
--------- ---------
-------- --
-
-------- -
------- --
-------- --
---------------- -----
--------- ---------
------- -----
------ ------
----------- -------
-------- --
----------- --- ---- ------------
-------- --
-
-------- -- -
-------- --- -----
------- --
----------------- --------
----------- --- --- --- ------- -- -- -----
-------------- ----
-------- -----
------------ -------
---------------- -----------
------ ------
-
-------- -- ------ -
----------------- ------------
------ --------
------- -----
---------- -----
------------- -----
-------- --
------- --------
-
-------- -- ------ - -
---------- -----
-
--- --- - -------------------------------
--- ------- - -----------------------------------
----------------------------- ---------- -
-- ------------------------- --- ---------- -
-- ---- --- -------
------------------------ - ---------
--------------------- - --
- ---- -
-- ---- --- -------
------------------------ - ----------
--------------------- - --
-
---总结
现代 Web 应用程序设计需要考虑用户体验和交互性，使其外观适当，直观和现代化。Material Design 是现代设计方式之一，它可以实现漂亮的用户界面。在此篇文章中，我们学习了如何使用 Material Design 实现悬浮按钮，并且我们看到了使用 CSS 和 JavaScript 可以实现很多令人印象深刻的设计效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e49145f6b2d6eab3007e63