Question

早上好，

我是网络开发的新手，并且使用Ant设计的侧边菜单组件进行了一些努力。

这是一个可折叠的菜单，可以在点击打开它时移动许多其他组件。

我希望页面上的所有其他项目保持在同一位置单独的菜单操作。

这是侧面组件：

    import React from 'react'
    import { Layout, Menu, Breadcrumb, Icon, Button } from 'antd';

    const { Header, Content, Footer, Sider } = Layout;
    const SubMenu = Menu.SubMenu;

    export class SideMenu extends React.Component {

      render() {
        return (
            <Menu
              mode="vertical"
              theme="dark"
              className="side-menu"
            >
              ...
            </Menu>
        )
      }
    }

 Thats my layout component:

import React from 'react'
...
import { Layout, Menu, Icon, Row, Col } from 'antd'

const { Header, Footer, Sider, Content } = Layout

export class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = { collapsed: true }
  }

  toggle() {
    console.log('click')
    this.setState({
      collapsed: !this.state.collapsed
    })
  }

  render() {
    return (
      <Layout className="main-layout">
        <Sider className='sider'
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="app-logo" id="logo">
            <img src="images/logo.png" alt="Augecon_Logo" height="30" width="30"/>
          </div>
          <SideMenu />
        </Sider>
        <Layout>
          <Header className="app-header">
            <Row justify="center" align="middle">
              <Col span={3}>
                <Icon
                  className="app-trigger"
                  type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                  onClick={this.toggle.bind(this)}
                />
              </Col>
              <Col span={10} push={10}>
                <div className="app-info" >Sexta feira 12/01/2018 - 17:58 | Daniel Oliveira</div> <!--This item moves-->
              </Col>
              <Col span={3} push={8}>
                <UserAvatar/><!--This item moves-->
              </Col>
            </Row>
          </Header>
            <Content className="app-background" >
              <div className="div-background">
                <div>
                  <img src="images/sagic.png" alt="sagic" className="img-title" center center fixed/> <!--This item moves-->
                </div>
                <Row type="flex" gutter={32} justify="space-around" className="row-card"> <!--This item moves-->
                  <Col span={7} push={1}>
                    <CardSuporte/>
                  </Col>
                  <Col span={7} push={1}>
                    <CardSugestoes/>
                  </Col>
                  <Col span={7} push={1}>
                    <CardLoja/>
                  </Col>
                </Row>
              </div>
            </Content>
        </Layout>
      </Layout>
    )
  }
}

这是我的布局组件：

import React from 'react'
import { SideMenu } from './sidemenu.js'
import { UserAvatar} from './avatar.js'
import { CardSuporte} from './cardsuporte.js'
import { CardSugestoes} from './cardsugestoes.js'
import { CardLoja} from './cardloja.js'
import { Layout, Menu, Icon, Row, Col } from 'antd'

const { Header, Footer, Sider, Content } = Layout

export class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = { collapsed: true }
  }

  toggle() {
    console.log('click')
    this.setState({
      collapsed: !this.state.collapsed
    })
  }

  render() {
    return (
      <Layout className="main-layout">
        <Sider className='sider'
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="app-logo" id="logo">
            <img src="images/logo.png" alt="Augecon_Logo" height="30" width="30"/>
          </div>
          <SideMenu />
        </Sider>
        <Layout>
          <Header className="app-header">
            <Row justify="center" align="middle">
              <Col span={3}>
                <Icon
                  className="app-trigger"
                  type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                  onClick={this.toggle.bind(this)}
                />
              </Col>
              <Col span={10} push={10}>
                <div className="app-info" >Sexta feira 12/01/2018 - 17:58 | Daniel Oliveira</div>
              </Col>
              <Col span={3} push={8}>
                <UserAvatar/>
              </Col>
            </Row>
          </Header>
            <Content className="app-background" >
              <div className="div-background">
                <div>
                  <img src="images/sagic.png" alt="sagic" className="img-title" center center fixed/>
                </div>
                <Row type="flex" gutter={32} justify="space-around" className="row-card">
                  <Col span={7} push={1}>
                    <CardSuporte/>
                  </Col>
                  <Col span={7} push={1}>
                    <CardSugestoes/>
                  </Col>
                  <Col span={7} push={1}>
                    <CardLoja/>
                  </Col>
                </Row>
              </div>
            </Content>
        </Layout>
      </Layout>
    )
  }
}

我已经尝试了一些css操作，比如{position：fixed，relative等等}但没有任何结果。

感谢您的帮助，如果需要更多代码或示例，请告知我们。

Answer 1

我知道我回答得有点晚了... 我通常按以下方式解决此问题：

使侧边栏位置固定，但仅在其类名为“ .ant-sidebar-sider-below”的情况下

.ant-layout-sider-below { 位置：固定； z索引：999；高度：100％; }
然后，当侧边栏具有与此CSS的className“ .ant-layout-sider-collapsed”时，您可以修复菜单触发按钮

.ant-layout-sider-collapsed .ant-layout-sider-zero-width-trigger { 位置：固定；左：4px；右：自动； }

我创建了一个小例子link 我希望这对某人有用

Answer 2

当我做移动菜单时，我将整个菜单包装在一个id为nav的div中，然后我确保我的整个导航div具有位置：绝对和z-index：100000，这可能不是必需的但只是在案件。绝对位置将其从页面的其余部分中取出，因此它不会与其他元素交互（并且在菜单打开时不会推送它们），并且z-index确保它始终显示在其他页面的顶部元素。希望这有帮助！

Answer 3

我做了一些研究，发现我确实必须改变蚂蚁设计的css属性才能达到预期的效果。当我开始这样做（位置：绝对）时，附加到侧边菜单的其他组件（如使其折叠的按钮）不像以前那样显示并隐藏在其他东西之间。

在简历中，我读到它不是像蚂蚁设计师组件那样常见的改变pre-buid组件。

我们的产品负责人决定维护菜单。

感谢您的帮助！

侧边菜单打开时，组件不会移动

3 个答案: