React:如何从头开始创建响应式导航栏

本文将引导您完成在 React 中创建响应式顶部导航菜单的完整示例。我们将只使用 React 的原生特性和纯 CSS 从头开始​​构建一切。既不会使用 NPM 包,也不会使用第三方 CSS 库。

先决条件: React 和 CSS 的基本知识

演示

我们要做的是一个蓝色导航栏的网络应用程序。此导航栏包含一个分类和一些链接。当屏幕等于或大于 680px 时(你可以根据需要调整它),所有链接都位于水平行中。当窗口宽度小于 680px 时,这些链接会消失。相反,您会注意到右侧有一个按钮,可用于打开移动菜单,非常适合小屏幕尺寸。您可以使用右上角的X按钮关闭此移动菜单。下面的 GIF 清楚地描述了我在说什么:

React:如何从头开始创建响应式导航栏

代码

以下是生成上述演示的步骤。

  1. 启动一个新的 React 项目:
npx create-react-app kindacode-example

名字无所谓。选择任何你想要的。到目前为止,我们只关注 2 个文件:src/App.jssrc/App.css。为了使本教程更易于理解,我将所有代码放入这些文件中。如果需要,您可以稍后重构并将它们拆分为更多小文件(将每个 React 组件存储在单个文件中是一个好习惯)。

2. App.js中的完整代码(附解释):

// KindaCode.com
// src/App.js
import { useState } from 'react';
import './App.css';

// Define MobileMenu component
const MobileMenu = () => {
  return (
    <div className={'mobile-menu'}>
      <a href='#home'>Home</a>
      <a href='#news'>News</a>
      <a href='#shop'>Shop</a>
      <a href='#contact'>Contact</a>
      <a href='#about'>About</a>
      <a href='#privacy'>Privacy Policy</a>
    </div>
  );
};

function App() {
  const [isShown, setIsShown] = useState(false);
  const toggleMobileMenu = () => {
    setIsShown(!isShown);
  };

  return (
    <>
      <div className='topnav'>
        {/* Your Logo/Brand here */}
        <div className='logo'>
          KINDA<span>CODE</span>
        </div>

        {/* Desktop Menu, which only appears on large screens */}
        <div className='menu'>
          <a href='#home' className='active-link'>
            Home
          </a>
          <a href='#news'>News</a>
          <a href='#shop'>Shop</a>
          <a href='#contact'>Contact</a>
          <a href='#about'>About</a>
        </div>

        {/* This button only shows up on small screens. It is used to open the mobile menu */}
        <button className='show-mobile-menu-button' onClick={toggleMobileMenu}>
          &#8801;
        </button>
      </div>

      {/* The mobile menu and the close button */}
      {isShown && <MobileMenu />}
      {isShown && (
        <button className='close-mobile-menu-button' onClick={toggleMobileMenu}>
          &times;
        </button>
      )}

      {/* Dummy content */}
      <div className='content'>
        <h2>Welcome to KindaCode.com</h2>
        <p>Responsive top navigation bar with React and pure CSS</p>
      </div>
    </>
  );
}

export default App;
  1. 使其正常工作的一个不可或缺的要素是 CSS。删除src/App.css文件中的所有内容并添加以下内容:
.topnav {
  height: 56px;
  padding: 0px 20px;
  background: #3f51b5;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

/* Style the logo */
.logo {
  height: 100%;
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 22px;
  font-style: italic;
  font-weight: bold;
}

.logo span {
  color: #8bc34a;
}

/* Desktop Menu */
.menu {
  margin-left: 15px;
  height: 100%;
  display: none;
}

.menu a {
  height: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: bold;
  font-size: 17px;
  text-decoration: none;
  transition: 0.3s;
}

.menu a:hover,
.menu a.active-link {
  background: #ff9800;
  color: #fff;
}

/* Mobile Menu Show & Close buttons */
.show-mobile-menu-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
}

.close-mobile-menu-button {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent;
  font-size: 50px;
  color: #fff;
  cursor: pointer;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.85);
  transition: 0.3s;
}

.mobile-menu a {
  padding: 10px 0px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: bold;
  font-size: 20px;
  text-decoration: none;
}

.mobile-menu a:hover {
  color: orange;
}

/* Media queries for responsiveness */
@media screen and (min-width: 680px) {
  .topnav {
    justify-content: flex-start;
  }

  .show-mobile-menu-button {
    display: none;
  }

  .menu {
    display: flex;
    align-items: center;
  }
}

/* Other styles */
.content {
  padding: 40px 20px;
}

4.以开发模式运行项目:

npm start

转到 http://localhost:3000 与您的创作进行交互。

结论

我们已经浏览了在 React 中实现响应式菜单栏的端到端示例。我们的 JS 代码中的逻辑非常简单。我认为更难的部分是 CSS。编写代码和从头开始制作东西很困难,但它让您可以自由地深度自定义应用程序的外观和功能,并减少对第三方库的依赖。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React:如何从头开始创建响应式导航栏