标签：教程 菜单 桌面 边框 添加 设置 菜单项 查询 我们
使用媒体查询的响应式菜单 - 教程
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
标签：教程,菜单,桌面,边框,添加,设置,菜单项,查询,我们 来源： https://www.cnblogs.com/amboke/p/16656629.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。