位置: 编程技术 - 正文

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

  • 待抵扣进项税额转入进项税额
  • 购买性支出和转移性支出财政职能发挥方面有何不同
  • 个人所得税劳务报酬范围
  • 发票红票和退票区别在哪
  • 销售使用过的汽车如何缴纳增值税
  • 个体户开运输发票怎么开
  • 股权评估与资产评估的关系
  • 专利捐献
  • 其它应付款是否可以直接冲收入呢?
  • 退休人员返聘工资按工资薪金还是劳务报酬
  • 取得与收益相关的政府补助会计分录
  • 发票冲销后还能用吗
  • 委托贷款利息收入账务处理
  • 员工预借差旅费属于什么科目
  • 计提本月应缴纳增值税
  • 增值税普通发票税率
  • 固定资产领用材料进项税处理
  • 为什么发票查验不出
  • 公司减少注册资本的程序
  • 高新企业所得税税率10%
  • 2019年以后转登记为小规模纳税人有无时间要求?
  • 预计负债 负债
  • 固定资产折旧有几类
  • 公司内收取的礼金
  • 微软官方教你如何验机
  • linux怎么设置
  • 升级鸿蒙系统后
  • 报销差旅费退回余款填什么凭证
  • 确认坏账需要纳税调整吗
  • 小规模纳税人的专票可以抵税吗
  • 为什么iphone手机闹钟定了不响
  • 包装物如何做会计分录
  • 筹建期间费用计什么科目
  • 电脑取消共享文件夹
  • 交契税需要什么东西
  • dcc是什么文件
  • html中a标签的作用
  • 长期借款利息费用的资本化账务处理
  • php密码修改
  • framework core
  • 通讯费补贴如何入账
  • php使用redis缓存技术
  • lxml&xpath一站式教学
  • 【超用心整理】Markdown常用语法介绍,看这一个就够了
  • unzip解压命令参数
  • 预缴增值税借方余额
  • 外账和内账哪个比较有发展
  • 前端面试题汇总.pdf
  • mongodb如何修改数据
  • 实施资本公积金的目的
  • 企业应纳税所得额是指什么
  • 六税两费减半征收政策2023
  • MySQL数据库结构设计图
  • 小规模纳税人都是3%吗
  • 顺流交易为什么不考虑出售比例
  • 坏账准备的会计分录例题
  • 收据 和发票
  • 水利基金和印花税会计分录
  • 单位租个人房子租房合同
  • 什么是资产减值准备计提
  • CentOS6.9+Mysql5.7.18源码安装详细教程
  • mysql存文章的字段设置为多大?
  • Win10预览版桌面图标和任务栏不翼而飞怎么办?
  • mac 设置
  • linux挂载windows共享文件命令
  • 电脑游戏战争策略游戏
  • ctd module
  • mac10.95升级
  • linux怎么安装sh
  • windows运行nodejs
  • android开发环境是什么
  • 安卓 unity
  • jquery.upload.js
  • JavaScript Array对象详解
  • javascript还有人用吗
  • jq监听input框value值
  • 菜鸟 javascript
  • 力所能及之处,定当竭尽所能
  • 地税局属于国家公务员吗
  • 如何进行税务筹划的方法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设