【原】使用HTML，CSS和Javascript構建響應式導航欄和面包屑菜單

海擁 2022-11-13 發(fā)布于安徽

展開全文

全世界只有不到1 % 的人關注了

啦啦啦好想biu點什么

- 2021.05.01-

大家好,！在本教程中,，我們將使用html，css和一些javascript構建響應式導航欄和面包屑菜單,。

這就是它的樣子，

因此,，讓我們從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 和 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;
}

之后,，看起來應該像這樣

但是它還沒有響應式,，所以讓我們添加媒體查詢。

@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上?，F在,，我們將需要添加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使我們的移動菜單打開,。單擊時，我們可以使用漢堡包上的活動類來創(chuàng)建該X動畫hamburger,。所以現在就開始做,。

// 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);
    }

現在看起來應該像這樣

但是有一個問題，當我們單擊鏈接時,，漢堡菜單不會關閉?，F在讓我們添加一下

const navLink = document.querySelectorAll(".nav-link");

navLink.forEach(n => n.addEventListener("click", closeMenu));

function closeMenu() {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
}