使用 CSS 构建自定义粘性导航栏

导航栏可能是让用户轻松浏览您的网站而不会迷路的最佳方式。

人们通常将导航栏放在页面的最顶部，但如果它与您的设计相得益彰，您也可以在网页的任一侧放置导航栏。导航栏可以是导航项目的水平列表，也可以是小屏幕上网页左上角或右上角的汉堡样式。

为了更好地访问导航栏，您可以使用几行 CSS 和 JavaScript 将它们粘贴在顶部。随着导航栏复杂性的增加，可能会堆积更多的 JavaScript 代码。

在这篇文章中，我们将看到如何创建一个自定义的粘性导航栏，它可以响应所有屏幕尺寸并具有强大的功能，只使用 CSS 来创建它。CAD看图王手机会员版App，支持看图、改图、批注、测量CAD图等功能！我们还将学习如何使用 SCSS 的语法糖更快、更简洁地编写我们的 CSS 代码。

那么，让我们开始吧。

使用 HTML 和 SCSS

我们将从一些简单的东西开始，随着本文的进展逐渐深入到更复杂的东西。我们可以做的第一件事是创建导航栏，编写一些 HTML。因此，首先将此 HTML 代码复制到您最喜欢的代码编辑器或 Codepen 中。

上面给出的 HTML 代码非常简单，其中没有任何复杂的内容。我希望您注意我用于为每个元素编写类名的约定。这种为 HTML 元素编写类名的小约定称为BEM，它代表 Block、Element-、Modifier。

我们为 HTML 代码中的每个包装器元素指定一个块名称。Mikutools在线工具箱(tools.miku.ac)，内置超多实用工具，还支持图片无损放大！在这种情况下，包装器是我们的. 您也可以将其描述为父元素。<header class="header">

包装器或父级中的每个子元素都有其父级的类名，后跟两个带有唯一标识符的下划线。您可能已经注意到，在我们的例子中，它是：

<导航类= “header__nav” ID = “导航栏” >

现在，我们可以像这样为包装器中的每个子元素指定一个类名。这里要注意的另一件事是header，即使它们是标题的子子项，我也以单词开头它们的类名。这样做是为了保持一致性，在编写 SCSS 代码时，它最终会对我们有很大帮助。我们稍后会看到这一点。

要继续，您可以在 SCSS 文件中复制以下给定的 SCSS 代码：

$color -蓝色: #00315c;
$color -紫色：#6f479f;
$颜色-黑色：#202020；
$color -灰色：#edebeb;
$颜色-白色：#fcfcfc；

html {字体-大小：62.5 %; 滚动行为：平滑；_ }


html ,
正文{宽度: 100 %; 边距：0px ；填充：0px ；溢出-x ：隐藏；_ }


body { font - family : "Montserrat" , sans - serif ; }


.header {height: 20vh;background-color: $color-gray;padding: 1.5rem;position: relative;
&__nav {display: flex;position: fixed;top: 0;left: 50%;transform: translateX(-50%);padding: 4rem 5rem;justify-content: space-around;align-items: center;z-index: 100;width: 100%;transition: 0.6s;}
&__list {list-style: none;display: flex;}
&__item {&:not(:last-child) {margin-right: 5rem;}}
&__link {font-size: 1.6rem;color: $color-blue;font-weight: 400;text-decoration: none;
&:hover {font-weight: 600;transition: all 0.3s;}}
}

注意，如果您在 Codepen 中跟随我，您可以在 CSS 窗口的设置菜单中选择SCSS选项。如果你在 VS Code 这样的编辑器中，你可以下载 SCSS 扩展；它会将您的 SCSS 代码编译成 CSS 代码，您可以将其包含在 HTML 文件中。

如果您熟悉 SCSS 并了解上述代码中发生的情况，请随意跳过接下来的几段。

