不用js实现导航栏隐藏

使用纯CSS实现导航栏隐藏

通过CSS的position、transform和transition属性可以实现无需JavaScript的导航栏隐藏效果。以下是一种常见方法：

<nav class="navbar">
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">服务</a>
</nav>

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
  transition: transform 0.3s ease;
}

.navbar.hide {
  transform: translateY(-100%);
}

利用:hover伪类触发显示

通过CSS的:hover伪类可以在用户鼠标悬停时显示导航栏：

.navbar {
  height: 50px;
  overflow: hidden;
  transition: height 0.3s;
}

.navbar:hover {
  height: auto;
}

使用:focus-within实现点击显示

:focus-within伪类可以在用户与导航栏交互时保持显示状态：

.navbar {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.navbar:focus-within {
  height: auto;
}

结合checkbox hack技术

利用隐藏的复选框和:checked伪类可以实现点击切换：

<input type="checkbox" id="nav-toggle">
<label for="nav-toggle">菜单</label>
<nav class="navbar">
  <a href="#">链接1</a>
  <a href="#">链接2</a>
</nav>

#nav-toggle {
  display: none;
}

.navbar {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}

#nav-toggle:checked ~ .navbar {
  max-height: 500px;
}

响应式设计的隐藏方案

在媒体查询中根据不同屏幕尺寸隐藏导航栏：

@media (max-width: 768px) {
  .navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
    transition: transform 0.3s;
  }

  .navbar.active {
    transform: translateY(0);
  }
}

这些方法均无需JavaScript，仅通过CSS即可实现导航栏的隐藏和显示效果，适合对性能有要求或需要简化代码的场景。