手风琴式菜单是指在一组垂直排列的菜单项中，点击某个菜单项时，该菜单项会展开并且占据整个菜单的宽度，而其他菜单项则会被压缩并隐藏。实现手风琴式菜单效果可以使用 CSS3 中的 transition 和 transform 属性。
以下是实现手风琴式菜单的步骤：
首先，需要将菜单项垂直排列，并设置每个菜单项的高度、宽度和边框。
然后，需要设置每个菜单项的默认状态和展开状态。默认状态下，每个菜单项的宽度为菜单的整体宽度除以菜单项的数量，同时要将 overflow 属性设置为 hidden，这样可以隐藏菜单项中超出宽度的部分。展开状态下，点击某个菜单项后，该菜单项的宽度为菜单的整体宽度，同时要将 overflow 属性设置为 visible，这样可以显示菜单项中超出宽度的部分。
最后，需要添加一个 CSS3 的 transition 属性，以实现菜单项展开时的动画效果。可以设置 transition 属性的 duration、timing-function 和 delay 属性，来控制动画的持续时间、速度和延迟。
下面是一个手风琴式菜单的示例代码：
<div class="menu">
<div class="menu-item">菜单项 1</div>
<div class="menu-item">菜单项 2</div>
<div class="menu-item">菜单项 3</div>
<div class="menu-item">菜单项 4</div>
</div>.menu {
display: flex;
flex-direction: column;
height: 200px;
width: 300px;
}
.menu-item {
height: 50px;
width: calc(100% / 4);
border: 1px solid #ccc;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.menu-item:hover {
cursor: pointer;
}
.menu-item.active {
width: 100%;
overflow: visible;
}其中，.menu 为菜单容器的样式，.menu-item 为每个菜单项的样式。在 .menu-item 中，设置了默认状态下的宽度为菜单整体宽度除以菜单项数量，展开状态下的宽度为菜单整体宽度，并且添加了 transition 属性来实现动画效果。在 .menu-item.active 中，设置了展开状态下的样式，并且通过添加 active 类来实现菜单项的展开和收缩。