悬浮菜单导航，赋予网站灵动之美

2023-09-26 18:31:20

HTML、CSS和JS协力构建炫酷悬浮菜单导航

构建菜单导航框架

打造一个出色的菜单导航的第一步是从HTML着手，它负责构建框架结构。我们使用一个容器div来容纳整个菜单，然后在其中包含一个导航列表ul，它又由一系列列表项li组成，每个li对应一个菜单选项。代码如下：

<div class="menu-container">
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品与服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

美化菜单导航样式

接下来，让我们用CSS来美化菜单的视觉效果，让它更加赏心悦目。我们设置容器的宽度、高度和背景颜色，然后定义导航列表的样式，使其居中对齐。每个菜单项之间添加适当的间距，并调整链接的文本颜色、大小和鼠标悬停时的颜色变化。代码如下：

.menu-container {
  width: 100%;
  height: 50px;
  background-color: #222;
}

.menu {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu li {
  margin-right: 20px;
}

.menu a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}

.menu a:hover {
  color: #f00;
}

添加悬浮交互效果

最后，我们用JS来让菜单导航活起来，为用户带来互动体验。当鼠标悬停在某个菜单项上时，它会高亮并显示一个包含该菜单项名称的提示框。代码如下：

const menuItems = document.querySelectorAll('.menu li');

menuItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    item.classList.add('active');
    const itemName = item.querySelector('a').textContent;
    const tooltip = document.createElement('div');
    tooltip.classList.add('tooltip');
    tooltip.innerHTML = itemName;
    item.appendChild(tooltip);
  });

  item.addEventListener('mouseout', () => {
    item.classList.remove('active');
    const tooltip = item.querySelector('.tooltip');
    tooltip.remove();
  });
});