Бургер-меню с использованием Bulma на React не работает

Я новичок в реакции. Я пытаюсь сделать навигацию в шапке. я использую 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;

В

цель данных

Атрибут на кнопке бургера не вызывает меню. Пожалуйста, дайте мне знать, что я делаю не так. Спасибо


reactjs react-redux hamburger-menu bulma
person rizesky    schedule 06.03.2019    source источник
comment
Bulma не предоставляет js-код. проверьте раздел переключения javascript в документе   -  person MaximeB    schedule 07.03.2019
comment
@MaximeB im, используя атрибут data-target, действительно ли нужен js-код?   -  person rizesky    schedule 08.03.2019

Ответы (3)


arrow_upward
20
arrow_downward

Bulma не имеет встроенного события переключения, вы должны создать его вручную, добавив класс «is-active» в «navbar-burger» и «navbar-menu» здесь. Я добился этого с помощью 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>
person Sjs Ahd    schedule 30.11.2019

arrow_upward
1
arrow_downward

Как указано в другом ответе, для работы гамбургерного меню Bulma требуются дополнительные js. Ниже я расскажу, как я это сделал. Ключ в toggleBurgerMenu. Кроме того, toggleBurgerMenu необходимо указать в событии onClick каждого navbar-item, чтобы меню гамбургера закрывалось после щелчка по пункту меню.

import React from 'react';
import { Link } from 'react-router-dom';

const Navigation = (props) => {
  function toggleBurgerMenu() {
    document.querySelector('.navbar-menu').classList.toggle('is-active');
  }

  return (
    <nav className="navbar" role="navigation" aria-label="main navigation">
      <div className="navbar-brand">
        <Link to="/" className="navbar-item">React App</Link>

        <a role="button" className="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasic"
          onClick={toggleBurgerMenu}>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="navbarBasic" className="navbar-menu">
        <div className="navbar-start">
          <Link to="/about" className="navbar-item" onClick={toggleBurgerMenu}>About</Link>
          <Link to="/contact" className="navbar-item" onClick={toggleBurgerMenu}>Contact</Link>
          <Link to="/notes" className="navbar-item" onClick={toggleBurgerMenu}>Notes</Link>
        </div>
      </div>
    </nav>
  );
}

export default Navigation;
person datchung    schedule 20.08.2020

arrow_upward
0
arrow_downward

Когда вы нажимаете на гамбургер, 'navbar-menu' должно быть 'navbar-menu is-active'. В противном случае вам также следует удалить «is-active».

person user2758367    schedule 11.05.2019