不用js实现导航栏隐藏
使用纯CSS实现导航栏隐藏
方法一：使用display: none属性
通过CSS的display属性控制导航栏的显示与隐藏。添加一个切换类，通过用户交互（如点击按钮）触发隐藏效果。
<style>
.nav { background: #333; padding: 1rem; }
.hide-nav { display: none; }
</style>
<button onclick="document.querySelector('.nav').classList.toggle('hide-nav')">
切换导航
</button>
<nav class="nav">导航内容</nav>方法二：使用visibility: hidden
与display: none不同，visibility: hidden会保留元素占位空间，仅视觉上隐藏。
<style>
.nav { visibility: visible; }
.invisible { visibility: hidden; }
</style>
<button onclick="document.querySelector('.nav').classList.toggle('invisible')">
隐藏导航
</button>方法三：通过opacity淡出
结合transition实现平滑的淡入淡出效果，适合需要动画过渡的场景。
<style>
.nav { opacity: 1; transition: opacity 0.3s; }
.fade-out { opacity: 0; pointer-events: none; }
</style>
<button onclick="document.querySelector('.nav').classList.toggle('fade-out')">
淡出导航
</button>方法四：利用transform移出视口
将导航栏平移至屏幕外，性能优化较好，适合移动端。
<style>
.nav { transform: translateX(0); transition: transform 0.3s; }
.slide-out { transform: translateX(-100%); }
</style>
<button onclick="document.querySelector('.nav').classList.toggle('slide-out')">
滑动隐藏
</button>方法五：CSS伪类触发隐藏
通过:hover或:focus等伪类实现无脚本交互，但交互灵活性较低。
<style>
.toggle-btn:focus + .nav { display: none; }
</style>
<button class="toggle-btn">聚焦隐藏</button>
<nav class="nav">导航内容</nav>注意事项
- 可访问性：隐藏时需确保键盘导航仍可操作，可配合
aria-hidden属性。 - 布局影响：
display: none会破坏文档流，而visibility和opacity不会。 - 兼容性：上述方法均支持主流浏览器，旧版本IE需测试
transform和transition的兼容性。
