Как использовать меню-гамбургер на мобильном или маленьком экране? - PullRequest
Новая
       18

Как использовать меню-гамбургер на мобильном или маленьком экране?

2 голосов
/ 26 апреля 2020

Я хотел бы иметь мобильное меню в своем компоненте, однако оно должно работать только на мобильных устройствах. После нажатия на нее должны появиться такие опции, как Дом, Мебельный стул ... У меня установлено меню «Гамбургер-Реакция», но я не знаю, как go узнать об этом. Должен ли я использовать медиа-запросы или просто реагировать. 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;

1 Ответ

1 голос
/ 26 апреля 2020

Использование bootstrap может облегчить вашу боль, но, как упомянул CanUver, если вы хотите показывать определенные c элементы только для определенных c окон просмотра, тогда медиа-запросы в css - это то, что вы ищете , Вы просто указываете, поскольку, когда вы хотите показать меню по-другому:

например 


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