前几行代码是颜色的变量，我们将在本教程中使用最多。NtPlayer电视盒子App，IOS版直播神器提供上千个全球频道，高清画质秒播放！您可以将这些变量设置为您喜欢的任何颜色，然后不必每次要使用颜色时都编写哈希值或 RGBA 值，而是编写变量名称。

我希望您注意的语法从第 24 行开始。我已经编写了用于启动标题元素的样式。但是，在同一个括号内，我还写了，它启动了我们的导航元素的样式。.header``&__nav

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

在 SCSS 中，您可以将嵌套元素的样式写在相同的括号中。此外，该&符号包含您的父标识符的值。在这种情况下，如果我们使用 ID 而不是类名，则意味着.header&#header

您还可以在第 61 行看到我是如何使用的，因为我想在我的链接元素上应用伪悬停类。因此，这使我们可以轻松编写嵌套样式并删除冗余代码。硬件狗狗纯净硬件检测工具，支持win11系统无广告无捆绑，专业电脑检测软件！如果您愿意，可以阅读有关 SCSS及其语法的更多信息。&:hover

您可能已经注意到，我们并没有花太多精力为大屏幕创建导航栏，因为根据良好的用户体验，它应该始终是屏幕顶部的水平列表。我们可以在大屏幕上添加汉堡菜单，但为了防止用户额外点击，汉堡菜单总是出现在小屏幕上，我们现在将这样做。

带有 CSS 的汉堡导航栏

现在，我们可以将注意力转移到仅使用 CSS 在小屏幕上创建自定义汉堡导航栏上。

让您了解我们正在构建的内容；在较小的屏幕上显示水平导航项目是不可行的。相反，我们将创建一个汉堡菜单，它将通过覆盖整个屏幕的背景来显示项目。

让我们从编写一些代码开始。在现有 HTML 代码中的第 10 行之后复制以下 HTML 代码。

 <div class = "navigation" > <input type = "checkbox" class = "navigation__checkbox" id = "navi-toggle" /> <label for = "navi-toggle" class = "navigation__button" > <span class = "navigation__icon " ></span> </label> <div class = "navigation__background" ></div> <nav class = "navigation__nav"> <ul类= “导航__列表” ><li class="navigation__item"><a href="index.html" class="navigation__link">Home</a></li><li class="navigation__item"><a href="about.html" class="navigation__link">About</a></li><li class="navigation__item"><a href="services.html" class="navigation__link">Services</a></li><li class="navigation__item"><a href="contact.html" class="navigation__link">Contact Us</a></li></ul></nav></div>

After copying the code, your HTML file should look something like this:

It is the only HTML code we need to make a hamburger menu that looks good on smaller screens. So, let me explain to you some key points in this newly added code:

我们添加了一个新<div>元素，并给它<div>一个类名navigation. 在 div 中，我们添加了一个复选框。此复选框将帮助我们确定何时显示导航项以及何时隐藏它们
在复选框之后，我们有一个标签，连同其中的一个元素，将充当典型的汉堡包图标
第三个元素是另一个<div>具有类名的元素navigation__background。此 div 将为我们的导航项目提供背景覆盖，以便在屏幕上清晰显示
最后一件事是列表中的导航项目。我们必须再次添加它们，因为之前的导航项是针对大屏幕的，而这些导航项是针对小屏幕的

注意，我使用相同的 BEM 命名约定为每个元素编写类名。

使用 CSS 设置导航栏的样式

现在，剩下的就是设计我们的导航栏了。因此，我们将编写大量 CSS 代码。我将尝试逐一解释我们编写的每个 CSS 块，以免引起任何混淆。

首先，我们将编写一些媒体查询，因为我们需要以一定的宽度显示汉堡菜单。对于媒体查询，我们将在 SCSS 中使用 mixins，它们本质上是函数。

来自 LogRocket 的更多精彩文章：

不要错过来自 LogRocket 的精选时事通讯The Replay
了解LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题
使用 React 的 useEffect优化应用程序的性能
在多个 Node 版本之间切换
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri，一个用于构建二进制文件的新框架
比较NestJS 与 Express.js

