javascript - 如何像在移动设备上一样垂直制作 React-semantic-ui 下拉菜单？

Question

我的网站上有一个可堆叠的菜单和下拉菜单。在手机上一切正常，但是当我在 ipad 上测试我的网站时，下拉菜单不可堆叠，并且某些内容未显示(例如关于)

以下是我的网站在每台设备上的外观:

在手机上

在 iPad 上

我的代码

    <Menu
              fixed="top"
              stackable
              borderless
              fluid
              style={{
 marginTop: '0em', marginRight: 'auto', marginLeft: 'auto',
}}
            >

              <Menu.Item
                style={{
                  textAlign: 'right',
                  display: 'block',
                  fontSize: '1.5em',
                }}
              >
                <Icon
                  onClick={this.handleIconClick}
                > <i
                  className="animated infinite bounce  iconsmind icon-Arrow-Up"
                />
                </Icon>
              </Menu.Item>

              {menu.items.map((item) => {
                if (item.menu_item_parent === '0') {
                  const menuList = menu.items.filter(
                    i => i.menu_item_parent === item.ID.toString(),
                  );
                  if (menuList.length === 0) {
                    return (
                      <Menu.Item
                        as="a"
                        key={item.ID}
                        link
                        href={`/${item.url.split(config.wp_url)[1].slice(0, -1)}`}
                        style={{
                          textAlign: 'Left',
                          display: 'block',
                          fontSize: '1.5em',
                        }}
                      >
                        {item.title}
                      </Menu.Item>
                    );
                  }
                  return (
                    <Dropdown
                      floating
                      item
                      text={item.title}
                      key={item.ID}
                      style={{
                        textAlign: 'Left',
                        display: 'block',
                        fontSize: '1.5em',
                      }}
                    >
                      <Dropdown.Menu>
                        {menuList.map(i => (
                          <Dropdown.Item
                            key={i.ID}
                            href={`/${item.url
                              .split(config.wp_url)[1]
                              .slice(0, -1)}/${i.url
                              .split(config.wp_url)[1]
                              .slice(0, -1)}`}
                          >
                            {i.title}
                          </Dropdown.Item>
                        ))}
                      </Dropdown.Menu>
                    </Dropdown>
                  );
                }
                return null;
              })}
            </Menu>

那么如何让下拉菜单在ipad上像在手机上看到的那样垂直下降呢？

Answer 1

根据最新的 React 语义 UI 文档。语义 ui 的 react 包装器不支持它。

---

移动设备上的语义 UI 堆栈菜单，您需要更改它以适合您的情况

您需要手动覆盖 semantic-ui-css 设置的最大宽度

当前样式

@media only screen and (max-width: 767px)
  .ui.stackable.menu .item {
  width: 100%!important;
}

您自定义样式

@media only screen and (max-width: 800px) // or any width you want stackable menu on
  .ui.stackable.menu .item {
  width: 100%!important;
}

---

⚠️ 注意:您应该在导入 semantic-ui-css 之后包含您的 css 文件

import 'semantic-ui-css/semantic.min.css';
import './styles/css/Index.css'; // the file that contains custom styling