如何实现具有框架的菜单效果，以及如何使左侧菜单根据顶部菜单的变化而变化_前端框架做成上面头部和左边菜单的结构-优快云博客

本文链接：https://blog.youkuaiyun.com/TdMaster/article/details/133479777

本文介绍了如何使用HTML、CSS和JavaScript创建一个具有框架的菜单，实现顶部菜单变化时左侧菜单跟随选中。通过点击事件，左侧菜单项会根据顶部菜单项的状态改变样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Web开发中，菜单是网页中常见的导航元素，用于让用户快速访问不同的页面或功能。本文将介绍如何使用HTML和CSS来创建具有框架的菜单效果，并实现左侧菜单根据顶部菜单的变化而变化。

首先，让我们创建一个基本的HTML结构，包含一个顶部菜单和一个左侧菜单。以下是示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>菜单效果示例</title>
  <style>
    /* 样式重置 */
    body, ul, li {
      margin: 0;
      padding: 0;
    }
    
    /* 顶部菜单样式 */
    .top-menu {
      background-color: #f2f2f2;
      padding: 10px;
    }
    
    .top-menu ul {
      list-style-type: none;
      display: flex;
      justify-content: center;
    }
    
    .top-menu li {
      margin-right: 10px;
    }
    
    .top-menu li a {
      text-decoration: none;
      color: #333333;
      padding: 5px;
    }
    
    /* 左侧菜单样式 */
    .left-menu {
      background-color: #e6e6e6;
      width: 200px;
      padding: 10px;
    }
    
    .left-menu ul {
      list-style-type: none;
    }
    
    .left-menu li {
      margin-bottom: 5px;
    }
    
    .left-menu li a {
      text-decoration: none;
      color: #333333;
      padding: 5px;
    }
  </style>
</head>
<body>
  <div class="top-menu">
    <ul>
      <li><a href="#">菜单1</a></li>
      <li><a href="#">菜单2</a></li>
      <li><a href="#">菜单3</a></li>
    </ul>
  </div>
  
  <div class="left-menu">
    <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </div>
</body>
</html>

在上面的代码中，我们创建了一个顶部菜单和一个左侧菜单。顶部菜单使用<div>元素和<ul>、<li>元素来创建一个水平导航栏，每个菜单项都是一个链接(<a>元素)。左侧菜单也使用相同的结构，垂直地显示在页面的左侧。

现在，我们需要添加一些JavaScript代码来实现左侧菜单随着顶部菜单的变化而变化。以下是修改后的代码：

<!DOCTYPE html>
<html>
<head>
  <title>菜单效果示例</title>
  <style>
    /* 样式代码省略 */
  </style>
  <script>
    window.onload = function() {
      // 获取菜单元素
      var topMenuItems = document.querySelectorAll('.top-menu li');
      var leftMenuItems = document.querySelectorAll('.left-menu li');
      
      // 给每个顶部菜单项添加点击事件处理程序
      topMenuItems.forEach(function(item, index) {
        item.addEventListener('click', function() {
          // 移除所有菜单项的选中状态
          topMenuItems.forEach(function(item) {
            item.classList.remove('active');
          });
          leftMenuItems.forEach(function(item) {
            item.classList.remove('active');
          });
          
          // 添加当前菜单项的选中状态
          item.classList.add('active');
          leftMenuItems[index].classList.add('active');
        });
      });
    };
  </script>
</head>
<body>
  <!-- HTML代码省略 -->
</body>
</html>

在上面的代码中，我们使用JavaScript监听顶部菜单项的点击事件，并根据点击的菜单项索引将相应的左侧菜单项添加选中状态。首先，我们使用querySelectorAll方法获取所有的顶部菜单项和左侧菜单项。然后，使用forEach方法遍历顶部菜单项，并为每个菜单项添加点击事件处理程序。在点击事件处理程序中，首先移除所有菜单项的选中状态，然后为当前点击的菜单项添加选中状态。由于顶部菜单项和左侧菜单项是一一对应的，我们可以使用相同的索引来操作左侧菜单项。

最后，我们需要为选中的菜单项添加样式，以凸显其选中状态。我们可以在CSS样式中添加以下代码：

/* 选中菜单项样式 */
.active {
  background-color: #cccccc;
}

上述代码将为选中的菜单项添加背景色，以突出显示其选中状态。

通过上述的HTML、CSS和JavaScript代码，我们实现了具有框架的菜单效果，同时左侧菜单会随着顶部菜单的变化而变化。用户点击顶部菜单项时，对应的左侧菜单项将被选中，并突出显示。

希望这个示例能够帮助您实现所需的菜单效果。如有任何疑问，请随时提问。