網頁設計菜單欄導航實例「html5導航欄代碼」

H5自適應是現在主流的技術，導航欄菜單是最常見的一種，今天我們一起來學習一下它是如何使用HTML，CSS和JavaScript來構建響應式導航欄和漢堡菜單的。

這就是它的樣子，是不是很熟悉呢？用HTML、CSS 和 JS 構建一個響應式導航欄菜單-教程

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』);

* {
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和navbar：

.header{
border-bottom: 1px solid #E2E8F0;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
}

hamburger樣式：

.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;
}

完成這些之後，看起來應該是這樣的：

但是它不是響應式的，所以我們還需要添加媒體查詢css代碼。

@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;
}

}

這裡媒體查詢就是通過設置position: fixed; left: -100%;來隱藏nav-menu。

此外，我們將hamburger設置為display: block;，所以現在可見。

我們還添加了一個額外的類.nav-menu.active，它在nav-menu上設置left: 0;。現在，到了添加javascript的時候了，以便在我們單擊漢堡菜單時，會在nav-menu上添加此active類。

添加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類，從而打開mobile menu。單擊hamburger時，我們可以使用hamburger上的active類來創建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」);
}

closeMenu()函數從nav-menu和hamburger中刪除active類，從而關閉mobile menu。