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 来完成所有这些工作。