创建浮动图标菜单

在今天的帖子中，我想演示为您的 Web 项目创建基于图标的浮动导航菜单是多么容易。

视频教程

如果您更喜欢视频形式的本教程，请在我的 YouTube 频道dcode上查看：

步骤1：选择图标库

如果您已经在项目中使用了图标库，请跳过此步骤。如果您还没有使用图标库，我推荐使用Google Material Icons之类的工具，因为它们的设置和使用都非常方便。

您可以通过将该库包含在以下内容中来开始使用该库<head>：



<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

步骤 2：添加 HTML

我们将使用<nav>带有类的元素.nav来表示菜单。在其中，我们可以指定图标链接：



<nav class="nav">
    <a href="#" class="nav__link">
        <i class="material-icons nav__icon">dashboard</i>
        <span class="nav__text">Dashboard</span>
    </a>
    <!-- ... and more links below -->
</nav>

我们可以看到，对于我们使用的每个链接<a class="nav__link">，以及其中的内容，我们有以下元素：

<i class="material-icons nav__icon">[icon_name]</i>- 这是为了显示您选择的图标。在本例中，我选择使用图标。您可以在这里dashboard找到更多图标。
<span class="nav__text">- 这个很容易解释，我们只是选择在图标下显示哪些文本。

添加 HTML 之后，您应该得到如下内容：

步骤3：添加CSS

这里是所有事情的开始 - 我们将使用 CSS 将菜单定位在页面底部，并浮动在其他所有内容之上。

菜单样式

使用position: fixed将确保菜单浮动在页面上的所有其他内容之上，并使用bottom: 0将菜单移动到底部：



body {
    margin: 0 0 55px 0;
}

.nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    display: flex;
    overflow-x: auto;
}

我们display: flex在这里使用它，以便我们可以在下一步中轻松地布置单个图标链接，并且overflow-x: auto允许用户在较小宽度的设备上出现太多图标的情况下左右滚动。

您可能还注意到了margin-<body>它被设置为55px位于底部，与菜单设置的高度相同，并确保现有的正文内容都不会隐藏在其下方。

图标链接的样式

这肯定是本教程中最大的规则集，所以让我们编写 CSS，然后分别介绍其中重要的规则：



.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    font-family: sans-serif;
    font-size: 13px;
    color: #444444;
    text-decoration: none;
}

.nav__link:hover {
    background-color: #eeeeee;
}

让我们看一下重要的属性：

display: flex- 允许我们将图标和标签对齐在中心，并与和配合align-items: center;使用justify-content: centre
flex-grow: 1- 确保每个图标尽量占据相同的宽度
flex-direction: column- 确保图标和标签位于彼此之上，而不是并排
white-space: nowrap- 确保标签不会流入新行

您现在应该看到类似这样的内容：

最后一步——“活动”链接

通过此解决方案，我们还可以将链接表示为“活动视图/页面”或类似名称。让我们在 CSS 中添加一个修饰符类：



.nav__link--active {
    color: #009579;
}

然后，我们可以将其添加到 HTML 中的一个链接中：



<a href="/profile" class="nav__link nav__link--active">

这给了我们类似这样的结果：

就这样！如果有人有任何问题或建议，请在下方留言😁

鏂囩珷鏉ユ簮锛�https://dev.to/dcodeyt/creating-a-floating-icon-menu-2kb7