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

坏处:... 不大好衔接

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

相关推荐
赵小川6 小时前
Taro 包升级实录 — 从 3.3 到 3.6.3 完整指南
前端·架构
_志哥_6 小时前
解除有些网站不能复制的终极办法
前端·chrome
愚昧之山绝望之谷开悟之坡7 小时前
什么是uv和传统的区别
前端·chrome·uv
SRC_BLUE_177 小时前
NSSCTF - Web | 【第五空间 2021】pklovecloud
android·前端
golang学习记7 小时前
从0死磕全栈之Next.js 数据安全实战指南:从零信任到安全架构
前端
云中雾丽7 小时前
flutter中 getx 的使用
前端
Jay丶7 小时前
聊聊入职新公司两个月,试用期没过这件事
前端·面试
ZTeam前端全栈进阶圈7 小时前
Vue新技巧:<style>标签里的 CSS 也能响应式!
前端
ღ_23337 小时前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·javascript·vue.js
摸着石头过河的石头7 小时前
JavaScript继承的多种实现方式详解
前端·javascript