側邊菜單打開時使組件不移動

Question

我是 Web 開發的新手，在使用 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, etc..} 但沒有任何結果。

Answer 1

我知道我回答的有點晚了……我通常是這樣解決這個問題的：

1. 使側邊欄位置固定，但僅適用於 className ".ant-sidebar-sider-below" 的情況

   .ant-layout-side-below { 位置：固定； z-索引：999； 高度：100%； }

2. 然后你可以修復菜單觸發按鈕，當側邊欄有 className ".ant-layout-sider-collapsed" 時，這個 css

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

我創建了一個小示例鏈接，希望這對某人有用

Answer 2

當我做移動菜單時，我將整個菜單包裝在一個 id 為 nav 的 div 中，然后我確保我的整個導航 div 具有 position:absolute 和 z-index:100000，這可能不是必需的，但以防萬一。 絕對位置將其從頁面的其余部分中取出，因此它不會與其他元素交互（並且在菜單打開時不會推送它們），並且 z-index 確保它始終顯示在其他頁面的頂部元素。 希望這會有所幫助！

Answer 3

我做了一些研究，發現我確實必須更改 ant design 的 css 屬性才能達到預期的結果。 當我開始這樣做時（位置：絕對），附加到側面菜單的其他組件（如使其折疊的按鈕）不像以前那樣顯示並隱藏在其他東西之間。

在簡歷中，我讀到它並沒有太多常見的更改預構建組件，例如 ant desiner 的組件。

我們的產品負責人決定保持菜單原樣。

感謝所有幫助！