使用媒体查询的响应式菜单 - 教程
使用媒体查询的响应式菜单 - 教程
HTML
在 HTML 中，我们有标题和菜单。在菜单项中，我们有桌面和移动元素。
屏幕大于500px时显示桌面，小于500px时显示手机。
在移动类中，我们将添加一个汉堡包 svg 图标。
在桌面类中，我们将添加一些菜单项。
CSS
首先，我们将使用 flexbox 对齐左侧的标题和右侧的菜单。
然后我们将设置填充、高度和颜色。
.导航{
显示：弯曲；
justify-content: 之间的空格；
对齐项目：居中；
填充：0 30px；
高度：60px；
颜色：#fff;
背景颜色：rgba(0, 0, 0, .2);
}
现在我们将为桌面类中的所有 span 元素添加样式。这意味着我们正在为所有菜单项设置样式。
我们只需设置一些填充，光标到指针，添加一点过渡并设置 1 像素的透明边框。
我们添加透明边框的原因是因为在悬停时，它会变成白色，如果我们现在没有添加透明边框，它会增加大小，这是我们不希望的。
.desktop 跨度 {
填充：5px 10px；
光标：指针；
过渡：.3s；
边框：1px 实心透明；
}
现在我们正在为菜单项设置悬停样式。
我们将设置顶部和底部边框颜色，并添加过渡，使颜色变化平滑。
.desktop 跨度：悬停 {
边框底部颜色：#fff；
边框顶部颜色：#fff；
过渡：.3s；
}
现在让我们将桌面类设置为不可见。我们稍后会在媒体查询中覆盖它。
。桌面 {
显示：无；
}
现在让我们为移动类中的汉堡包 svg 设置光标指针。
.mobile svg {
光标：指针；
}
并且还设置了移动元素不可见。与桌面相同。
。移动的 {
显示：无；
}
现在，使用媒体查询，我们正在检测屏幕何时小于 50 像素，并将显示属性从无覆盖到阻塞。
@media only screen and (max-width: 500px) {
。移动的 {
显示：块；
}
}
当屏幕大于 501 像素时，我们将覆盖桌面的显示属性，使其可见。
@media only screen and (min-width: 501px) {
。桌面 {
显示：弯曲；
}
}
就是这样。您现在可以在 svg click 上将菜单项添加到移动类。
您可以通过视频教程找到完整代码 这里 .
感谢您的阅读。 ❤️
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
浙公网安备 33010602011771号