位置: 编程技术 - 正文

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年专项附加扣除必须要确认吗
  • 不动产销售额怎么填
  • 增值税发票什么时候认证
  • 建筑安装企业增值税税负
  • 支付结算有哪些工具
  • pos机刷卡的银行有哪些
  • 券商买卖股票手续费
  • 印刷配件有哪些
  • 应交税费账户期末借方余额反映的是
  • 个税申报没交会收滞纳金吗
  • 蔬菜营销方案案例范文
  • 个人所得税承租承包经营所得
  • 应收款计提
  • 无偿划转净资产为负数的企业账务处理
  • 法人可以公司账户存款吗
  • 企业高管需要什么证书
  • 企业清算期间账务怎么做
  • 低值易耗品怎么结转
  • 咨询费的税费
  • 预收账款科目
  • 如何查看windows密钥时间
  • 收入记借方
  • 文件夹删除需要管理员权限怎么弄
  • php ftp功能
  • php教程 ftp 函数
  • 高校教材pdf
  • 一般合同怎么写才有效
  • 收到过期银行汇票怎么办
  • 纳税人跨县(市、区)提供建筑服务,应向建筑服务发生地
  • 企业重组的主要形式是什么?
  • vuecli项目实战
  • react reducer详解
  • 提租补贴计入个税吗
  • php 替换字符
  • css中哪些属性可以使用
  • lvm 命令
  • 根据不同资产涉及的税有哪些
  • MySQL查看最大连接数
  • sql删除表中的某一行
  • 计提工资 个人所得税
  • 个税更改公司怎么操作
  • 工程施工属于什么经营范围
  • 公司固定电话费用挂哪个科目
  • 商贸企业 税收 政策规定
  • 逾期未认证的增值税发票处理办法
  • 应收帐款周转率计算公式为
  • 认证固定资产发票如何入账
  • 业务协作费计入什么科目
  • 商品买一送一应该怎么写
  • 会计估计变动怎么处理
  • 银行存款利息记账凭证
  • 广告发布费属于什么费用
  • 旅游饮食服务企业的特点包括
  • java下一页
  • 查看mysql执行sql日志内容
  • 打印机向windows发送消息
  • linux的压缩包
  • win8.1原版系统安装教程
  • linux没有ssh
  • windows10周年更新
  • windows7的注册表在哪里
  • win8应用错误怎么办
  • linux在实际工作中的应用
  • win7系统如何调节电脑屏幕亮度
  • Zen Coding css,html缩写替换大观 快速写出html,css
  • angular做app
  • javascript definitive guide
  • jquery input checked
  • linux定时执行任务
  • socket.io与pm2(cluster)集群搭配的解决方案
  • unity 形变
  • js鼠标滚动控制图片缩放
  • 国家税务2018年61号附件
  • 税务局发票邮寄需要多久
  • 印花税计征周期
  • 从哪里可以免费听歌
  • 徐州国税局班子成员名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设