如何仅在移动设备或小屏幕上使用 hamburger-react-menu？

Question

我想在我的组件中有一个移动菜单，但是，它应该只适用于移动设备。单击它后，应该会出现 Home、Furniture Chair... 等选项。我安装了 hamburger-react-menu，但不知道该怎么做。我应该使用媒体查询还是纯粹使用 react.js？组件代码如下。任何提示将不胜感激。

import React from 'react';
import PropTypes from 'prop-types';

import ProductSearch from '../../features/ProductSearch/ProductSearchContainer';

import styles from './MenuBar.module.scss';

const MenuBar = ({ children }) => (
  <div className={styles.root}>
    <div className='container'>
      <div className='row align-items-center'>
        <div className='col'>
          <ProductSearch />
        </div>
        <div className={'col-auto ' + styles.menu}>
          <ul>
            <li>
              <a href='#' className={styles.active}>
                Home
              </a>
            </li>
            <li>
              <a href='#'>Furniture</a>
            </li>
            <li>
              <a href='#'>Chair</a>
            </li>
            <li>
              <a href='#'>Table</a>
            </li>
            <li>
              <a href='#'>Sofa</a>
            </li>
            <li>
              <a href='#'>Bedroom</a>
            </li>
            <li>
              <a href='#'>Blog</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
);

MenuBar.propTypes = {
  children: PropTypes.node,
};

export default MenuBar;

Answer 1

使用 bootstrap 可以减轻你的痛苦，但正如 CanUver 提到的，如果你想为特定的视口显示特定的元素，那么 css 中的媒体查询就可以了，你正在寻找.您只需指定您想要以不同方式显示菜单的时间：

例如


@media only screen and (max-width: 490px) {
  h1 { color: "pink"; }
}

如何仅在移动设备或小屏幕上使用 hamburger-react-menu？

How do I use hamburger-react-menu just on mobile or small screen?

javascript

css

reactjs

hamburger-menu