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

坏处:... 不大好衔接

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

相关推荐
柳鲲鹏7 小时前
多种方法:OpenCV中修改像素RGB值
前端·javascript·opencv·1024程序员节
susu10830189117 小时前
chrome浏览器设置为手机模式
前端·chrome
IT_陈寒8 小时前
SpringBoot 3.2 实战:这5个新特性让你的开发效率提升50%!
前端·人工智能·后端
正经教主8 小时前
【Trae+AI】Express框架01:教程示例搭建及基础原理
前端框架·express
水星梦月8 小时前
跨平台开发中的图形渲染:Canvas与View+CSS的性能分析与决策路径
前端·css·图形渲染·canvas
yuanyxh9 小时前
前端仔的一次运维实践
linux·运维·前端
望获linux11 小时前
【Linux基础知识系列:第一百五十九篇】磁盘健康监测:smartctl
linux·前端·数据库·chrome·python·操作系统·软件
十一吖i12 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
冰暮流星14 小时前
css之线性渐变
前端·css