位置: 编程技术 - 正文

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对象)

  • 生产成本年末转入什么科目
  • 贷款其他消费是指什么
  • 2021小规模纳税人减免增值税
  • 车间购买灯会计怎么做账
  • 平价转让股权如何交税
  • 无货源发货如何填写物流单
  • 供热企业不得抵扣的进项计算
  • 结转成本费用会计分录
  • 本年利润是负数的会计分录
  • 存货盘亏进项税额转出会计分录
  • 固定资产如何抵扣企业所得税
  • 一个订单只能申请一次退款吗
  • 没有订立合同的著作权属于什么人
  • 注销地税需要什么资料
  • 职工教育经费税前扣除标准2023年
  • 服装发票怎么进项抵扣
  • 资产减值损失汇算清缴调整表
  • 分期付款融资账务处理
  • 发票红冲作废是什么意思
  • 华为最新款手机2023款
  • 手机超过1万元有必要买吗
  • mac怎么同步
  • ajax无刷新技术
  • laravel5 使用try catch的实例详解
  • iis6配置php网站
  • 销售人员领用材料
  • mac清理垃圾怎么清理
  • win11快捷键大全
  • 转账收到支付宝电话
  • windows 11 build 21996.1 dev
  • 哪一年底,由linux基金会成立?
  • vue中响应式是什么意思
  • vue切换背景图片
  • 红字发票什么作用
  • yii2权威指南
  • 合宙air32f103 stlink
  • package.json详解
  • 深度学习之快速实现数据集增强的方法
  • ausearch命令
  • 对公账户的资金怎么转出
  • 分公司非独立核算怎么做账
  • 支付水电费如何做账务处理
  • 织梦图集的使用教程
  • 技术转移转化是干什么的
  • 计提工资大于实发工资企业所得税怎么算
  • 异地工程增值税按几个点预缴
  • 利息补缴税款加收利息计算
  • 账面成本与账面余额
  • SQL设置外键
  • 业务招待费报销制度及流程
  • 可供出售的价格基本上可以估计
  • 劳务费怎么要的回来
  • 以前年度税费减免税
  • 高速过路费抵扣增值税
  • 09年前的固定资产
  • 支付劳务费是劳务所在地吗
  • 印花税退回计入什么科目
  • 发票开错了记账凭证如何做?
  • 征收率和税率的区别举例
  • 什么是折旧费
  • win 10如何安装
  • window系统大全
  • mac的分辨率怎么调
  • Mac如何开启sip
  • 微软新品什么时候上市
  • 如何一键恢复win10设置
  • 将Linux中systemd的单元配置实例化的方法
  • win7纯净版系统多大
  • Unity3D游戏开发培训课程大纲
  • css优化提高性能的方法有哪些
  • perl-v
  • Unity3D游戏开发引擎
  • 浅析学校德育的个体智能发展功能
  • python的gym
  • android退出功能
  • js全局变量怎么定义
  • 电梯维护保养费按什么缴纳增值税
  • 会计餐费费的会计分录
  • 国税地税征管体制改革方案
  • 销货清单表格的制作方法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设