纯 CSS 中的简单响应式汉堡菜单

落日映苍穹つ 2023-10-01 20:58 20阅读 0赞

欢迎阅读有关如何创建简单的响应式纯 CSS 汉堡菜单的教程。是的，互联网上有很多其他的汉堡菜单，但其中一些仍然需要使用 Javascript。所以这里是一个纯 CSS 驱动的菜单，而不是一行 Javascript。继续阅读以了解如何构建一个！

ⓘ 我在本教程开始时包含了一个包含所有源代码的 zip 文件，因此您不必复制粘贴所有内容……或者如果您只是想直接进入。

### 下载和演示 ###

首先，这是承诺的示例代码的下载链接。

#### 示例代码下载 ####

[单击此处下载][Link 1]源代码，我已在 MIT 许可下发布它，因此请随意在其上构建或在您自己的项目中使用它。

#### 汉堡菜单演示 ####

前进。调整窗口大小并查看正在运行的汉堡菜单。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_18_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

### 如何制作汉堡菜单 ###

在现代 CSS 的帮助下，如今构建汉堡菜单实际上并不难……

#### 第 1 步）HTML ####

index.html

<nav id="hamnav">
      
      <label for="hamburger">☰</label>
      <input type="checkbox" id="hamburger"/>
     
      
      <div id="hamitems">
        <a href="a.html">First</a>
        <a href="b.html">Second</a>
        <a href="c.html">Third</a>
        <a href="d.html">Forth</a>
      </div>
    </nav>

HTML 部分应该非常简单：

1.  首先，我们为导航菜单创建包装器`<nav id="hamnav">`。
2.  随后使用`<label for="hamburger">`和`<input type="checkbox" id="hamburger"/>`作为汉堡包按钮。对于新手来说，这`☰`就是“3 行汉堡图标”的 HTML 符号。
3.  最后，我们将菜单项夹`<a>`在 `<div id="hamitems">`包装器中。

就是这样，涉及零 Javascript。

#### 步骤 2) 大屏幕的 CSS ####

ham-menu.css

/* [ON BIG SCREEN] */
    /* (A) WRAPPER */
    #hamnav {
      width: 100%;
      background: #000;
    }
    
    /* (B) HORIZONTAL MENU ITEMS */
    #hamitems { display: flex; }
    #hamitems a {
      flex-grow: 1;
      flex-basis: 0;
      padding: 10px;
      color: white;
      text-decoration: none;
      text-align: center;
    }
    #hamitems a:hover { background: #af0d0d; }
    
    /* (C) HIDE HAMBURGER */
    #hamnav label, #hamburger { display: none; }

CSS 是所有魔法发生的地方。这可能看起来有点复杂，但让我们一步一步来。从如何在大屏幕上显示“普通菜单栏”开始：

1.  不言自明的全宽导航菜单。
2.  接下来，我们设置`#hamitems`为`display: flex`。将`flex-grow: 1`和添加`flex-basis: 0`到菜单项将自动将它们平均间隔开。
3.  由于我们不需要大屏幕上的汉堡图标，我们通过附加`display: none`到`#hamnav label`和来隐藏它`#hamburger`。

这实际上是大屏幕上所有重要的机制，我们现在有了一个可以工作的水平导航栏。

#### 步骤 3) 小屏幕的响应式 CSS ####

ham-menu.css

/* [ON SMALL SCREENS] */
    @media screen and (max-width: 768px){
      /* (A) BREAK INTO VERTICAL MENU */
      #hamitems a {
        box-sizing: border-box;
        display: block;
        width: 100%;
        border-top: 1px solid #333;
      }
     
      /* (B) SHOW HAMBURGER ICON */
      #hamnav label { 
        display: inline-block; 
        color: white;
        background: #a02620;
        font-style: normal;
        font-size: 1.2em;
        padding: 10px;
      }
    
      /* (C) TOGGLE SHOW/HIDE MENU */
      #hamitems { display: none; }
      #hamnav input:checked ~ #hamitems { display: block; }
    }

最后，我们在小屏幕上添加一些样式更改来实现响应式魔法：

1.  通过添加将水平菜单转换为垂直菜单`#hamitems a { width: 100% }`
2.  用 显示汉堡包图标`#hamnav label { display: inline-block }`。
    
     *  请特别注意——我们只展示了汉堡包`label`，`checkbox`其余部分被隐藏了。
     *  当用户点击`label`.
3.  有点令人困惑，但这就是魔法发生的地方。
    
     *  默认情况下，`#hamitems { display: none; }`将隐藏菜单项。
     *  `#hamnav input:checked ~ #hamitems { display: block; }``checkbox`用简单的英语 -选中 隐藏时显示菜单项。

### 有用的信息和链接 ###

代码就是这样，这里有一些你可能会觉得有用的额外内容。

#### 粘性菜单栏 ####

当用户在您的网站上向下滚动时，是否希望菜单栏永久固定在屏幕顶部？只需将 a 添加`position: sticky`到导航栏，就可以了。

主题.css

#hamnav {
      position: sticky;
      top: 0;
    }

但这可能会在小屏幕上引起更多问题，因此请明智地使用它。

#### 更大的汉堡？ ####

汉堡包图标是一个 HTML 符号。是的，更改大小就像设置一样简单`label[for="hamburger"] { font-size: XX em }`。

#### 我想要下拉项目！ ####

这将不再“简单”，但请随时挑战自己……

*  [使用纯 CSS 的下拉菜单][CSS]\- Code Boxx
 *  多级下拉菜单？这更像是一个[树形菜单][Link 2]\- Code Boxx

#### 兼容性检查 ####

*  [CSS Flexbox][] – CanIUse
 *  [CSS 兄弟选择器][CSS 1]\- CanIUse

这个汉堡菜单适用于所有现代浏览器。

####  ####

### 结束 ###

感谢您的阅读，本教程到此结束。我希望它可以帮助您为您的项目创建更好的菜单系统，如果您对本指南有任何补充，请随时在下面发表评论。祝你好运，编码愉快！

[Link 1]: https://code-boxx.com/wp-content/uploads/2021/12/css-ham-menu.zip
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/08a36adf8eb94311a2a1359db49c9a56.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6189c2d6fbde4084977c720e23b7e6a4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[CSS]: https://code-boxx.com/simple-css-drop-down-menu/
[Link 2]: https://code-boxx.com/css-collapsible-tree-menu/
[CSS Flexbox]: https://caniuse.com/flexbox
[CSS 1]: https://caniuse.com/mdn-css_selectors_general_sibling