使用媒体查询的响应式菜单 - 教程

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/12336/10280412