使用媒体查询的响应式菜单 - 教程
HTML
在 HTML 中,我们有标题和菜单。在菜单项中,我们有桌面和移动元素。
屏幕大于500px时显示桌面,小于500px时显示手机。
在移动类中,我们将添加一个汉堡包 svg 图标。
在桌面类中,我们将添加一些菜单项。
<div class="nav">
<div>标题</div>
<div class="menu">
<div class="mobile">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
<div class="desktop">
<span>家</span>
<span>关于</span>
<span>接触</span>
</div>
</div>
</div>
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 版权协议,转载请附上原文出处链接和本声明
本文链接:https://www.qanswer.top/14322/12480500
标签:教程,菜单,桌面,边框,添加,设置,菜单项,查询,我们 From: https://www.cnblogs.com/amboke/p/16656629.html