使用 CSS 构建自定义粘性导航栏
导航栏可能是让用户轻松浏览您的网站而不会迷路的最佳方式。
人们通常将导航栏放在页面的最顶部，但如果它与您的设计相得益彰，您也可以在网页的任一侧放置导航栏。导航栏可以是导航项目的水平列表，也可以是小屏幕上网页左上角或右上角的汉堡样式。
为了更好地访问导航栏，您可以使用几行 CSS 和 JavaScript 将它们粘贴在顶部。随着导航栏复杂性的增加，可能会堆积更多的 JavaScript 代码。
在这篇文章中，我们将看到如何创建一个自定义的粘性导航栏，它可以响应所有屏幕尺寸并具有强大的功能，只使用 CSS 来创建它。CAD看图王手机会员版App，支持看图、改图、批注、测量CAD图等功能！我们还将学习如何使用 SCSS 的语法糖更快、更简洁地编写我们的 CSS 代码。
那么，让我们开始吧。
目录
-
使用 HTML 和 SCSS
-
带有 CSS 的汉堡导航栏
-
使用 CSS 设置导航栏的样式
-
媒体查询
-
汉堡包的造型
使用 HTML 和 SCSS
我们将从一些简单的东西开始，随着本文的进展逐渐深入到更复杂的东西。我们可以做的第一件事是创建导航栏，编写一些 HTML。因此，首先将此 HTML 代码复制到您最喜欢的代码编辑器或 Codepen 中。
上面给出的 HTML 代码非常简单，其中没有任何复杂的内容。我希望您注意我用于为每个元素编写类名的约定。这种为 HTML 元素编写类名的小约定称为BEM，它代表 Block、Element-、Modifier。
我们为 HTML 代码中的每个包装器元素指定一个块名称。Mikutools在线工具箱(tools.miku.ac)，内置超多实用工具，还支持图片无损放大！在这种情况下，包装器是我们的. 您也可以将其描述为父元素。
包装器或父级中的每个子元素都有其父级的类名，后跟两个带有唯一标识符的下划线。您可能已经注意到，在我们的例子中，它是：
<导航类= “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 代码。
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:
-
我们添加了一个新
元素，并给它一个类名navigation. 在 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 来完成所有这些工作。