我是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;
汉堡按钮上的
属性没有触发菜单。请告诉我错在哪里。谢谢。data-target