html侧边菜单

HTML侧边菜单可以使用以下方法实现：

1. 使用HTML `<ul>`和`<li>`标签创建菜单列表。
2. 使用CSS样式设置菜单的样式和布局，例如设置菜单的宽度、高度、颜色、边框等。
3. 使用JavaScript处理菜单的交互效果，例如点击菜单项后展开子菜单、折叠菜单项等。

以下是一个简单的HTML侧边菜单示例：

<div class="sidebar">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li>
      <a href="#">菜单项2</a>
      <ul>
        <li><a href="#">子菜单项1</a></li>
        <li><a href="#">子菜单项2</a></li>
      </ul>
    </li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</div>

CSS样式：

.sidebar {
  width: 200px;
  height: 100%;
  background-color: #ccc;
  padding: 20px;
}

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

.sidebar li {
  margin-bottom: 10px;
}

.sidebar a {
  display: block;
  color: #333;
  text-decoration: none;
}

.sidebar ul ul {
  display: none;
}

.sidebar li:hover ul {
  display: block;
}

JavaScript代码：

var menuItems = document.querySelectorAll('.sidebar li');

for (var i = 0; i < menuItems.length; i++) {
  var menuItem = menuItems[i];
  var subMenu = menuItem.querySelector('ul');
  if (subMenu) {
    menuItem.addEventListener('click', function(e) {
      e.preventDefault();
      subMenu.classList.toggle('active');
    });
  }
}

在这个示例中，我们使用CSS设置了侧边菜单的样式和布局，包括设置宽度、背景颜色、内边距、边框等。然后使用JavaScript实现了菜单的交互效果，包括点击菜单项后展开或折叠子菜单。