首页 > 其他分享 >使用媒体查询的响应式菜单 - 教程

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

时间:2022-09-05 00:25:02浏览次数:97  
标签:教程 菜单 桌面 边框 添加 设置 菜单项 查询 我们

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

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

相关文章

  • docker实战教程(一):安装
    centosdocker安装docker并非是一个通用的容器工具,它依赖于已存在的linux内核环境。docker实质上是在已运行的linux环境下制造了一个隔离的文件环境,因此它执行的效率几乎......
  • MyBatis 五 ---查看详情&&条件查询
    查看详情1、编写接口方法:Mapper接口参数:id返回结果:Brand   2、编写SQL语句:SQL映射文件;参数占位......
  • 查询数字的最邻近
        这道题目要用二分+桶排的方式解决函数:l~r找vc:靠左/右(‘l’/‘r’)靠左和靠右用STL函数二分就行,这里讲一下思路,二分出最靠左/右的v值(but二维,在but[v][0~len......
  • [SDR] GNU Radio 系列教程(二) —— 绘制第一个信号分析流程图
    目录1、前言2、启动GNURadio3、新增块4、运行本文视频参考链接1、前言本文将介绍如何在GNURadio中创建和运行第一个流程图。2、启动GNURadioGNURadioCompa......
  • Oracle根据用户名和表名查询表的字段和字段类型等信息
    1 该用户下所有表的字段筛选方法selecta.column_nameasuploadcolumnfromuser_tab_columnsawherea.DATA_TYPE='VARCHAR2'anda.TABLE_NAME='DCS_MED......
  • SQL server 2012 安装教程
    server2012安装教程链接:https://pan.baidu.com/s/1TgS0FHB_Rc9mvpO89QiUtQ?pwd=gyiq提取码:gyiq--来自百度网盘超级会员V3的分享点击“setup.exe”点击左侧"安装",......
  • 组合控件——顶部导航栏——溢出菜单OverflowMenu
       点击导航栏右边的三点图标,会弹出溢出菜单OverflowMenu,意指导航栏不够放了、溢出来了。 溢出菜单的菜单项也在res\menu下面的XML文件中定义,不同之处是多了个sh......
  • PostgreSQL-查询
    检索过程或从数据库中检索数据的命令称为查询。在SQL中,SELECT命令用于指定查询。SELECT命令的一般语法是:[WITHwith_queries]SELECTselect_listFROMtable_express......
  • SVN使用教程总结
    SVN简介:为什么要使用SVN?程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本。Subversion......
  • 超详细 VS Code 配置C/C++教程
    写在前面如果您使用的电脑内存\(\leq4\texttt{GB}\),建议您使用Dev-C++,否则会到时内存占用爆满,体验感不佳。网上的很多教程都不够详细,这里我把每一步、每一个操作都详......