汉堡菜单 bulma React - JavaScript

Bulma是一款基于Flexbox的现代CSS框架，易于使用和定制。而React则是目前最流行的框架之一，由Facebook创建，在构建用户界面方面具有非常高的效率和灵活性。汉堡菜单是指那种在小屏幕上可以展开和收起的菜单，常常作为响应式设计的一部分出现。在这个教程中，我们将会使用Bulma和React来构建一个漂亮的汉堡菜单。

前置技能

1. JavaScript编程基础
2. React编程基础

漂亮的汉堡菜单

在Bulma中，我们可以使用Navbar组件来创建漂亮的菜单。让我们先看一下如何使用Navbar组件。

import React from 'react';
import { Navbar } from 'react-bulma-components';

const Example = () => (
  <Navbar>
    <Navbar.Brand>
      <Navbar.Item renderAs="a" href="#">
        <img src="https://bulma.io/images/bulma-logo.png" alt="" />
      </Navbar.Item>
      <Navbar.Burger />
    </Navbar.Brand>
    <Navbar.Menu>
      <Navbar.Container position="end">
        <Navbar.Item href="#">Home</Navbar.Item>
        <Navbar.Item href="#">About</Navbar.Item>
        <Navbar.Item href="#">Contact</Navbar.Item>
      </Navbar.Container>
    </Navbar.Menu>
  </Navbar>
);

export default Example;

在这个示例中，我们首先导入了Navbar组件。然后，我们创建了一个函数式组件，并在其中使用Navbar组件。Navbar.Brand是用来包含Logo和汉堡菜单的。Navbar.Item是一个用来创建菜单项的组件。Navbar.Burger则是汉堡菜单的实现。

如果我们运行这个示例，我们将会得到一个漂亮的菜单，当我们将窗口缩小到足够小的时候就会看到汉堡菜单。

但是，我们目前还不能点击汉堡菜单，让它展开。我们需要一些JavaScript代码来实现这个功能。

实现漂亮的汉堡菜单

让我们先给汉堡菜单添加一些样式:

.navbar-burger {
    border-color: white;
}

.navbar-burger:hover {
    background-color: white;
}

.navbar-burger span {
    background-color: white;
}

现在，我们需要编写一些JavaScript代码来处理汉堡菜单的展开和收缩。我们用一个state来判断当前汉堡菜单是展开还是收缩状态。当我们单击汉堡菜单时，state将会改变，因此汉堡菜单的状态也将会更改。

import React, {useState} from 'react';
import { Navbar } from 'react-bulma-components';

const Example = () => {
  const [isActive, setisActive] = useState(false);

  const handleClick = () => {
    setisActive(!isActive);
  }

  return (
    <Navbar>
      <Navbar.Brand>
        <Navbar.Item renderAs="a" href="#">
          <img src="https://bulma.io/images/bulma-logo.png" alt="" />
        </Navbar.Item>
        <Navbar.Burger className={isActive ? 'is-active' : ''} onClick={handleClick} />
      </Navbar.Brand>
      <Navbar.Menu className={isActive ? 'is-active' : ''}>
        <Navbar.Container position="end">
          <Navbar.Item href="#">Home</Navbar.Item>
          <Navbar.Item href="#">About</Navbar.Item>
          <Navbar.Item href="#">Contact</Navbar.Item>
        </Navbar.Container>
      </Navbar.Menu>
    </Navbar>
  );
}

export default Example;

现在，我们在汉堡菜单上添加了一个onClick事件，当我们点击汉堡菜单时，触发handleClick函数。handleClick函数会将isActive状态设置为相反的值。另外，我们在汉堡菜单的className属性中添加了一个is-active类，用于实现active状态下的样式。Navbar.Menu也用了相同的逻辑来控制其显示和隐藏。

总结

在这个教程中，我们学习了如何使用Bulma和React来构建漂亮的汉堡菜单。我们利用了Bulma提供的Navbar组件来创建菜单，利用JavaScript来实现汉堡菜单的展开和收缩功能。我们还对菜单添加了一些样式，让它们更加漂亮。

完整代码示例:

import React, {useState} from 'react';
import { Navbar } from 'react-bulma-components';
import './App.css';

const App = () => {
  const [isActive, setisActive] = useState(false);

  const handleClick = () => {
    setisActive(!isActive);
  }

  return (
    <Navbar>
      <Navbar.Brand>
        <Navbar.Item renderAs="a" href="#">
          <img src="https://bulma.io/images/bulma-logo.png" alt="" />
        </Navbar.Item>
        <Navbar.Burger className={isActive ? 'is-active' : ''} onClick={handleClick} />
      </Navbar.Brand>
      <Navbar.Menu className={isActive ? 'is-active' : ''}>
        <Navbar.Container position="end">
          <Navbar.Item href="#">Home</Navbar.Item>
          <Navbar.Item href="#">About</Navbar.Item>
          <Navbar.Item href="#">Contact</Navbar.Item>
        </Navbar.Container>
      </Navbar.Menu>
    </Navbar>
  );
}

export default App;

.navbar-burger {
    border-color: white;
}

.navbar-burger:hover {
    background-color: white;
}

.navbar-burger span {
    background-color: white;
}