欢迎阅读有关如何创建简单的响应式纯 CSS 汉堡菜单的教程。是的,互联网上有很多其他的汉堡菜单,但其中一些仍然需要使用 Javascript。所以这里是一个纯 CSS 驱动的菜单,而不是一行 Javascript。继续阅读以了解如何构建一个!
ⓘ 我在本教程开始时包含了一个包含所有源代码的 zip 文件,因此您不必复制粘贴所有内容……或者如果您只是想直接进入。
下载和演示
首先,这是承诺的示例代码的下载链接。
示例代码下载
单击此处下载源代码,我已在 MIT 许可下发布它,因此请随意在其上构建或在您自己的项目中使用它。
汉堡菜单演示
前进。调整窗口大小并查看正在运行的汉堡菜单。
如何制作汉堡菜单
在现代 CSS 的帮助下,如今构建汉堡菜单实际上并不难……
第 1 步)HTML
index.html<!-- (A) MENU WRAPPER -->
<nav id="hamnav">
<!-- (B) THE HAMBURGER -->
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger"/>
<!-- (C) MENU ITEMS -->
<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 部分应该非常简单:
- 首先,我们为导航菜单创建包装器
<nav id="hamnav">
。 - 随后使用
<label for="hamburger">
和<input type="checkbox" id="hamburger"/>
作为汉堡包按钮。对于新手来说,这☰
就是“3 行汉堡图标”的 HTML 符号。 - 最后,我们将菜单项夹
<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 是所有魔法发生的地方。这可能看起来有点复杂,但让我们一步一步来。从如何在大屏幕上显示“普通菜单栏”开始:
- 不言自明的全宽导航菜单。
- 接下来,我们设置
#hamitems
为display: flex
。将flex-grow: 1
和添加flex-basis: 0
到菜单项将自动将它们平均间隔开。 - 由于我们不需要大屏幕上的汉堡图标,我们通过附加
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; }
}
最后,我们在小屏幕上添加一些样式更改来实现响应式魔法:
- 通过添加将水平菜单转换为垂直菜单
#hamitems a { width: 100% }
- 用 显示汉堡包图标
#hamnav label { display: inline-block }
。- 请特别注意——我们只展示了汉堡包
label
,checkbox
其余部分被隐藏了。 - 当用户点击
label
.
- 请特别注意——我们只展示了汉堡包
- 有点令人困惑,但这就是魔法发生的地方。
- 默认情况下,
#hamitems { display: none; }
将隐藏菜单项。 #hamnav input:checked ~ #hamitems { display: block; }
checkbox
用简单的英语 -选中 隐藏时显示菜单项。
- 默认情况下,
有用的信息和链接
代码就是这样,这里有一些你可能会觉得有用的额外内容。
粘性菜单栏
当用户在您的网站上向下滚动时,是否希望菜单栏永久固定在屏幕顶部?只需将 a 添加position: sticky
到导航栏,就可以了。
#hamnav {
position: sticky;
top: 0;
}
但这可能会在小屏幕上引起更多问题,因此请明智地使用它。
更大的汉堡?
汉堡包图标是一个 HTML 符号。是的,更改大小就像设置一样简单label[for="hamburger"] { font-size: XX em }
。
我想要下拉项目!
这将不再“简单”,但请随时挑战自己……
- 使用纯 CSS 的下拉菜单- Code Boxx
- 多级下拉菜单?这更像是一个树形菜单- Code Boxx
兼容性检查
- CSS Flexbox – CanIUse
- CSS 兄弟选择器- CanIUse
这个汉堡菜单适用于所有现代浏览器。
结束
感谢您的阅读,本教程到此结束。我希望它可以帮助您为您的项目创建更好的菜单系统,如果您对本指南有任何补充,请随时在下面发表评论。祝你好运,编码愉快!
更多推荐
纯 CSS 中的简单响应式汉堡菜单
发布评论