当前位置：首页 > JavaScript

不用js实现导航栏隐藏

2026-01-31 08:33:05JavaScript

使用纯CSS实现导航栏隐藏

通过CSS的position、transform和过渡效果可以实现导航栏的隐藏与显示。以下是一个常见的实现方式：

<style>
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #333;
    transition: transform 0.3s ease;
  }

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

  .content {
    padding-top: 60px;
  }
</style>

<div class="navbar"></div>
<div class="content">
  <!-- 页面内容 -->
</div>

利用滚动事件和CSS类切换

虽然不使用JavaScript，但可以通过CSS的:hover或:focus伪类来触发导航栏显示：

不用js实现导航栏隐藏

.navbar {
  position: fixed;
  top: -50px;
  width: 100%;
  height: 60px;
  background: #333;
  transition: top 0.3s;
}

body:hover .navbar {
  top: 0;
}

使用CSS动画关键帧

通过@keyframes创建动画效果来控制导航栏的显示与隐藏：

不用js实现导航栏隐藏

@keyframes slideDown {
  from { top: -60px; }
  to { top: 0; }
}

@keyframes slideUp {
  from { top: 0; }
  to { top: -60px; }
}

.navbar {
  position: fixed;
  top: -60px;
  width: 100%;
  height: 60px;
  background: #333;
  animation: slideDown 0.5s forwards;
}

.navbar:hover {
  animation: slideUp 0.5s forwards;
}

利用CSS的:target伪类

通过URL片段标识符和:target伪类实现导航栏切换：

<style>
  .navbar {
    position: fixed;
    top: -60px;
    width: 100%;
    height: 60px;
    background: #333;
    transition: top 0.3s;
  }

  .navbar:target {
    top: 0;
  }
</style>

<a href="#show-nav">显示导航栏</a>
<a href="#">隐藏导航栏</a>
<div id="show-nav" class="navbar"></div>

使用CSS的checkbox hack技术

通过隐藏的复选框和相邻兄弟选择器实现状态切换：

<style>
  #nav-toggle {
    display: none;
  }

  .navbar {
    position: fixed;
    top: -60px;
    width: 100%;
    height: 60px;
    background: #333;
    transition: top 0.3s;
  }

  #nav-toggle:checked + .navbar {
    top: 0;
  }
</style>

<label for="nav-toggle">切换导航</label>
<input type="checkbox" id="nav-toggle">
<div class="navbar"></div>

这些方法都无需JavaScript，仅通过CSS实现了导航栏的隐藏和显示功能，可以根据具体需求选择合适的方式。

标签: js