1

我是 Ant 设计的新手。在这里，我正在尝试响应式导航栏，因此我想根据断点隐藏导航栏的一些项目。为此，我需要在菜单中将一些子菜单分组。但是，当我使用 div 执行此操作时，我的导航栏布局会从水平变为垂直。我的代码是，

<Menu
      className={navbarClasses.join(" ")}
      mode="horizontal"
      style={{ padding: "5px", fontSize: "15px" }}
    >
      {/* <Item icon={<MenuOutlined />} /> */}
      <Item className="logo_bottom">
        <img alt="logo" src={logo} className="logo" />
      </Item>

      <>
        <SubMenu title="Demos" style={{ marginTop: "14px" }}>
          <Item>
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://www.antgroup.com"
            >
              Modern
            </a>
          </Item>
          <Item>Classic</Item>
          <Item>Vintage</Item>
          <Item>Standard</Item>
          <Item>Minimal</Item>
          <Item>Trendy</Item>
          <Item>Elegant</Item>
        </SubMenu>
        <SubMenu key="smenu" title="Categories" style={{ marginTop: "14px" }}>
          <Item className="ant-dropdown-link">Fresh Vegetables</Item>
          <Item>Diet Nutrition</Item>
          <Item> Healthy Foods</Item>
          <Item> Grocery Items</Item>
          <Item> Beaf Steak</Item>
        </SubMenu>
        <SubMenu key="ssmenu" title="Dietary" style={{ marginTop: "14px" }}>
          <Item className="ant-dropdown-link"> Vegetarian</Item>
          <Item> Kakogenic</Item>
          <Item> Mediterranean</Item>
          <Item>Organic</Item>
        </SubMenu>
        <Item style={{ marginTop: "14px" }}>Search</Item>
        <SubMenu
          title="Pages"
          style={{ marginRight: "auto", marginTop: "14px" }}
        >
          <SubMenu title="Users">
            <Item>My Account</Item>
            <Item>Sign In</Item>
            <Item>Sign Up</Item>
          </SubMenu>
          <Item>FAQ About Us</Item>
          <Item>Privacy Policy</Item>
          <Item>Terms & Condition</Item>
          <Item>Contact Us</Item>
          <Item>Checkout</Item>
          <Item>404</Item>
        </SubMenu>
      </>

      <Item style={{ marginTop: "14px" }}>
        <Dropdown overlay={menu} trigger={["click"]}>
          <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
            <img alt="uk" src={ukLogo} className="lan-images" />
            English - EN <DownOutlined />
          </a>
        </Dropdown>
      </Item>
      <Item style={{ marginTop: "14px" }}>
        <Button
          icon={<ShoppingCartOutlined style={{ fontSize: "20px" }} />}
          type="text"
          size="large"
        >
          Cart
        </Button>
      </Item>
      <Item style={{ marginTop: "14px" }}>
        <Button
          icon={<UserOutlined style={{ fontSize: "20px" }} />}
          type="text"
          shape="round"
        >
          Sign In
        </Button>
      </Item>
    </Menu>

那么如何对这些子菜单进行分组呢？提前致谢。

4

0 回答 0