0

问题描述

想实现antd官网文档左侧菜单栏的效果,
不hover时:
隐藏菜单栏滚动条。

hover时:

  1. 如果菜单项目加起来的高度不超过视口高度,不会自动出现滚动条。
  2. 如果菜单项目过多,会自动出现滚动条,且菜单项目宽度会相应减去滚动条宽度。

点击这里参考链接,注意观察左侧菜单栏。
图片描述

问题出现的环境背景及自己尝试过哪些方法

  1. 尝试过查看antd Layout、Menu、Sider组件用法,组合使用,但是没有找到能实现该效果的API或调用方法。
  2. 想过另一种替代的实现思路:隐藏纵向滚动条,然后在菜单栏加一个高度相同的空div,该div绝对定位,right:0;在hover时再显示出来。但是这种实现方法没有问题描述中hover时第2点的效果,且不够优雅。

期望各位大神找到能实现这种效果的方式,并指点相关原理,Thanks♪(・ω・)ノ

6月12日提问
1 个回答
1

已采纳

别想那么复杂,这就是一个简单的css效果
1.设置一个menu的盒子,宽度100%
2.menu盒子外设置一个大盒子,默认时候overflow设置为hidden,宽度高度自己设置
3.给大盒子添加一个hover伪类,改变overflow-y的属性为auto
然后你就发现可以了

撰写答案

推广链接