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 相关文章推荐
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 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
smarty内置函数section的用法
2015/01/22 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
总结对比php中的多种序列化
2016/08/28 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
php 可变函数使用小结
2018/06/12 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
node中的cookie的具体使用
2018/09/13 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
python 把列表转化为字符串的方法
2018/10/23 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
2014保险公司内勤工作总结
2014/12/16 职场文书
车队安全员岗位职责
2015/02/15 职场文书
中英文求职信范文
2015/03/19 职场文书
感恩教师主题班会
2015/08/12 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers