当前位置：首页 > HTML

h5怎么实现左边导航

2026-01-13 23:39:21HTML

实现H5左边导航的方法

使用HTML5和CSS3可以轻松实现左边导航栏。以下是几种常见的实现方式：

h5怎么实现左边导航

固定定位导航栏

<div class="sidebar">
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </nav>
</div>
<div class="content">
  <!-- 页面主要内容 -->
</div>

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

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

.sidebar nav ul li a {
  display: block;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
}

.sidebar nav ul li a:hover {
  background-color: #555;
}

.content {
  margin-left: 220px;
  padding: 20px;
}

弹性布局实现

<div class="container">
  <aside class="sidebar">
    <!-- 导航内容 -->
  </aside>
  <main class="main-content">
    <!-- 页面主要内容 -->
  </main>
</div>

.container {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 250px;
  background-color: #f5f5f5;
  padding: 20px;
}

.main-content {
  flex: 1;
  padding: 20px;
}

响应式导航栏

对于移动设备友好的实现：

h5怎么实现左边导航

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    position: relative;
    height: auto;
  }

  .content {
    margin-left: 0;
  }
}

使用CSS框架

也可以使用现成的CSS框架如Bootstrap快速实现：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <div class="list-group">
        <a href="#" class="list-group-item active">首页</a>
        <a href="#" class="list-group-item">产品</a>
        <a href="#" class="list-group-item">服务</a>
      </div>
    </div>
    <div class="col-md-9">
      <!-- 主要内容 -->
    </div>
  </div>
</div>

添加交互效果

使用JavaScript为导航栏添加动态效果：

document.querySelectorAll('.sidebar nav ul li a').forEach(link => {
  link.addEventListener('click', function() {
    // 移除所有active类
    document.querySelectorAll('.sidebar nav ul li a').forEach(el => {
      el.classList.remove('active');
    });
    // 为当前点击项添加active类
    this.classList.add('active');
  });
});

以上方法可根据具体需求选择或组合使用，实现功能完善、美观的左边导航栏。

分享给朋友：