Question

我是新来的反应者。我正在尝试在标题中进行导航。我使用bulma CSS：

"bulma": "^0.7.4",

我这样导入bulma文件：

import 'bulma/css/bulma.css';

它适用于大多数CSS，但不适用于汉堡菜单，该菜单单击汉堡按钮时不会折叠

这是我的标头代码：

import React,{Component} from 'react'
import {NavLink} from 'react-router-dom';
import style from './style.css';

class Header extends Component{

    render(){
        return (
            <React.Fragment>
                <nav className="navbar is-fixed-top" role="navigation" aria-label="main navigation">
                    <div className="navbar-brand">
                        <a href="/" className="navbar-item" to="/">
                        <img src="" alt="" width={112} height={28}/>
                        </a>

                        <a role="button" className="navbar-burger burger " aria-label="menu" aria-expanded="false" data-target="mainNavbar">
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        </a>
                    </div>

                    <div  id="mainNavbar" className="navbar-menu">

                        <div className="navbar-start">
                            <NavLink exact activeClassName={style.active} to="/"  className="navbar-item">
                                Home
                            </NavLink>

                            <NavLink activeClassName={style.active} to="/films"  className="navbar-item">
                                Films
                            </NavLink>
                        </div>

                    </div>
                    </nav>  
            </React.Fragment>
        );
    }
}


export default Header;

数据目标

汉堡按钮上的

属性未触发菜单。请让我知道我做错了什么。谢谢

Answer 1

布尔玛没有内置的切换事件，您必须通过在“ navbar-burger”和“ navbar-menu”中添加“ is-active”类来手动创建它，我已经通过React Hooks实现了

 const [isActive, setisActive] = React.useState(false);

 <nav className="navbar" role="navigation" aria-label="main navigation">
        <div className="navbar-brand">
          <a
            onClick={() => {
              setisActive(!isActive);
            }}
            role="button"
            className={`navbar-burger burger ${isActive ? "is-active" : ""}`}
            aria-label="menu"
            aria-expanded="false"
            data-target="navbarBasicExample"
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
        <div
          id="navbarBasicExample"
          className={`navbar-menu ${isActive ? "is-active" : ""}`}
        >
          <div className="navbar-start">
            <a className="navbar-item">Home</a>
            <a className="navbar-item">Documentation</a>
          </div>
        </div>
   </nav>

Answer 2

当您点击一个汉堡时，“ navbar-menu”应该是“ navbar-menu is-active”。在相反的情况下，您还应该删除“ is-active”。

Answer 3

如另一个答案中所述，要使布尔玛的汉堡菜单正常工作，还需要附加的js。以下是我的操作方法。 toggleBurgerMenu中的密钥。另外，需要在每个toggleBurgerMenu的{{1}}事件中指定onClick，以便在单击菜单项后关闭汉堡菜单。

navbar-item

在React上使用bulma的Burger菜单不起作用

3 个答案: