位置: 编程技术 - 正文

CSS3 media queries结合jQuery实现响应式导航

编辑:rootadmin

推荐整理分享CSS3 media queries结合jQuery实现响应式导航,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

目的:

实现一个响应式导航,当屏幕宽度大于px时,效果如下:

当屏幕宽度小于px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来:

思路:

1.为了之后在菜单上绑定事件,并且不向DOM中添加多余的节点,在大屏幕中出现的导航和小屏幕中的下拉导航必须是一个。

所以我选择了将导航绝对定位。

2.默认导航列表是出现的,当屏幕宽度小于px时它隐藏,并且设置position,当屏幕宽度大于px时,它出现。或者,默认导航列表是隐藏的,当屏幕宽度大于px时它出现在右侧,小于时隐藏。

问题:

CSS3 media queries结合jQuery实现响应式导航

开始的时候,我选择了默认他出现,然后出现了一个问题——只要按过了按钮,屏幕放大之后导航列表就再也不会出现了。

代码如下:

于是我以为是我的思路出现了问题,我换成了默认他隐藏的方式。结果还是一样,只要按过了按钮,他就再也不会出现了。于是我开始怀疑jQuery。

解决:

然后我在F中发现,我按过按钮之后,他会出现这样一个样式:

原来这一切都是slideToggle搞的鬼,他是通过设置元素的内联样式让元素隐藏,这种方法设置的样式的优先级是三种方式中最高的,所以在CSS中设置的block根本没有用了。

要解决这个问题,可以使用js,也可以用一个优先级更高的方式:!important.

如果选择用!important的话,就需要设置导航列表是默认隐藏的,不然他永远都无法隐藏了。

最后的CSS代码如下:

总结:

不真正理解一个框架的原理就去用,是很危险的。

我之后试了一个jQuery的.css()方法,他同样是用内联的方式改变的元素的样式。

看样子需要研究一个jQuery是如何工作的了,这样应用的时候才能理解他的行为。

标签: CSS3 media queries结合jQuery实现响应式导航

本文链接地址:https://www.jiuchutong.com/biancheng/380731.html 转载请保留说明!

上一篇:jQuery视差滚动效果网页实现方法经验总结(jquery滚动到底部加载数据)

下一篇:json定义及jquery操作json的方法(js定义json对象)

  • 什么合同属于有效合同
  • 用人单位延迟给员工交社保怎么办
  • 2020年小规模纳税人增值税起征点
  • 其他综合收益影响所有者权益吗
  • 车船税是费用吗
  • 进项大于销项的会计分录怎么做?
  • 债转股资金
  • 事业单位如何计提工资
  • 职工福利基金提取规定
  • 受委托加工物资双方账务处理怎么做
  • 营改增的范围包括
  • 3%增值税率包括哪些
  • 消费税征收范围包括
  • 单位为员工报销的博士学费算什么费用
  • 购买材料,材料未验收入库,货款未付会计分录
  • 所得税汇算清缴补税的会计处理
  • 多缴个税账务处理
  • 金蝶标准版年末已经结账如果重新结账
  • 建立账套的简单操作
  • 利润调整分录
  • 员工离职补偿金可以税前扣除吗
  • 出口押汇申请书
  • 培训费没有发票怎么办
  • win10 0×0000007b怎么解决
  • 会计的运费怎么写分录
  • 隐藏资源管理器窗口
  • kb4592438安装失败
  • aspnet_admin.exe进程是安全的吗 aspnet_admin进程信息查询
  • 无形资产的确认与计量
  • 持有至到期投资减值准备
  • 固定资产未计提完毕怎么报废
  • 系统之家u盘重装系统流程
  • 固定资产如何做账务处理
  • 基建借款属于什么科目
  • 投资性房地产出售时其他综合收益
  • 如何导入并使用数据库
  • ros 2
  • 账龄分析法计提比例
  • 施工单位老板
  • java开发和运维
  • 已提足折旧固定资产改建支出 所得税怎么计算
  • pytorch .t()
  • 或有资产确认的前提为什么是
  • chrome网上应用商店在哪
  • 小规模纳税企业在应交增值税明细科目
  • 个体户税务分几种
  • 什么情况下需要满足m>>m
  • 退税流程怎么操作个人所得税2022
  • 发票遗失有什么影响
  • mysql中的null值和空
  • 上一年度所得税忘记计提了怎么办
  • 销售商品开票税目
  • 土地拍卖相关法律法规
  • 房地产开发土地使用税如何计算
  • 财务专用章的效力
  • 房地产开发企业开发成本包括哪些项目
  • sql中的存储过程是干嘛用的
  • 连接mysql数据出错1045
  • centos 安装chia
  • fedora s9
  • dos破解密码输入什么
  • 移动硬盘中安装系统
  • win10修复dllregisterserver
  • win10 win+l
  • cocos2d-x教程
  • Node.js中的全局变量有哪些
  • unity编辑工具软件介绍
  • unity 1
  • JavaScript中的数据类型分哪为两大类?
  • jquery中遍历指定的对象和数组是哪个方法
  • jq写css样式
  • 如何在电子税务局变更财务负责人
  • 地税发票查询官网查询
  • 新疆高龄补贴2024发放标准是多少
  • 国税怎么取消
  • 电子税务局怎么添加开票员
  • 增值税电子普通发票可以抵扣吗
  • 什么是审计的重要特征,也是审计的精髓
  • 城市维护建设税,教育费附加,地方教育费附加
  • 跨区域涉税事项报告表
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设