制作响应式菜单栏的关键在于使用 @media 查询来针对不同的屏幕大小应用不同的样式。以下是一些关键的步骤和属性：
<nav class="menu">
<ul class="menu-list">
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
<li><a href="#">菜单项4</a></li>
</ul>
<button class="menu-button"><span></span><span></span><span></span></button>
</nav>.menu {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px;
}
.menu-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.menu-list li {
margin: 0 10px;
}
.menu-list li a {
color: #fff;
text-decoration: none;
}
.menu-button {
display: none;
}@media (max-width: 768px) {
.menu-list {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #333;
padding: 10px;
}
.menu-list li {
margin: 10px 0;
}
.menu-button {
display: block;
}
}这样，当屏幕宽度小于 768 像素时，菜单列表将变为垂直方向排列，并且隐藏起来。菜单按钮会显示出来，点击后可以展开或收起菜单列表。
.menu-list {
/* ... */
transition: all 0.3s ease-in-out;
transform: translateY(-100%);
}
.menu-list.active {
transform: translateY(0%);
}这里使用了 CSS3 过渡效果和 transform 属性来实现菜单列表的展开和收起。需要在 JavaScript 中监听菜单按钮的点击事件，然后切换 .active 类来触发动画效果。
总之，使用 @media 查询和 CSS3 动画可以轻松地制作出响应式菜单栏。