帮我用HTMLCSSJS写一个垂直菜单特效

这里是一个基本的垂直菜单特效代码示例：

HTML代码：

<div class="menu">
  <ul>
    <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>

CSS代码：

.menu {
  width: 200px;
  background-color: #f2f2f2;
  border-radius: 5px;
}

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

.menu li {
  margin: 0;
  border-bottom: 1px solid #ccc;
}

.menu li:last-child {
  border-bottom: none;
}

.menu a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.menu a:hover {
  background-color: #ccc;
}

JS代码：

// 点击菜单项时添加/移除 active 类
var menuItems = document.querySelectorAll('.menu li a');

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', function() {
    var current = document.getElementsByClassName('active');
    current[0].className = current[0].className.replace(' active', '');
    this.className += ' active';
  });
}

这个垂直菜单特效会在点击菜单项时添加一个 active 类，以突出显示当前选定的菜单项。你可以根据自己的需求进行修改和定制。