根据屏幕宽度在页面或抽屉菜单中显示列表

Question

我有一个菜单，当屏幕宽度小于一定数量时显示为 hamburger/drawer 菜单，我正在使用 react-spring 在“汉堡包”时在屏幕上滑动该菜单图标”被点击。我的问题是 <ul> 在 react-springs 的 <animated.div> 中，所以当屏幕尺寸变宽并且 hamburger/drawer 菜单被隐藏时，<ul> 列表项被隐藏起来，这是我不想要的，我希望菜单在屏幕变宽时正常显示在页面上（没有抽屉）。有没有一种方法可以实现这一点，而不必两次创建两个具有相同 <li> 的 <ul>，一个在 <animated.div> 中显示在较窄屏幕的抽屉菜单中，另一个在更宽的屏幕上显示在页面上？

反应。js/JSX:

return (
    //State of menuVisible starts off as false
    <FontAwesomeIcon
      className="menuBarIcon"
      icon={faBars}
      onClick={() => setMenuVisible(!menuVisible)}/>
    {menuTransitions(
      (styles, item) => item &&
      <animated.div
        style={styles}
        className="menu">
        <ul>
          <li><a>Menu Item One</a></li>
          <li><a>Menu Item Two</a></li>
          <li><a>Menu Item Three</a></li>
          <li><a>Menu Item Four</a></li>
          <li><a>Menu Item Five</a></li>
        </ul>
      </animated.div>
    )}
);

CSS:

//Wider screens
.menuBarIcon {
  display: none;
}

@media (max-width: 1080px) {
//Narrower screens
.menuBarIcon {
  display: inline;
  float: right;
  padding: 10px;
  margin: 25px;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 100%;
}
}

Answer 1

我解决了，我所做的是首先将 <ul> 放在 <animated.div> 之外，这样现在它可以在更宽的屏幕上正常显示。然后我根据 menuVisible 的状态向 <ul> 添加了一个三元运算符，这样它就可以在两个 class 之间交替，一个隐藏 <ul> 一个隐藏 <ul>会显示它。然后将其定位在抽屉菜单中，我只是将 menu class 的 CSS 添加到媒体查询中的 <ul> 以获得较窄的屏幕。

反应。js/JSX:

return (
<FontAwesomeIcon
  className="menuBarIcon"
  icon={faBars}
  onClick={() => setMenuVisible(!menuVisible)}/>
{menuTransitions(
  (styles, item) => item &&
  <animated.div
    style={styles}
    className="menu">
  </animated.div>
)}
//Class alternates between the two based on condition of the state of menuVisible
<ul className={menuVisible ? "menuActive" : "menuInactive"}>
  <li><a>Menu Item One</a></li>
  <li><a>Menu Item Two</a></li>
  <li><a>Menu Item Three</a></li>
  <li><a>Menu Item Four</a></li>
  <li><a>Menu Item Five</a></li>
</ul>
);

CSS:

@media (max-width: 1080px) {
//Narrower screens

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 100%;
}

ul {
  //Added same CSS as .menu class to Ul to position the list within the drawer menu
  position: fixed;
  top: 0;
  left: 0;
  width: 280px; //width is different to compensate for padding in li
  height: 100%
  flex-direction: column;
}

.menuActive {
  //Ul displays normally when menuVisible state is true
  display: block;
}

.menuInactive {
  //Ul is hidden when menuVisible state is false
  display: none;
}
}

根据屏幕宽度在页面或抽屉菜单中显示列表

Display list on page or in drawer menu depending on screen width

javascript

css

jsx

reactjs

react-spring