大家好！在本教程中，我们将使用 html，css 和一些 javascript 构建响应式导航栏和面包屑菜单。
在线演示地址：http://haiyong.site/hamburger
这就是它的样子，
因此，让我们从 HTML 开始，
<header class="header"> <nav class="navbar"> <a href="#" class="nav-logo">WebDev.</a> <ul class="nav-menu"> <li class="nav-item"> <a href="#" class="nav-link">Services</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Blog</a> </li> <li class="nav-item"> <a href="#" class="nav-link">About</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Contact</a> </li> </ul> <div class="hamburger"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div> </nav></header>
复制代码
在这里，我们有
header 与 header 的 class 作为我们的导航栏的容器一起工作
nav 与之 navbar 的 class
一个链接带有 nav-logo 的 class
ul 与 nav-menu 的 class
ul 里面有 4 个 li 与 nav-item 的 class
在每个 nav-item 内部，我们都有一个 nav-link 的 class
对于我们的面包，我在 div 中添加了一个 hamburger 的 class，在其中添加了类别中的 3 个 span 并加了 bar 的 class
这就是我们需要的 HTML
现在让我们添加 CSS
（在这里，我们将导入所需的字体，并添加一些基本的 CSS 来重置所有默认样式。
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box;}
html { font-size: 62.5%; font-family: 'Roboto', sans-serif;}
li { list-style: none;}
a { text-decoration: none;}
复制代码
现在让我们一一添加样式到元素，
.header{ border-bottom: 1px solid #E2E8F0;}
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem;}
复制代码
.hamburger { display: none;}
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #101010;}
复制代码
.nav-menu { display: flex; justify-content: space-between; align-items: center;}
.nav-item { margin-left: 5rem;}
.nav-link{ font-size: 1.6rem; font-weight: 400; color: #475569;}
.nav-link:hover{ color: #482ff7;}
.nav-logo { font-size: 2.1rem; font-weight: 500; color: #482ff7;}
复制代码
之后，看起来应该像这样
但是它还没有响应式，所以让我们添加媒体查询。
@media only screen and (max-width: 768px) { .nav-menu { position: fixed; left: -100%; top: 5rem; flex-direction: column; background-color: #fff; width: 100%; border-radius: 10px; text-align: center; transition: 0.3s; box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); }
.nav-menu.active { left: 0; }
.nav-item { margin: 2.5rem 0; }
.hamburger { display: block; cursor: pointer; }
}
复制代码
该媒体查询的作用是nav-menu通过对其进行设置position: fixed; left: -100%;来隐藏我们的内容。此外，我们将设置 hamburger 为display: block;因此现在可见。我们还增加了一个额外的类是.nav-menu.active用于设置left: 0;在nav-menu上。现在，我们将需要添加 javascript，当我们单击汉堡包时，它将在导航菜单上添加此类。
让我们添加 javascript
const hamburger = document.querySelector(".hamburger");const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", mobileMenu);
function mobileMenu() { hamburger.classList.toggle("active"); navMenu.classList.toggle("active");}
复制代码
在这里，该函数mobileMenu()在我们hamburger和我们的nav-menu添加了一个 active 类，该类nav-menu使我们的移动菜单打开。单击时，我们可以使用汉堡包上的活动类来创建该 X 动画 hamburger。所以现在就开始做。
// 在媒体查询中
.hamburger.active .bar:nth-child(2) { opacity: 0; }
.hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
复制代码
现在看起来应该像这样
但是有一个问题，当我们单击链接时，汉堡菜单不会关闭。现在让我们添加一下
const navLink = document.querySelectorAll(".nav-link");
navLink.forEach(n => n.addEventListener("click", closeMenu));
function closeMenu() { hamburger.classList.remove("active"); navMenu.classList.remove("active");}
复制代码
该closeMenu()函数从nav-menu和hamburger中都移除了该 active 类，从而使我们的移动菜单关闭。
就这样，我们用 HTML CSS 和 javascript 构建了一个响应式导航栏和汉堡菜单。希望你喜欢它😀
🛬 wuhu ! 起飞 !
希望你在本教程中了解我是如何使用 HTML、CSS 和 JavaScript 制作这个响应式导航栏的。你在下面的网页中 F12 获取源代码，或者关注公众号【海拥】回复【响应式导航栏】。
http://haiyong.site/hamburger
我已经写了很长一段时间的技术博客，这是我的一篇技术文章/教程，希望你们会喜欢！我之前使用 HTML、CSS 和 JavaScript 制作了更多类型的小工具，如果你愿意，可以查看这些设计。基于 HTML、CSS、JS 的小游戏 / 工具制作过程及完整源码
💌 欢迎大家在评论区提出意见和建议！💌
如果你真的从这篇文章中学到了一些新东西，喜欢它，收藏它并与你的小伙伴分享。🤗最后，不要忘了❤或📑支持一下哦。
评论