竖向菜单收缩问题，如IDEA中菜单

Question

竖向菜单，窗口缩小一段距离则收起一个图标，类似这种怎么处理呢，有插件或者ui组件吗？

截屏2024-03-07 下午12.21.51

截屏2024-03-07 下午12.24.21

Answer 1

引自免费微信小程序：皆我百晓生

在CSS和JavaScript的配合下，可以实现类似IDEA中菜单的竖向收缩功能。当窗口宽度缩小到一定程度时，菜单项会自动折叠并显示为图标。以下是一个基本的解决方案：

首先，你需要HTML结构来构建这种响应式的竖向菜单。假设你的菜单项包含文本和图标：

<div class="vertical-menu">
  <div class="menu-item">
    <button class="menu-btn">
      <i class="icon"></i>
      <span class="text">菜单项1</span>
    </button>
  </div>
  <!-- 更多菜单项 -->
</div>

然后，通过CSS媒体查询设置窗口宽度阈值，在窗口宽度低于这个阈值时隐藏文本并调整布局：

.vertical-menu {
  width: 200px; /* 原始菜单宽度 */
}

.menu-item {
  display: flex;
  align-items: center;
}

.menu-btn {
  width: 100%;
  white-space: nowrap;
}

.text {
  transition: opacity 0.3s ease-out;
}

@media (max-width: 400px) { /* 当窗口宽度小于400px时 */
  .text {
    opacity: 0;
    visibility: hidden;
  }
}

最后，使用JavaScript监听窗口大小变化，并在满足条件时切换菜单项的状态（例如，点击按钮显示/隐藏文本）：

window.addEventListener('resize', () => {
  const menuItems = document.querySelectorAll('.menu-item');
  
  if(window.innerWidth <= 400) {
    menuItems.forEach(item => {
      item.querySelector('.text').classList.add('collapsed');
    });
  } else {
    menuItems.forEach(item => {
      item.querySelector('.text').classList.remove('collapsed');
    });
  }
});

// 为每个按钮添加点击事件以展开或收起对应的文本
document.querySelectorAll('.menu-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const text = this.querySelector('.text');
    text.classList.toggle('collapsed');
  });
});

以上代码片段仅为示例，实际应用中请根据具体UI框架和需求进行调整。同时，为了更好的用户体验，你也可以考虑使用成熟的UI库如Bootstrap、Material-UI等，它们通常已经提供了类似的组件或者易于扩展的API来实现此功能。