对于参数，您将传递要查看更改的断点。为方便起见，您可以给每个断点起一个自己的名称；例如，400px 可以命名为“phone”，因为这是手机的平均屏幕宽度。

调用后，您可以在大括号内编写 CSS 样式，这些样式将应用于该断点。让我们看看如何通过编写这些媒体查询来实现这一点。

媒体查询

复制 SCSS 文件顶部的以下代码，我们就可以使用这些媒体查询了。

@mixin响应( $breakpoint ) { @if $breakpoint == phone { @media only screen and ( max - width : 37.5em ) { @content ; } //600px } @if $breakpoint == s -百{ @media only screen and ( max - width : 43.75em ) { @content ; } //700像素} @if $breakpoint == tab - port { @media only screen and ( max - width : 56.25em ) { @content ; } //900px } @if $ breakpoint == tab -land { @media only screen and ( max - width : 75em ) { @content ; } //1200px } @if $breakpoint == big-桌面{ @media only screen and ( min - width : 112.5em ) { @content ; } //1800 } }

你得到这些媒体查询的语法了吗？我们创建了一个名为的 mixin respond，它接受 anybreakpoint作为参数，并在该媒体查询中应用这些样式。

汉堡包的造型

现在，我们可以根据这些媒体查询开始设置导航栏的样式。所以，让我们从复制这段代码开始：

. 导航{显示：无；@include响应（s - 100 ）{显示：块；} z-索引：2000 ；_ & __checkbox {显示：无；} }

在上面的代码中，我们将汉堡导航的显示设置为，none因为我们只想在较小的屏幕上可见。因此，我们使用我们的respondmixin 来实现该功能。

z-index 设置为是2000因为我们希望导航栏覆盖所有其他内容。我们将在本文后面看到它。

由于我们以 700px 显示我们的汉堡导航，因此我们可以删除以相同宽度显示的水平列表。为此，请在您的header__list样式中添加这个突出显示的小媒体查询：

＆__列表 {列表样式：无；显示：弯曲；@include 响应（s-hundred）{显示：无；}
}

添加这些代码块后，您的 SCSS 文件应如下所示：

屏幕尺寸超过 700 像素：

屏幕尺寸小于 700 像素的比较：

从现在开始，我们必须在样式块中添加所有代码块，因为一切都是嵌套的。.navigation

下一段代码块非常简单。这段代码将我们的导航按钮设置为透明和圆形。我们让它透明，因为它里面的导航图标元素将作为这个按钮的汉堡图标。

& __button {背景颜色：透明；_ 高度：7rem ；宽度：7rem ；顶部：6rem ；对：6rem ；边界-半径：50 %；z -指数：2000 ；盒子-阴影：0 1rem 3rem rgba （$color - black ，0.1          ); 文本对齐：居中；_ 光标：指针；}

现在，我们将为我们的汉堡图标设置样式。我们将使用before和after伪类。最后，我们将使用伪类在我们的图标上添加一点悬停效果。position: absolute``hover

& __icon {位置：相对；边距-左：2rem ；&, &:: before , &:: after { width : 4rem ; 高度：3px ；背景-颜色：$颜色-黑色；显示：内联块；} &::之前，&::之后{ 内容：'' ；位置：绝对；左：0 ；过渡：全部0.2s ；} &::前{顶部: - 0.65rem ; } &::在{顶部: 0.65rem ; } } & __button :悬停& __icon :: before { top : - 1rem ;  } & __button :悬停& __icon :: after { top : 1rem ; }

此时，我们的汉堡菜单图标应该出现在屏幕上，如下图所示：

现在，在按钮按下（或检查）时，我们希望我们的汉堡图标转换为 X关闭图标，以指示我们的导航栏现在可见，并且进一步按下它将关闭我们的导航栏。

为此，请复制下面给定的代码，我们会很好地使用我们的图标。

& __checkbox :勾选+ & __button & __icon {背景色:透明; _ } & __checkbox :选中+ & __button & __icon :: before { top : 0 ; 变换：旋转（135度）；背景-颜色：$颜色-白色；} & __复选框  :勾选+ & __button & __icon ::在{ top : 0 ; 变换：旋转（- 135deg ）；背景-颜色：$颜色-白色；}

在上面的代码块中，我们使用了元素checked上的伪类checkbox
我们也在使用+CSS 选择器。CSS选择器+帮助我们选择紧跟在指定元素之后的元素
最后，我们旋转图标的before和after伪元素，使其看起来像X

我们将通过添加我们的背景覆盖继续前进。我们的背景背后的逻辑很简单；我们将在按钮上添加背景颜色，最初它是不可见的，因为它的 z-index 将位于复选框按钮的后面。

一旦我们点击复选框，我们将缩放背景以覆盖整个屏幕，并且我们的导航项变得可见。

复制下面的代码来实现这一点。

& __background {背景:径向-渐变( rgba ( $color - blue , 1 ), rgba ( $color - Purple , 1 ) ); 高度：6rem ；宽度：6rem ；位置：固定；顶部：- 1rem ；对：0rem ；z -索引：  - 1000 ；显示：无；边界-半径：50rem ；} & __checkbox :选中~ & __background { @include响应( s -百) {显示:块; 变换：比例（80 ）；} }

应用背景覆盖后，导航栏应如下所示：

剩下的最后一件事是设置导航项的样式。对于上下文，导航项应该只在我们单击汉堡图标时出现。它将覆盖整个屏幕，以在较小的屏幕上提供积极的用户体验。

最后，一旦我们再次单击该图标，它就会消失。一些基本的样式逻辑已进入此代码块，这与我们在本教程的其余部分中所做的非常相似。

& __nav {位置：固定；边距-顶部：1rem ；填充：1.2rem ；字体大小：1.5rem ；_ 字体-粗细：400 ；z -指数：1500 ；@include响应（电话）{填充：0 ；} }      & __list {列表样式：无；_ 不透明度：0 ；可见性：隐藏；保证金-最高：50 %；}  & __item { &: not (: last - child ) { margin - bottom : 1.5rem ; } }&__link {text-decoration: none;color: $color-white;&:hover {color: $color-blue;}}&__checkbox:checked ~ &__nav &__list {opacity: 1;visibility: visible;transition: all 0.5s;}&__checkbox:checked ~ &__nav {@include respond(s-hundred) {font-size: 4rem;position: absolute;top: 32rem;left: 50%;transform: translate(-50%, -50%);}}& __checkbox :选中~ & __nav & __link { @include响应( s -百) { color : $color - white ; } }

最后，我们的自定义粘性导航栏在较小的屏幕上应该是这样的：

您可以根据需要设置导航栏或其项目的样式。我在中间有X关闭符号，但它通常位于右上角。你可以自由地做你认为合适的其余造型。

最后，如果你想在滚动的导航栏上添加一些小动画，你可以在你的样式块中添加这个小块的 CSS 代码header：

& __sticky {填充: 5rem 10rem ; 背景-颜色：$颜色-灰色；框-阴影：0px 3px 5px rgba （$color - blue ，0.5 ）；}

另外，不要忘记添加以下 JavaScript 代码：

常量导航栏=文档。getElementById ( '导航栏' );
窗口。addEventListener ( 'scroll' , () => { navBar . classList . toggle ( ' header__sticky ' , window .scrollY > 0 ); });

CSS 现在为我们提供的工具和技术足以在不使用 JavaScript 的情况下构建超酷的东西，比如我们的导航栏。此演示的完整代码可在 Codepen 中找到。

结论

你可以只用 CSS 做很多事情。如果您看到有关自定义导航栏的教程或任何其他花哨的东西，您必须下载一些库或编写一些 JavaScript 代码，然后首先考虑其他替代方案，因为 JavaScript 不是唯一的方法！

尝试理解 CSS 的各种概念，也许您将能够仅使用 CSS 来完成所有这些工作。