幽灵菜单

介绍

幽灵菜单（Ghost Menu）是一种常见于前端开发中的UI设计模式，它是一种隐藏式菜单，只有在特定条件下才会显示。常见的应用场景是在移动端应用或响应式网站中，为了节省页面空间，隐藏不常用的菜单项。在用户需要使用菜单时，通过点击或滑动等操作触发显示菜单。

实现方式

实现幽灵菜单有多种方式，其中一种常用的方式是使用CSS3中的transition和transform属性，通过对菜单容器的高度或宽度进行动画变换来实现菜单的显示和隐藏。其中需要注意的是，在菜单容器的高度/宽度变化时，需要对子菜单/按钮等元素进行样式上的调整，以保证菜单的美观和实用性。

<div class="menu-container">
    <div class="menu-button">
        <i class="fa fa-bars"></i>
    </div>
    <ul class="menu-list">
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
        <li><a href="#">菜单项3</a></li>
        <li><a href="#">菜单项4</a></li>
    </ul>
</div>

.menu-container {
    position: relative;
}
.menu-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}
.menu-container.active .menu-list {
    display: block;
    transition: all .3s ease-in-out;
    transform: translateY(0);
}

上述代码中，通过初始设置.menu-list为display:none，在.menu-container上添加position:relative，再在.menu-list上使用position:absolute进行定位。然后，在菜单按钮.menu-button上绑定事件，在点击时通过给.menu-container添加.active类来触发菜单的显示/隐藏。通过.menu-container.active .menu-list的样式设置来控制菜单项的变换。

注意事项

• 必须考虑多设备兼容性问题，不同设备的菜单显示方式需不同
• 当菜单项较多时，需要考虑滚动条的处理，以保证用户体验
• 菜单样式需美观实用，建议使用现成的UI框架，如Bootstrap、MaterialDesign等

参考资料

• 菜单设计：幽灵菜单