使用 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.ac.cn/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 次查看

启动您的 职业生涯

通过完成课程获得认证

开始
广告

© . All rights reserved.