制作一个动态的左侧导航栏

制作动态的左侧导航栏可以使用HTML、CSS和JavaScript。以下是一个简单的示例代码：

HTML代码：

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

CSS代码：

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #ccc;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar li {
  margin: 0;
  padding: 0;
}

.sidebar a {
  display: block;
  padding: 10px;
  color: #000;
  text-decoration: none;
}

.sidebar a:hover {
  background-color: #999;
  color: #fff;
}

.sidebar .active a {
  background-color: #999;
  color: #fff;
}

JavaScript代码：

var links = document.querySelectorAll('.sidebar a');

for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('click', function() {
    var current = document.querySelector('.active');
    current.classList.remove('active');
    this.parentNode.classList.add('active');
  });
}

在这个示例中，我们首先创建了一个包含导航菜单的<div>元素，并使用CSS设置了它的样式。在JavaScript中，我们使用querySelectorAll()方法选择所有的超链接，并为它们添加了一个点击事件监听器。当用户单击一个链接时，JavaScript会使用classList属性添加或删除一个名为“active”的类，用于突出显示当前选定的导航链接。