当前位置：文江博客话题详情

蚂蚁设计：将位置子菜单移至屏幕顶部

发布于 2025-02-06 08:31:55 字数 575 浏览 2 评论 0原文

可以将子菜单位置移至屏幕顶部。我正在使用新的菜单组件。以哪种方式使用它是使用它，您要做的就是写＆lt;菜单模式= {mode} theme = {theme} items = {items}/＆gt;。

默认值的子菜单位置：

这是我的预期条件：

蓝线是菜单，红线是子菜单。我以前的方式是创建一个新菜单并将其放在屏幕顶部但是我认为，如果您这样使用它，那将是很多麻烦。因此，我想通过将子菜单移至屏幕顶部来切换方式。真的可以做吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

亂 2025-02-13 08:31:55

您始终可以覆盖蚂蚁设计CSS样式来实现这一目标。子菜单项是通常的ul＆amp; li对。要在我们只需要的行中显示li项目 -

ul li{
  display: inline;
}

我们可以将其应用于Ant Design菜单项＆amp;一些调整 -

.ant-menu-vertical.ant-menu-sub > .ant-menu-item {
  display: inline;
}

.ant-menu-submenu-popup {
  top: 0px !important;
  right: 5% !important;
  left: auto !important;
  width: 400px;
}

nofollow noreferrer“>

= a href =“ https://i.sstatic.net/co3db.png” rel =“ nofollow noreferrer”>

You can always override the ant design css styles to achieve this. The sub menu items are the usual ul & li pair. To display li items in a line we just need to -

ul li{
  display: inline;
}

We can apply the same to ant design menu items & a few tweaks -

.ant-menu-vertical.ant-menu-sub > .ant-menu-item {
  display: inline;
}

.ant-menu-submenu-popup {
  top: 0px !important;
  right: 5% !important;
  left: auto !important;
  width: 400px;
}