位置: 编程技术 - 正文

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

  • 转让无形资产可以免税吗
  • 已认证进项税转出怎样做账务处理
  • 工会经费计税依据包括社保吗
  • 应交税费明细科目怎么记账
  • 特许权使用费收入
  • 一般纳税人简易计税可以抵扣进项税额吗
  • 损益类科目是否可以转出
  • 企业所得税计提分录
  • 年底向员工客户发放、赠送实物的怎么缴个税
  • 延期申报预缴税款比例
  • 前年购买的设备怎么入账
  • 商品互换的概念
  • 无形资产的使用
  • 固定资产累计折旧借贷方向
  • 以前年度损益所得怎么算
  • 合同不含税怎么算
  • 3%增值税率包括哪些
  • 股权转让个人所得税会计分录
  • 专票记账联丢失了要罚款吗
  • 全额抵扣的发票怎么申报增值税
  • 不缴或少缴应纳税款的行为属于
  • 普通年金的概念和内涵
  • 分公司是小微企业总公司是一般纳税人,如何做合并报表
  • 苹果电脑进入安全模式按什么键
  • php中strrev
  • echarts地图不同地区设置不同的颜色
  • codeigniter 教程
  • 国有企业融资方案比较
  • 盛开的樱花和姬子的故事
  • 定期定额纳税申报
  • php反转字符串方法
  • 替票报销违法吗
  • 担保合同印花税税率怎么算
  • uniapp微信小程序广告
  • 公司请的临时工
  • wordpress图片模板
  • 手工凭证三级明细
  • 什么叫python
  • 分公司和总公司的税务和财务关系
  • 商业承兑汇票如何查询
  • 资产计税基础填资产原值吗
  • 增值税发票2年了还能开吗
  • 发票未认证跨月怎么办
  • 上年度会计凭证怎么填写
  • 微擎框架是开源的吗
  • 公司组织出国旅游可以不带钱吗
  • 车到4s店后还需办什么手续
  • SQL Server 2005 镜像构建手册(sql2005数据库同步镜像方案)
  • 确认应付职工薪酬怎么算
  • 个人所得税劳务所得
  • 多交增值税退税抵欠怎么处理
  • 营业外收入在资产负债表
  • 购进固定资产没有发票怎么入账
  • 跨月的发票还能入账吗
  • 企业自建房屋建设方案
  • 会计凭证移交凭证需要哪些程序
  • 应交税费对应的会计科目
  • 对账簿设置的要求是什么
  • 关于存储过程的描述
  • 有效减少win8关机时间的方法分享
  • win8还能用吗
  • 64位VMware虚拟机系统打不开怎么办?
  • solaris netstat
  • ubuntu 16.10
  • pe explorer
  • linux extundelete
  • windows 10 mobile apk
  • linux开机后怎么进去系统
  • win8.1中文版
  • win7如何查询电脑使用记录
  • caddll丢失
  • bootstrap怎么用
  • unity3d c语言
  • function函数的定义
  • Unity3D游戏开发标准教程
  • psi python
  • 安卓开源项目叫什么
  • js下拉菜单的制作方法
  • 如何打印纳税申报表
  • 我国国家宪法日是每年的十二月几日
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设