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


Posted in Javascript onSeptember 30, 2016

目的:

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

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

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

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

思路:

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

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

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

问题:

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

代码如下:

<div class="nav-box">
    <ul class="nav">
     <li><a href="javascript:void(0);" class="toHome active">Home</a></li>
     <li><a href="javascript:void(0);" class="toPort">Portfolio</a></li>
     <li><a href="javascript:void(0);" class="toCont">Contact</a></li>
    </ul>
    <a href="javascript:void(0);" class="nav-btn">...</a>
</div>
.nav-box {
  position: relative;
}
.nav-btn {
  display: none;
  color: #DE6B73;
  float: right;
  line-height: 20px;
  margin: 35px 0;
}
.nav {
  display: block ;
  border-top: none;
  position: absolute;
  right: 0;
}
@media(max-width:700px){
  .nav-btn{
    display: inline-block;
  }
}
@media(max-width:700px){
 .nav {
  display: none;
  top: 80px;
  background-color: #F79C9C;
  border-top: 1px solid #FFF;
  line-height: 60px;
 }  
}
window.onload=function(){
  $(".nav-btn").click(function(){
    $(".nav").slideToggle(500);
  });
}

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

解决:

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

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

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

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

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

最后的CSS代码如下:

.nav {
  display: none;
  position: absolute;
  right: 10%;
  top: 80px;
  background-color: #F79C9C;
  border-top: 1px solid #FFF;
  line-height: 60px;
}
.nav-btn {
  display: none;
  color: #DE6B73;
  float: right;
  line-height: 20px;
  margin: 35px 0;
}
@media(max-width:700px){
  .nav-btn{
    display: inline-block;
  }
}
@media(min-width:700px){
  .nav {
    display: block !important;
    border-top: none;
    top: 15px;
    right: 0;
  }
}

总结:

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
文本加密解密
Jun 23 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 #Javascript
javascript的几种写法总结
Sep 30 #Javascript
Vue.js实现拖放效果的实例
Sep 30 #Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 #Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 #Javascript
关于List.ToArray()方法的效率测试
Sep 30 #Javascript
微信小程序 window_x64环境搭建
Sep 30 #Javascript
You might like
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
Django 外键的使用方法详解
2019/07/19 Python
python实现各种插值法(数值分析)
2019/07/30 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
什么是方法的重载
2013/06/24 面试题
招聘专员岗位职责
2014/03/07 职场文书
骨干教师考核方案
2014/05/09 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
与美同行演讲稿
2014/09/13 职场文书
通讯稿范文
2015/07/22 职场文书
职工培训工作总结
2015/08/10 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
移除Selenium中window.navigator.webdriver值
2022/06/10 Python