网页js侧边栏菜单代码

网页侧边栏菜单是网站导航的重要组成部分，它允许用户快速访问网站的不同部分。以下是一个简单的JavaScript侧边栏菜单代码示例，以及一些基础概念和相关优势。

基础概念

HTML结构：定义菜单的结构。
CSS样式：设置菜单的外观和布局。
JavaScript功能：添加交互性，如展开/折叠子菜单。

类型

静态菜单：固定内容的菜单。
动态菜单：根据用户权限或网站状态动态生成内容。

应用场景

企业网站：清晰的导航有助于展示公司的不同部门和服务。
电商网站：帮助用户快速找到产品类别和具体商品。
博客和个人网站：方便读者浏览文章和页面。

示例代码

以下是一个简单的侧边栏菜单的HTML、CSS和JavaScript代码示例：

HTML

<div id="sidebar">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a>
      <ul>
        <li><a href="#web-design">Web Design</a></li>
        <li><a href="#seo">SEO</a></li>
      </ul>
    </li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

CSS

#sidebar {
  width: 200px;
  background-color: #f4f4f4;
  padding: 20px;
}

#sidebar ul {
  list-style-type: none;
  padding: 0;
}

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

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

#sidebar ul ul {
  display: none;
  padding-left: 20px;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const subMenus = document.querySelectorAll('#sidebar ul ul');

  subMenus.forEach(subMenu => {
    const parentLink = subMenu.parentElement.querySelector('a');
    parentLink.addEventListener('click', function(e) {
      e.preventDefault();
      subMenu.style.display = subMenu.style.display === 'block' ? 'none' : 'block';
    });
  });
});