苹果网格菜单的 JavaScript

苹果网格菜单主要是通过 CSS Grid 和 JavaScript 实现的。在 JavaScript 中，主要是通过监听菜单项的鼠标事件来实现菜单的显示和隐藏。以下是一个简单的示例代码：

<!-- HTML 结构 -->
<ul class="menu">
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
  <li><a href="#">菜单项4</a></li>
  <li><a href="#">菜单项5</a></li>
</ul>

<!-- CSS 样式 -->
.menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自适应网格布局 */
  grid-gap: 10px;
}

.menu li {
  background-color: #ccc;
  padding: 10px;
}

/* 隐藏菜单项 */
.menu li.hide {
  display: none;
}

/* JavaScript 代码 */
const menu = document.querySelector('.menu');
const menuItems = menu.querySelectorAll('li');

menu.addEventListener('mouseover', () => {
  // 显示所有菜单项
  menuItems.forEach(item => item.classList.remove('hide'));
});

menu.addEventListener('mouseout', () => {
  // 隐藏除第一个菜单项以外的其他菜单项
  menuItems.forEach((item, index) => {
    if (index > 0) {
      item.classList.add('hide');
    }
  });
});

在上面的代码中，我们首先使用 CSS Grid 实现了一个自适应网格布局的菜单。然后，我们通过 JavaScript 监听菜单的鼠标事件，在鼠标移入菜单时显示所有菜单项，在鼠标移出菜单时隐藏除第一个菜单项以外的其他菜单项。