在网站开发中，菜单栏常常是网站的重要组成部分，方便用户进行导航和操作。然而，有时候我们希望在某些情况下隐藏菜单栏，比如在移动端优化时为了减少页面占用空间，或者制作响应式网站时，在小屏幕设备上需要隐藏菜单栏，同时在点击汉堡按钮时才展现出来。在本文中，我们将会介绍一些基本的 css 技巧，以实现菜单栏的隐藏与展现。
- 利用 display 属性控制菜单栏的显示与隐藏
display 属性是 CSS 中一个很基础的属性，用于控制 HTML 元素的显示方式。该属性有多个参数，其中包括：block （块级元素）、inline （行内元素）、none（不显示）等几个常用值。
为了实现菜单栏的隐藏，在样式表中可以添加如下 CSS 代码：
.menu {
display: none;
}这样，当页面加载时，菜单栏就会被隐藏起来。如果我们要在点击汉堡按钮时再展现菜单栏，可以为该按钮绑定事件，点击时通过修改菜单栏元素的 display 属性为 block 进行展现。代码示例如下：
HTML 代码：
立即学习“前端免费学习笔记（深入）”；
<div class="menu-toggle">
<button>Toggle Menu</button>
</div>
<nav class="menu">
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</nav>CSS 代码：
.menu {
display: none;
}
/* 在移动端，菜单展现后将其置为 fixed 定位 */
@media screen and (max-width: 600px) {
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
padding: 2em;
box-sizing: border-box;
z-index: 9999;
}
}
/* 汉堡按钮样式 */
.menu-toggle button {
background-color: #000;
color: #fff;
padding: 0.6em;
border: none;
}
/* 展开菜单时的样式 */
.menu-toggle.active + .menu {
display: block;
}JavaScript 代码：
const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');
toggleBtn.addEventListener('click', function() {
this.parentElement.classList.toggle('active');
menu.classList.toggle('active');
});如上所示，我们利用了 CSS 中的伪类选择器 :active 和 JavaScript 中的 classList 属性，在点击汉堡按钮时为其添加 .active 类，展开菜单时修改菜单栏元素的 display 属性为 block，实现菜单栏的展现与隐藏。
- 通过 CSS 动画控制菜单栏的滑动展现
除了利用 display 属性控制元素的显示和隐藏外，CSS 中还有许多有趣的动画技巧，可以帮助我们实现更为流畅的展现效果。其中，利用 CSS 中的 transition 属性，可以实现一些简单的元素过渡效果。
具体来说，在菜单栏的展现中，可以为菜单栏元素添加过渡效果，将其从隐藏状态转化为展现状态。
添加如下 CSS 代码：
.menu {
position: fixed;
top: 0;
left: -100%;
width: 80%;
height: 100%;
background-color: #fff;
padding: 2em;
box-sizing: border-box;
transition: left 0.3s ease-in-out;
}
/* 展开菜单时加上移动效果 */
.menu.active {
left: 0;
}在菜单栏元素 .menu 上设置 position 为 fixed，使其保持固定位置，然后将 left 属性设置为 -100%。这样一来，菜单栏就会被隐藏在页面左侧，位于用户屏幕外。同时，我们为菜单栏元素设置了一个过渡效果：当其 left 属性发生变化时，通过 ease-in-out 的缓动效果进行过渡，以实现更为平滑的展现效果。
当点击汉堡按钮时，我们利用 JavaScript 代码使菜单栏元素的 left 属性从 -100% 变为 0，同时将其对应的类 .active 添加至菜单栏元素上。代码示例如下：
const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');
toggleBtn.addEventListener('click', function() {
this.parentElement.classList.toggle('active');
menu.classList.toggle('active');
});在汉堡按钮的点击事件中，我们使用了 JavaScript 中的 classList 属性，通过切换 .active 类，控制菜单栏的展现和隐藏。同时，在 .menu 元素上添加了 .active 类时，菜单栏元素的 left 属性从 -100% 变为 0，通过设置的过渡效果产生了平滑的滑动效果。
总结
在网站开发的过程中，菜单栏的展现方式是一个经常要考虑的问题。利用 CSS 属性的各种技巧，可以实现菜单栏的隐藏与滑动展现等不同的展现方式，为用户提供更为便利的操作体验。希望本文对大家在网站开发方面有所启发，帮助大家实现更为优秀的网页设计。
