React-antd组件库 - 让Menu子菜单项水平排列 - 下拉菜单排序 - 自定义子菜单展示方式

效果图

依据

导航菜单 Menu - Ant Design为页面和功能提供导航的菜单列表。https://ant-design.antgroup.com/components/menu-cn#submenutype关键:SubMenuType的popupClassName是子菜单样式 = hover弹出二级菜单的dom外部类名

步骤(思路1)

  1. <Menu items={xxItems}/>

  2. 定义选项,指定二级菜单的popupClassName,可多个

    javascript 复制代码
    const xxItems = [
        {
            label: '尺寸',
            key: 'size',
            popupClassName: 'xxxclass max-w-sm',
            children: [
                {
                    key: 's1',
                    label: '1:1'
                },
                {
                    key: 's2',
                    label: '3:4'
                }
            ]
        }
    ];
  3. 在自己的css中定义"xxxclass"以及二级菜单弹窗的dom的样式,下面有ul > li,设置:

    css 复制代码
    .xxxclass {
      width: 100% !important;
    }
    
    .xxxclass>ul {
      display: flex;
      flex-wrap: wrap;
    }
    .xxxclass>ul>li {
      display: inline-block;
      width: auto!important;
    }
  4. OK

步骤(思路2)

不要把弹出窗塞到menu,自己另写一个独立的悬浮DOM,使用变量控制显示;

然后:menu的某按钮的点击事件 > 修改变量 > 显示悬浮DOM > 自己关闭此DOM

坏处:... 不大好衔接

好处:随便定义样式,图标、图片、标题随便弄

相关推荐
CAD老兵1 分钟前
前端 Source Map 原理与结构详解
前端
gnip5 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长16 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_16 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe101018 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang18 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi19 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课22 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥23 分钟前
pixijs 的填充渲染错误,如何处理?
前端
snakeshe101023 分钟前
6-1. 实现 useState
前端