H5改编是现在的主流技术，导航栏菜单是最常见的一种。今天，我们来学习它是如何利用HTML、CSS和JavaScript来构建响应式导航栏和汉堡菜单的。
这就是它的样子，是不是很熟悉呢？
这是它看起来的样子。熟悉吗？
H5导航菜单
好，我们从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的CSS类的，可以作为导航菜单的容器。给nav标签指定名为navbar的CSS类。具有nav-logo类的链接具有nav-menu类的ul在ul内部，我们有4个具有nav-item类的li在每个nav-item中，都有一个包含nav-link类的链接至于汉堡菜单，我已在代码中添加了一个具有hamburger类的div，且此div中有3个带bar类的span
这就是我们需要的HTML代码。
现在让我们添加CSS样式的重置代码。
(另外，我们会导入所需的字体，并添加一些基本的CSS来重置所有的默认样式。)
@import url(‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap’);* {***rgin: 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;***rgin: 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 {***rgin-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;}
完成后，它应该看起来像这样:
但是它没有响应性，所以我们还需要添加媒体查询css代码。
@media only screen and (***x-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 {***rgin: 2.5rem 0;}.hamburger {display: block;cursor: pointer;}}
这里的媒体查询是通过设置位置:固定；左:-100%；隐藏导航菜单。
另外，我们设置hamburger显示:block，所以现在可见。
我们还额外增加了一门课。在导航菜单上设置left:0；。现在，是时候添加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上添加了一个活动类，从而打开了移动菜单。当点击汉堡时，我们可以使用汉堡上的活动类来创建X动画。现在就开始做吧。
// 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”);}
函数的作用是:删除导航菜单和汉堡菜单中的活动类，从而关闭移动菜单。
H5导航菜单就是这种情况，用HTML、CSS、javascript实现了响应式导航栏菜单的构建。希望你喜欢并分享这篇文章。感谢大家的阅读。
本文来自柠萌先森ζ投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/650816.html
微信扫一扫 
