要制作响应式的折叠菜单效果,你可以使用CSS的Media Queries和CSS选择器来控制菜单的显示和隐藏。

首先,你可以创建一个菜单的HTML结构,如下所示:

html

接下来,你可以使用CSS来设置菜单的样式和动画效果:

css
.menu ul {
display: none;
}

.menu input[type="checkbox"]:checked ~ ul {
display: block;
}

@media screen and (min-width: 768px) {
.menu ul {
display: flex;
}

.menu ul li {
margin-right: 20px;
}
}

在上面的例子中,首先我们隐藏了菜单的`

    `元素。然后,我们使用CSS选择器和邻接兄弟选择器(`~`)来在菜单被点击时显示菜单。最后,我们使用CSS的Media Queries来控制在较大屏幕上,菜单以水平方式显示的样式。

    需要注意的是,上面的例子只是基本的折叠菜单效果,你可以根据需要自定义样式和动画效果。

    希望对你有帮助!