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

坏处:... 不大好衔接

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

相关推荐
空山新雨(大队长)4 分钟前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术39 分钟前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫39 分钟前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓39 分钟前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java40 分钟前
CSS的文本样式
前端·css
前端小趴菜0540 分钟前
css - 滤镜
前端·css
祈祷苍天赐我java之术40 分钟前
理解 CSS 浮动技术
前端·css
索迪迈科技43 分钟前
Flex布局——详解
前端·html·css3·html5
咔咔一顿操作44 分钟前
【CSS 3D 实战】从零实现旋转立方体:理解 3D 空间的核心原理
前端·css·3d·css3