Question

我有左右离子侧菜单，我想改变菜单宽度。我已成功更改左侧菜单宽度，如下所示，但我不知道如何更改右侧菜单宽度。目前，左侧菜单宽度发生变化，但当正在切换右侧菜单时，右侧菜单内容会失真。

.menu.menu-left{
    width: calc(100% - 70px) !important;
}
.menu-open .menu-content{
    transform: translate3d(calc(100% - 70px), 0px, 0px) !important;
}

Codepen Link

Answer 1

只需在for

中添加“菜单宽度”即可

variables.scss

Answer 2

使用类名更改侧面菜单的宽度。

<ion-menu class="custom" side="end" menuId="first">
</ion-menu>

在CSS中，您可以像下面这样使用。

.custom {
  --width: 500px;
}

Answer 3

根据this，只需在.元素中添加width属性。

sidemenu的离子文档是here

ion-side-menu

Answer 4

当人们给出他们的答案时，我也想给出我的答案。

PX 很好，但如果我们以百分比形式添加宽度，那么它适用于所有设备。将此 scss 添加到您的 page.scss 文件中

ion-menu {
  --width: 83%;
}

而且 HTML 不需要给出类名或任何东西，如果你愿意，你可以给它。

<ion-menu contentId="main-content" type="overlay"></ion-menu>

更改离子侧菜单的两个菜单宽度

4 个答案: