网页设计菜单栏导航实例 html5导航栏代码( 二 )

// Inside the Media Query..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类，从而关闭mobile menu 。
H5导航菜单就是这样，实现了用HTML ， CSS和javascript构建一个响应式的导航栏菜单。希望你喜欢并分享这篇文章。感谢大家的阅读。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：