使用 ReactJS 建立響應式導航欄

Web 開發通常側重於導航欄，它是使用者互動的主要方式 - 因此，設計一個良好的導航欄設計是一個重要的元素。歡迎回到另一個部落格教程 - 今天我們將使用 ReactJS 構建一個既響應式又視覺上吸引人的導航欄。為了建立一個專業且使用者友好的 Web 應用程式，您必須擁有一個吸引人的導航欄。我們將從一個簡單的 React 專案開始，然後使用預先設計的樣式構建一個響應式導航欄，使其更美觀。

先決條件

  • React 基礎: 您必須瞭解有關 React 元件、狀態管理和 Hook 的基礎知識。如果您以前從未使用過 React，則需要先閱讀文件以瞭解其實際作用，然後找到一個初學者課程。
  • Node.js 和 npm: Node 版本 6 或更高版本，以及 NPM（js 社群的包管理器），用於構建基於 Web 的前端應用程式，例如使用 Webpack 的 Angular JS 應用程式。但是，如果您已經擁有一個 node，那就很好。js 和 npm（節點包管理器）到您的機器中。我們可以透過 npm install 下載這些。js 網站。
  • 程式碼編輯器：您可以使用任何您熟悉的程式碼編輯器來編寫和處理此 React 程式碼。
  • React 應用程式設定: 您應該擁有一個預配置的 React 應用程式。如果您沒有，則只需一行命令即可使用 Create React App 建立。

建立響應式導航欄的步驟

下面提到的指南為您提供了建立自己的響應式導航欄的分步過程。

步驟 1：設定您的 React 環境

在進入主要程式碼之前，您需要準備好您的 React 環境。如果您沒有 React 應用程式，則可以使用 **'create-react-app'** 命令建立一個。轉到您要建立 React 應用程式的資料夾，開啟終端/命令提示符，然後鍵入以下命令。此命令在此處構建 React 應用程式。

npx create-react-app responsive-navbar
cd responsive-navbar

注意：您可以將 'responsive-navbar' 替換為您自己的首選專案名稱（遵循專案命名約定）。

步驟 2：建立響應式導航欄元件

在 **'src'** 資料夾內，建立一個名為 **'Navbar.js'** 的新檔案。

import React, { useState, useEffect } from "react";
import "./Navbar.css";

const Navbar = () => {
  const [isMobile, setIsMobile] = useState(false);
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
      if (window.innerWidth > 768) {
        setIsMobile(false); // Close mobile menu when switching to a larger screen
      }
    };

    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return (
    <nav className="navbar">
        <div className="navbar-container">
            <h3 className="logo">BrandName</h3>
            <ul className={isMobile ? "nav-links-mobile" : "nav-links"}>
                <li>
                    <a href="#home" className="nav-link">
                        Home
                    </a>
                </li>
                <li>
                    <a href="#about" className="nav-link">
                        About
                    </a>
                </li>
                <li>
                    <a href="#services" className="nav-link">
                        Services
                    </a>
                </li>
                <li>
                    <a href="#portfolio" className="nav-link">
                        Portfolio
                    </a>
                </li>
                <li>
                    <a href="#contact" className="nav-link">
                        Contact
                    </a>
                </li>
            </ul>
            <div
                className="mobile-menu-icon"
                onClick={() => setIsMobile(!isMobile)}
            >
                <div className={`hamburger ${isMobile ? "active" : ""}`}>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
    </nav>
  );
};

export default Navbar;

