首先通过CSS媒体查询控制导航图标在不同屏幕下的显示与隐藏，接着利用JavaScript切换active类实现菜单展开收起动画，结合max-height过渡解决height:auto无动画问题，再通过sr-only类隐藏文本但保留可访问性，最后使用transform实现汉堡图标到叉号的形态变化，整体实现流畅的响应式导航切换效果。
响应式导航栏中的图标显示与隐藏（show/hide）通常用于移动端菜单切换，比如“汉堡图标”展开或收起导航。通过CSS结合少量JavaScript可以实现平滑的 hide/show 效果。以下是具体实现技巧。
1. 使用CSS媒体查询控制图标的显示与隐藏
根据屏幕宽度决定哪些图标显示，哪些隐藏。例如：在桌面端显示文字导航，在移动端只显示汉堡图标。
示例： ```css .nav-menu { display: none; }.nav-toggle { display: block; }
@media (min-width: 768px) { .nav-menu { display: flex; }
.nav-toggle { display: none; } }
<p>这里，<strong>.nav-toggle</strong> 是汉堡图标按钮，在小屏幕上显示；大屏幕则隐藏，同时显示完整导航 <strong>.nav-menu</strong>。</p>
<H3>2. 利用CSS类切换实现 show/hide 动画</H3>
<p>通过JavaScript为导航菜单添加或移除 active 类，配合CSS过渡实现淡入、滑动等效果。</p>
<font color="#555555">示例：</font>
```css
.nav-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.nav-menu.active {
max-height: 300px; /* 足够容纳所有菜单项 */
}JavaScript 控制类切换：
```javascript document.querySelector('.nav-toggle').addEventListener('click', function() { const menu = document.querySelector('.nav-menu'); menu.classList.toggle('active'); }); ```这种max-height + 过渡技巧能实现平滑展开/收起，避免 height: auto 不支持动画的问题。
立即学习“前端免费学习笔记（深入）”；
3. 隐藏元素但保持可访问性
使用视觉上隐藏但对屏幕阅读器可见的方式处理图标文本。
示例： ```css .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } ```这样“关闭菜单”或“打开菜单”的文字对辅助设备仍可读，但不影响界面美观。
4. 图标状态切换（如汉堡变叉）
使用伪元素或 transform 实现图标形态变化。
```css .bar:before, .bar:after { content: ''; position: absolute; width: 100%; height: 2px; background: #000; transition: transform 0.3s ease; }.nav-toggle.active .bar:before { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active .bar:after { transform: rotate(-45deg) translate(5px, -5px); }
<p>点击时给按钮添加 active 类，即可实现汉堡图标变为叉号。</p> 基本上就这些核心技巧。结合媒体查询、类切换和过渡动画，就能做出流畅的响应式导航图标 hide/show 效果。