方法和解釋

  • isMobile：此狀態變數確定移動選單（漢堡選單）是開啟還是關閉。
  • windowWidth：此狀態跟蹤瀏覽器視窗的當前寬度。每當視窗大小調整時，它都會更新。
  • useEffect Hook: useEffect Hook 用於新增一個事件監聽器來跟蹤視窗大小的變化。這確保了當視窗大小調整時（例如，從移動檢視轉換為桌面檢視時），如果螢幕寬度超過 768px，則移動選單會自動關閉。這避免了在螢幕大小之間切換時導航欄保持開啟狀態的問題。
  • 渲染邏輯：元件呈現一個 Navbar()，其中包含徽標和導航連結。連結在較大的螢幕上顯示為水平列表（nav-links），在移動選單開啟時顯示為垂直列表（nav-links-mobile）。漢堡選單（mobile-menu-icon）僅在移動螢幕（或較小的螢幕）上顯示。點選漢堡圖示會切換 isMobile 狀態，該狀態控制是否顯示移動選單。
  • 響應式設計: 導航欄設計為完全響應式。useEffect Hook 確保選單在螢幕尺寸更改時自動關閉。isMobile 狀態允許元件在移動檢視和桌面檢視之間動態切換。
  • 樣式：Navbar.css 中的 CSS 樣式提供了視覺上獨特且吸引人的黑色皇家主題，具有流暢的過渡、用於深度的陰影以及用於奢華觸感的金色邊框。

步驟 3：新增響應式導航欄元件的樣式

此處演示的 CSS 僅供示例使用。因此，在 **'src'** 資料夾中建立一個名為 **'Navbar.css'** 的檔案來為您的響應式導航欄元件設定樣式。

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #121212;
  color: #ffffff;
}

.navbar {
  width: 100%;
  height: 70px;
  background: #000;
  background: linear-gradient(to right, #333, #000);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  border-bottom: 2px solid #ff9800;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
}

.nav-links li {
  margin: 0 20px;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  position: relative;
  padding: 5px 0;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: "";
  width: 0;
  height: 3px;
  background: #ff9800;
  position: absolute;
  left: 0;
  bottom: -5px;
  transition: all 0.3s ease;
}

.nav-link:hover {
  color: #ff9800;
}

.nav-link:hover::after {
  width: 100%;
}

/* Hamburger Menu Styling */
.mobile-menu-icon {
  display: none;
  cursor: pointer;
}

.hamburger {
  width: 30px;
  height: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1001;
}

.hamburger span {
  width: 100%;
  height: 4px;
  background: #fff;
  border-radius: 5px;
  transition: all 0.4s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 9px;
  position: absolute;
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 9px;
  position: absolute;
}

/* Mobile Responsive Styling */
@media screen and (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .nav-links-mobile {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    background-color: #000;
    z-index: 1000;
    animation: slideIn 0.5s ease forwards;
  }

  .nav-links-mobile li {
    margin: 20px 0;
  }

  .nav-link {
    font-size: 20px;
    padding: 10px 20px;
  }

  .mobile-menu-icon {
    display: block;
  }
}

/* Animations */
@keyframes slideIn {
  from {
    right: -100%;
  }
  to {
    right: 0;
  }
}

/* Content Styling */
.content {
  /* Adjust padding to create space 
     between navbar and content */
  padding: 80px 20px; 
  /* Slightly different background 
     to differentiate from navbar */
  background-color: #1a1a1a; 
  min-height: 100vh;
}

.content h1 {
  font-size: 36px;
  color: #ff9800;
  margin-bottom: 20px;
}

.content p {
  font-size: 18px;
  line-height: 1.6;
  color: #ccc;
}

步驟 4：整合響應式導航欄元件

現在，我們的響應式導航欄元件已準備就緒。要使用它，我們需要將元件匯入主應用程式檔案，即 **'App.js'**。包含以下程式碼以將響應式導航欄元件整合到您的應用程式中。

import React from "react";
import Navbar from "./Navbar"; // Import the Navbar component

function App() {
  return (
    <div className="App">
        <Navbar/>
    </div>
  );
}

export default App;

步驟 5：啟動應用程式

程式碼準備就緒後，我們需要執行應用程式以獲取輸出。現在您可以轉到您的 VSCode 編輯器終端並編寫以下命令，然後執行應用程式，如下所示，在此儲存庫中，應用程式在埠 **https://:3000/** 上執行。

npm start

輸出

上面提到的響應式導航欄程式碼的輸出如下所示。請注意，輸出以 GIF 的形式新增。

結論

在本文中，我們使用 ReactJS 建立了一個吸引人且響應式的導航欄。好了，我們只是有了基本結構，並進一步使用一些高階 CSS 概念對其進行了樣式設定，所有這些都將視覺上令人驚歎，並且在每個裝置上都具有響應能力。

更新於： 2024 年 8 月 26 日

0 次檢視

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告